자료 모음
<Route>: 지정된 Path에 연결된 컴포넌트를 화면에 출력한다. (<Route path="/..." component={컴포넌트})
<Link>: 이 태그에 감싸진 컴포넌트를 누르면 URL 주소를 바꿔준다. (Path 변환)
a 태그의 기본적인 속성은 페이지를 이동시킬 때 페이지를 아예 새로 불러온다는 점이다. 그럴 경우 리액트 앱이 지니고 있는 state들도 초기화되고 렌더링된 컴포넌트이 모두 사라지며 새로 렌더링을 하게 된다. 그렇기 때문에 라우터를 사용할 때는 a 태그 대신에 Link 컴포넌트를 사용한다. 이 컴포넌트는 HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않는다.
이렇게 앱에서 필요한 모든 경로와 컴포넌트 간의 맵핑을 위와 같이 최상위 컴포넌트에서 이뤄진다면, 앱의 규모가 커짐에 따라 유지 보수가 어려워질 것이다. 하지만 각 하위 컴포넌트 레벨에서도 더 하위 경로에 대한 라우팅을 모듈화할 수 있다면, 유지 보수가 쉬워질 뿐만 아니라 전반적으로 좀 더 유연한 라우팅 구현이 가능할 것이다.
중첩 라우팅을 구현하려면 먼저 ReactRouter의
<Route>컴포넌트의 component prop으로 넘어온 컴포넌트에 prop으로 어떤 값들이 넘어가는지에 대해 알아야 한다. 예를 들어<Route>컴포넌트에 '/about' 경로를<About>컴포넌트와 맵핑시키게 되면, React Router는 match, location, history라는 3개의 prop을<About>컴포넌트에 넘겨준다. 따라서, 다음과 같이<About>컴포넌트에서는 이 3개의 prop을 읽어서 각 객체가 어떤 데이터를 담고 있는지 렌더링해볼 수 있다.
중첩 라우팅을 구현에는 이 중에서도 특히 매칭 정보를 담고 있는 match가 사용된다.
중첩라우팅이 적용된 component에
this.props를 찍어본 결과.
react-router를 사용하여 위와 같이 각 path 마다 컴포넌트를 뿌려줄 때, props는 어떻게 전달해주어야 할까?
<Route exact path='/education' component={Education} education={data}/>예를 들어 Education 컴포넌트에서 education이라는 prop이 필요하다고 가정해보자.
<Education>컴포넌트로 어떻게 전달해야할지 몰라 저렇게 일단 넣어보면 원하는대로 동작하지 않는다. React Router는 컴포넌트로 education이라는 prop을 전달해주지 않고 그냥 무시하기 때문이다.
<Route
path='/education'
render={() => <Education education={data} />}/>그렇다면 best solution은 무엇일까? Route 컴포넌트의 component prop을 사용하지 말고 render prop을 사용하는 것이다. render prop은 함수형 컴포넌트를 수용하고 불필요하게 다시 마운트 되지 않는다.
