[React 성능 최적화] 1. React.memo

React는 컴포넌트 기반 라이브러리로, 상태나 props가 변경되면 관련된 컴포넌트를 다시 렌더링한다다. 하지만 불필요한 렌더링은 성능 문제를 야기할 수 있으므로 이를 방지하기 위해 적절하게useMemo, useCallback, React.memo등과 같은 도구를 이용해야한다.

React.memo

React.memo는 컴포넌트 자체를 메모이제이션한다. 부모 컴포넌트가 다시 렌더링되더라도 props가 변경되지 않았다면, 자식 컴포넌트를 다시 렌더링하지 않는다.

import React, { memo } from 'react';

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

export default memo(Child);

언제?

계산 비용이 높은 작업(예: 배열 합산, 정렬, 필터링 등)을 최적화할 때.

주의사항

• 불필요하게 사용하는 것은 오히려 성능을 저하시킬 수 있음.
• 의존성 배열을 정확히 관리해야 함.

React.memo를 사용하지 않아야 하는 경우

React.memo는 컴포넌트를 메모이제이션하여 부모 컴포넌트의 불필요한 렌더링을 방지한다. 하지만 아래 상황에서는 사용하지 않는 것이 좋다.

1. 컴포넌트가 간단할 때
   컴포넌트가 렌더링 비용이 거의 없거나, DOM 업데이트가 빠르게 처리될 수 있다면 React.memo의 이점이 없다.

2. props가 자주 변경될 때
   React.memo는 props가 변경될 때마다 다시 렌더링된다. props가 자주 변경된다면 메모이제이션의 효과가 제한적이다.

3. props로 복잡한 객체를 전달할 때
   React.memo는 얕은 비교만 수행한다. 객체나 배열이 props로 전달되면 참조가 변경될 때마다 다시 렌더링되므로 효과가 떨어진다.
   • 대안: 불변성을 유지하거나 useMemo로 객체를 메모이제이션.