문제 상황
A 컴포넌트를 변경하는데 B 컴포넌트가 자꾸 리렌더링되는 현상이 발생했다.
useMemo, memo를 사용해봤는데 해결되지 않았다.
자세히 보니 B 컴포넌트가 매번 mount와 update가 호출되고 있었다.
가까운 상위 컴포넌트중에 한 번만 mount되는 컴포넌트가 발견될 때까지 찾았다.
- 기존 코드
const getComponentExample = () => <ComponentExample name={'O2o2'}/>
return (
<Route path={YOUR_PATH} component={getComponentExample} />
);ComponentExample 컴포넌트는 name이라는 props를 갖고 있다.
props가 없다면 아래 코드처럼 써도 될텐데 props를 갖고 있는 경우였다.
<Route path={YOUR_PATH} component={ComponentExample} />해결
Route에서 컴포넌트 props를 전달하는 법을 찾아봤다.
<Route
path={YOUR_PATH}
render={() => <ComponentExample name={'O2o2'} />} />위에 처럼 고치니까 한 번만 mount된다.
이유는 글에 써있다.
"When you use
component
, the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component attribute, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component."
component props를 사용하면 퍼포먼스에 문제가 생기는데,
매번 새로운 컴포넌트를 생성해서 update가 아닌 mount를 하게된다.
render props를 사용했더니 해결됐다.
