React React.memo

React.memo는 React 컴포넌트의 성능 최적화를 위해 사용되는 고차 컴포넌트(Higher-Order Component, HOC)입니다. React.memo는 함수형 컴포넌트를 래핑하여 props가 변경되지 않는 경우 해당 컴포넌트를 다시 렌더링하지 않도록 최적화합니다.

사용법

import React from 'react';

const MyComponent = ({ value }) => {
  console.log('MyComponent 렌더링');
  return <div>{value}</div>;
};

export default React.memo(MyComponent);

주요 특징

1. props 변화 감지
   • 기본적으로 React.memo는 얕은 비교(Shallow Comparison)를 통해 이전과 새로운 props를 비교합니다.
   • props가 동일하면 컴포넌트를 다시 렌더링하지 않습니다.
2. areEqual 함수 (선택 사항)
   • 기본 비교 로직을 커스터마이징하려면 두 번째 인자로 areEqual 함수를 제공할 수 있습니다.
    

const areEqual = (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
};

export default React.memo(MyComponent, areEqual);

사용 예시

기본 사용

const Counter = ({ count }) => {
  console.log('Counter 렌더링');
  return <div>Count: {count}</div>;
};

export default React.memo(Counter);

areEqual을 사용한 최적화

const ComplexComponent = ({ data }) => {
  console.log('ComplexComponent 렌더링');
  return <div>{data.name}</div>;
};

const areEqual = (prevProps, nextProps) => {
  return prevProps.data.name === nextProps.data.name;
};

export default React.memo(ComplexComponent, areEqual);

주의 사항

1. 상태 관리
   React.memo는 props 변화만 최적화할 뿐, 상태 변화나 부모 컴포넌트의 재렌더링으로 인해 발생하는 렌더링은 막지 못합니다.
2. 과도한 사용 자제
   모든 컴포넌트에 React.memo를 적용하는 것은 불필요하거나 오히려 성능을 악화시킬 수 있습니다. 최적화가 필요한 경우에만 사용하세요.
3. useCallback과 함께 사용
   부모 컴포넌트에서 전달하는 콜백 함수를 최적화하지 않으면 React.memo의 효과가 떨어질 수 있습니다. 이를 위해 useCallback과 함께 사용하는 것이 좋습니다.

 

HOC(High Order Component, 고차 컴포넌트)는 React에서 컴포넌트를 입력받아 새로운 컴포넌트를 반환하는 함수입니다. 주로 컴포넌트 로직 재사용을 위해 사용됩니다.

횡단 관심사(Cross-Cutting Concerns)는 애플리케이션의 여러 모듈이나 기능에 걸쳐 공통적으로 발생하는 문제들을 의미합니다. 이러한 관심사는 비즈니스 로직과는 직접적인 관련이 없지만, 여러 곳에서 반복적으로 처리해야 하는 로직이므로 별도로 관리되어야 합니다.