[react-router nesting 연습]

주의 : 

1. functional 컴포넌트에서 함수를 호출하기 위해서는 useEffect( ) 안에 넣어야 한다. (axios, fetch)

2. axios, fetch를 사용한 후 사용하고자 하는 데이터를 추출. 추출 후 반드시 useState로 state값을 전달해야 한다.

 

 

-----------------------------------------------------------------------------------------------------------------------------------

주의:

Link와 Route의 parameter는 상관관계에 있다.

page1의 첫째 자식의 path는 "/" 이다. 이는 "홈"화면을 경로로 성정한 것이다. 즉, 부모인 Page1 컴포넌트가 보여진다.

 

subpage1에서 "C_CODE"라는 객체를 map함수 안에서 만들었고, 이는 posts라는 객체의 정보를 배열형태로 담고 있다. map함수 안에서 C_CODE를 정의하고 Link의 "to"에 넣었다. C_CODE는 subpage2에서 useParams에 의해 활용된다.

 

axios.get으로 가지고 온 데이터를 어떻게 활용하는지가 중요하다. useParams

axios.get → posts → C_CODE / M_CODE etc... → Link → Route

-----------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------