React.memo 란?

• React.memo란?
  React.memo는 메모이제이션된 함수 컴포넌트를 생성하는 고차 컴포넌트 메모이제이션은 이전에 계산된 값을 저장해 두었다가 같은 계산이 필요할 때 이전의 결과를 사용하는 최적화 기법이다. React.memo를 사용하면 컴포넌트가 같은 props로 여러 번 렌더링될 때, 이전에 렌더링된 결과를 재사용하여 성능을 향상시킬 수 있다.

• 왜 사용해야 할까?

1. 성능 향상: 특히 props가 자주 변경되지 않는 상황에서, 불필요한 리렌더링을 방지하여 성능을 개선할 수 있다.

2. 리렌더링 최적화: 특정 컴포넌트의 리렌더링을 방지하고 싶을 때 유용합니다.

3. 예제를 통해 이해하기

import React, { memo } from 'react';

// Without React.memo
const WithoutMemo = ({ name }) => {
  console.log(`Rendering without memo for ${name}`);
  return <div>{name}</div>;
};

// With React.memo
const WithMemo = memo(({ name }) => {
  console.log(`Rendering with memo for ${name}`);
  return <div>{name}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <WithoutMemo name={`Component without memo - Count: ${count}`} />
      <WithMemo name={`Component with memo - Count: ${count}`} />
    </div>
  );
};

위 예제에서 WithoutMemo는 부모 컴포넌트의 리렌더링에 영향을 받아 항상 렌더링되지만, WithMemo는 React.memo를 사용하여 props가 변경되지 않으면 리렌더링을 하지 않는다. 이를 통해 성능 개선이 이루어진다.

• 마치며
  React.memo는 React 애플리케이션의 성능을 개선하고자 할 때 유용한 도구로 컴포넌트를 감싸는 것만으로 간단하게 적용할 수 있어 불필요한 리렌더링을 방지하고 성능 향상을 기대할 수 있다.

• 공식사이트 관련 내용 정리

React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

const MyComponent = React.memo(function MyComponent(props) {
/* props를 사용하여 렌더링 */
});

• 참고 사이트: react 공식 사이트
  https://ko.reactjs.org/docs/react-api.html#reactmemo