1. React.memo 란?
컴포넌트가 props 가 변화할때만 리렌더링을 하고
props가 변화하지 않을때는 컴포넌트를 재사용하는 React의 HOC Hooks
2. 사용방법
컴포넌트를 React.memo로 감싸면 된다.
3. React.memo를 쓰면 좋을 때
- 순수 함수 컴포넌트 일때
- 리액트 함수 컴포넌트는 순수함수, 클래스 컴포넌트만 사용안하면 됨
- 자주 렌더링 될때
- 말 그대로 빈번하게 렌더링 되는 것들. Profile로 체크할 수 있다.
- 똑같은 prop으로 리렌더링 될때
- Input을 작성할 때 계속 상관없는 컴포넌트가 렌더링 되는 것을 볼수 있는데 이러한 경우 React.memo로 최적화를 할 수 있다.
- 컴포넌트가 클 때
- 체크할 props가 많아지는 경우 유리하지 않기 때문인걸로 보인다.
4. React.memo를 쓰지 말아야 할 때
- 컴포넌트가 가벼울 때
- 가벼운 컴포넌트의 경우 컴포넌트를 memoization하는 비용이 더 들 수 있다.
- props가 자주 바뀔 때
- props가 자주 바뀌면서 일어나는 리렌더링은 React.memo로 제어할수 있는 부분이 아니기 때문에 React.memo의 메리트가 없어진다.
- 나의 생각 : 일반적으로 컴포넌트의 리렌더링은 상위 컴포넌트, state, props의 변화에 의해서 리렌더링이 이루어진다. 하지만 React.memo는 prop의 변화에 의해서만 리렌더링을 하기 때문에 state와 상위 컴포넌트의 변화를 감지할 필요가 없는 컴포넌트에 적합하다고 생각한다.
rkdghwnd's dev story