1. React.memo 란?

• React.memo는 함수형 컴포넌트를 메모이제이션하여 동일한 props를 받았을 때 불필요한 렌더링을 방지한다.

• props 가 동일한지 판단해서 return 할지 렌더링을 진행할지 분기시키는 식으로 직접 비교해서 구현도 가능하다.

• 기본 사용법 및 직접 비교 구현 예시 :

// 기본 사용법
const MyComponent = React.memo(function MyComponent(props) {
  /* 렌더링 로직 */
});

// 직접 커스텀 비교 함수 사용
const MyComponent = React.memo(function MyComponent(props) {
  /* 렌더링 로직 */
}, (prevProps, nextProps) => {
  // true를 반환하면 리렌더링 방지 (props가 동일하다고 간주)
  return prevProps.id === nextProps.id;
});

2. 언제 사용해야 할까?

• 동일한 props를 받았을 때 동일한 결과를 렌더링하는 순수 컴포넌트
• 자주 리렌더링되지만 렌더링 결과가 거의 변하지 않는 컴포넌트
• 렌더링 비용이 높은 복잡한 컴포넌트

순수 컴포넌트란?

• 동일한 형식의 데이터를 받아서 같은 UI 에 내용만 변경해서 렌더링 하는 등, 컴포넌트 내부에서 props 를 변경하지 않고 같은 결과를 렌더링하는 컴포넌트.
• card 컴포넌트, TodoList 의 리스트 아이템 컴포넌트 등.

복잡한 컴포넌트의 예시는?

• 데이터를 받아 차트를 렌더링하는 컴포넌트,
• 사용자 닉네임 등만 변하는 Header 컴포넌트,
• 장바구니 등 복잡한 폼 하위의 독립적인 섹션 컴포넌트 등

3. 언제 사용하지 않아야 할까?

• 거의 항상 다른 props 를 받는 컴포넌트
• 간단하거나 하위 요소가 적은 컴포넌트
  (메모이제이션 자체도 비용이 있기 때문에, 텍스트만 렌더링하는 등의 간단한 컴포넌트에는 사용하지 않는 편이 좋음)
• 항상 상위 컴포넌트와 함께 업데이트 되어야 하는 컴포넌트

4. 한계

• React.memo 는 기본적으로 얕은 비교(참조 비교)를 수행하기 때문에, props 객체의 내용이 같아도 참조가 다르면 리렌더링 됨.

5. 실무 적용 가능성

• 아직까지는 적용해보지 않았음. 이유는 순수 컴포넌트이면서 복잡성이 높은 하위 컴포넌트가 생각보다 많지 않았기 때문. 리스트 아이템들의 경우도 렌더링 비용이 눈에 띄게 높지는 않았다.
• 추후에 아티스트 리스트를 백개, 천개 단위로 렌더링해야 할 경우, 또는 인앱 결제 도입시 장바구니 기능을 적용한다면 사용해 볼 수 있을 것 같다. 혹은 기존의 헤더 컴포넌트에도 적용해볼 수 있을 듯.