111 React Router로 렌더링하는 컴포넌트에 prop 전달하기
source: categories/study/vue-experiance/vue-experiance_9-99_12.md
111 React Router로 렌더링하는 컴포넌트에 prop 전달하기
<Route exact path='/education' component={Education}/>
포폴 개편 작업을 하다가 react-router를 사용하여 위와 같이 각 path 마다 컴포넌트를 뿌려줄 때, props는 어떻게 전달해주어야 하는지 찾아보았다.
<Route exact path='/education' component={Education} education={data}/>
예를들어, Education 컴포넌트에서 education이라는 prop이 필요하다고 가정해보자.
Education 컴포넌트로 어떻게 전달해야할지 몰라 저렇게 일단 넣어보면 원하는대로 동작하지 않는다.
React Router는 컴포넌트로 education이라는 prop을 전달해주지 않고 그냥 무시하기 때문이다.
<Route
path='/education'
component={() => <Education education={data} />}/>
위의 방법이 먹히지 않았으니, 두번째 방법으로 적용해본다면 원하는대로 작동은 한다!
하지만 공식 docs에 따르면 performance측면에서 좋은 방법은 아니라고 나와있다.
이유는 component prop에 inline-function형태로 값을 주면, 렌더링을 할 때마다 새로운 컴포넌트를 생성한다.
따라서, 원래라면 컴포넌트가 이미 마운트가 한번 되고 그후로는 업데이트되어야 하는데,
이 컴포넌트를 언마운트 시킨 후, 매번 불필요하게 ‘재 생성'하여 마운트 하기 때문에 퍼포먼스 측면에서 좋지 않다고 한다.
그렇다면 best solution은 무엇일까?
<Route
path='/education'
render={() => <Education education={data} />}/>
Route 컴포넌트의 component prop을 사용하지 말고 render prop을 사용하는 것이다.
render prop은 함수형 컴포넌트를 수용하고, 위의 방법을 사용했을 때 처럼 불필요하게 다시 마운트 되지 않는다.