React - React.memo

리액트에 있어서 리랜더링이 빈번하게 발생한다는 것은 그렇게 좋은 소식은 아니다. 그래서 최적화가 필요하다. 리액트에 불필요한 랜더링을 방지하도록 최적화하는 대표적인 방법이

1. memo(React.memo) : 컴포넌트를 캐싱
2. useCallback : 함수를 캐싱
3. useMemo : 값을 캐싱

이다.

이중 memo에 대해서 알아보자.

React.memo

자식 컴포넌트는 변경사항이 없어도, 부모 컴포넌트의 변화에 따라서 불필요하게 리랜더링 되는 상황이 많은데 이를 막는 도구가 React.memo다.

React.memo 사용법

App.js 하위에 Box1.js, Box2.js, Box3.js라는 세 개의 컴포넌트가 있다고 가정했을 때, App컴포넌트의 state 변경으로 인해 세 박스 컴포넌트의 리랜더링을 막는 방법은 간단하다.

세 개의 import되는 파일들 말단에

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

각각을 선언해주면 된다.
그럼 더이상 부모 컴포넌트의 state 변경으로 인해 불필요하게 리랜더링 되는 상황을 방지할 수 있다.