---

React.memo

• React에서 제공하고, 불필요한 재렌더링을 방지하는 고차 컴포넌트(HOC, Higher-Order Component).
• 이전에 렌더링한 결과를 메모이제이션 => 다음에 같은 Props로 렌더링 될 때 이전의 레더링 결과를 재사용.
• React.PureComponent와 유사하지만, React.memo는 함수 컴포넌트에서만 사용 가능.
• React.memo를 사용하려면 함수 컴포넌트로 작성하고, 감싸줘야함.

import React from 'react';

const MyComponent = React.memo((props) => {
  // ...
});

export default MyComponent;

예시

import React, { useState } from 'react';

// React.memo를 사용하여 컴포넌트를 래핑.
const Counter = React.memo(({ count, onClick }) => {
  console.log('Counter 렌더링');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClick}>
        Click me
      </button>
    </div>
  );
});

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  console.log('App 렌더링');

  return (
    <div>
      <Counter count={count} onClick={handleClick} />
    </div>
  );
}

export default App;

• count, onClick이 변경되지 않는 한 컴포넌트가 재렌더링 되지 않음.
• 재렌더링 되어도 변경된 값은 표현 가능.

---