React.memo에서 memo는 메모이제이션(Memoization)을 뜻합니다. 따라서 먼저 메모이제이션이 무엇인지 이해하는 것이 중요합니다.
📌 Memoization
이미 계산한 값을 메모리에 저장해 두었다가, 같은 계산이 필요할 때 다시 계산하지 않고 저장된 값을 꺼내 쓰는 기법입니다.
📌 React.memo
React.memo는 고차 컴포넌트(Higher Order Component, HOC) 입니다.
React.memo는 이전 props와 새로운 props를 얕은 비교 하여 props가 변경되지 않았다면 컴포넌트의 리렌더링을 건너뛰고 재사용하여 성능을 최적화합니다.
💡 고차 컴포넌트(HOC)란 컴포넌트를 인자로 받아서 메모이제이션이 적용된 새로운 컴포넌트를 반환하는 함수입니다.
React.memo 사용법
const MyComponent = React.memo((props) => {
return (/*컴포넌트 렌더링 코드*/)}
);React.memo를 사용하면 좋은 경우
- props가 자주 변경되지 않는 컴포넌트
- 컴포넌트가 렌더링이 될때마다 복잡한 로직(무거운 연산)을 처리
React.memo를 사용하면 안좋은 경우
React.memo는 props가 바뀌지 않을 때 리렌더링을 방지해 성능을 최적화하지만, 다음과 같은 상황에서는 오히려 불필요하거나 효과가 없습니다.
- props가 자주 변경되는 컴포넌트
- 렌더링 비용이 거의 없는 단순한 컴포넌트
- 객체나 함수를 직접 props로 넘기는 경우 - 매번 새로운 참조가 생성되어 비교결과가 항상 false.
이경우 객체에선usememo을 통해, 함수에선usecallback을 통해 참조를 유지한 후React.memo와 조합으로 해결할 수 있습니다.
📌 usememo와 React.memo
공통점
- 메모이제이션 기법 사용
- 성능 최적화
- 의존성 기반
차이점
1. 타입
usememo : React Hook
React.memo : 고차 컴포넌트(HOC)
2. 메모이제이션 대상
usememo : 계산 결과
React.memo : 컴포넌트 전체
3. 사용 위치
usememo : 컴포넌트 내부
React.memo : 컴포넌트 감싼 외부
4. 비교 기준
usememo : 의존성 배열
React.memo : props 변경 여부
usememo vs React.memo 결론
- 의존성 배열의 변경 여부로 리렌더링을 줄일려면
usememo사용 - props의 변경 여부로 리렌더링을 줄일려면
React.memo사용
📌 React.memo 결론
Memoization 기법으로 동작하고 props가 변화 할때만 리렌더링 됩니다.
React.memo는 성능 최적화만을 목적으로 하는 도구입니다.
"측정 먼저, 최적화는 나중에"
React.memo를 무분별하게 쓰면 오히려 성능이 저하될 수 있습니다.
따라서 성능 문제가 확인 된 경우에만 적용해야 합니다.
React.memo는 특정한 성능 최적화를 위한 전문 도구이므로, 사용하기 전에 다른 대안이 있는지 먼저 검토하는 것이 좋습니다.
