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은 함수형 컴포넌트를 수용하고, 위의 방법을 사용했을 때 처럼 불필요하게 다시 마운트 되지 않는다.