Route의 렌더링 방법들

• <Route component>
• <Route render>
• <Route children> function

<Route>로 무언가를 렌더링 할 때 권장하는 방법은 children으로 요소를 사용하는 것입니다. 그러나 이 외의 방법들은 hook이 도입되기 전의 앱을 지원하기 위해 제공한다고 합니다.

위 3가지 방법 중에 1가지만 사용해야 합니다.

차이점

3가지 방법 모두 다음 props를 컴포넌트에 제공합니다.

• match
• location
• history

component

router는 받은 component를 React.createElement 를 이용해서 새로운 React element를 만듭니다. 이 것은 만약 당신이 component 내부에서 인라인 함수를 사용하게 되면 매 렌더링 마다 새로운 컴포넌트를 만들어 낸다는 뜻 입니다. 이 결과 이미 존재하는 컴포넌트는 unmount 되고 다시 만들어져 mount 됩니다. 업데이트 하는 것이 아니라!

만약 인라인 함수를 사용해야 한다면 render 또는 children prop을 사용하세요.

<Route path="/user/:username" component={User} />