memo 란?
React의 memo 함수는 불필요한 컴포넌트 재렌더링을 방지하기 위한 고차 컴포넌트이다. 컴포넌트를 memo로 감싸면, React는 컴포넌트의 현재 props와 다음 props를 얕게 비교한다. 변화가 있을 때만 컴포넌트를 재렌더링한다.
memo에 대한 주요 사항은 다음과 같다:
memo는 props가 변경되지 않을 때 불필요한 재렌더링을 방지해 성능을 최적화하는 데 유용하다.
memo는 성능 최적화를 위해 사용되어야 하며, 컴포넌트가 memo 없이 제대로 작동하지 않는다면, 기본적인 문제를 먼저 해결해야 한다. 렌더링 로직이 비용이 많이 들고, 컴포넌트가 자주 같은 props를 받을 때, 메모이제이션이 효과적이다. 매번 다른 props로 재렌더링된다면 memo는 효과가 없다.
props 변경을 방지하기 어렵다면, memo의 두 번째 인자로 사용자 정의 비교 함수를 제공할 수 있다. 이 함수는 새로운 props가 이전 props와 동일한 결과를 낼 것 같으면 true를 반환해야 한다. 비교 함수가 실제 재렌더링 과정보다 빠른지 확인하는 것이 중요하다.