Context-최적화-2가지-방법
2023-05-20
Context를 사용하다 보면 의도치 않는 재렌더링으로 인해 성능 저하를
경험해본 적이 있을것이다
Context의 값이 변경 되었을때 useContext 를 사용하는 컴포넌트의
재렌더링을 하게 되는데 이러한 경우의 문제를 2가지 방식으로 해결 할 수 있다.
1. Context 나누기
데이터를 주는 Context Provider와 데이터를 변형하는 Context Provider를 나누어 주면 된다
이런 방식으로 Context를 사용하게 되면 재렌더링될 컴포넌트를 사용자가 직접
정할수 있게되는 장점이 있지만
Context를 여러개로 나누는 만큼 Context의 갯수가 늘어나게 되고
Context의 구독 관리 또한 어려워진다
2. React.memo를 사용 하는 방법
memo를 통해서도 Context를 최적화 할 수 있다
위 코드와 같이 Context를 구독하는 컴포넌트를 memo 처리해주면
context의 값이 변경되지 않는한 재렌더링 되지 않는다
또한 Provider의 value값으로 객체 값을 주려면 꼭 useMemo를 사용하도록 하자
객체값은 참조값이기에 매 렌더링마다 무조건 값이 달라져
불필요한 재렌더링을 하게된다
