React Router 이슈

흔히 우리가 사용하는

<Route path="/profile" component={Profile}/>

위 방법은, 해당 path의 경로가 입력이되면 component를 렌더링 시킨다는 방법이다.

하지만, 위 방법처럼 인라인으로 사용하게 되면, 라우터는 React.createElement를 사용해서 React 요소를 새로 만든다.

즉, 인라인으로 위와 같이 Route를 사용하게 되면, 렌더링 할때마다 새로운 컴포넌트를 만들게 된다.

위 방법은 기존 컴포넌트를 업데이트 하는것이 아닌, 기존 컴포넌트를 언마운트하여 해제하고 새로운 컴포넌트를 생성하여 마운트 해주는 오버헤드가 발생하는 문제점이 야기된다.

결국, render를 사용하거나 children prop을 사용하는 것을 권장한다.

---

자식으로 렌더링하는 방법

<Route path="/profile">
 <Profile />
</Route>

---

render를 사용하는 방법

<Route path="/home" render={() => <Home /> } />