011. React.memo 최적화

이 또한 memoization의 일환으로, 컴포넌트에 전달되는 동일한 props가 전달됐을 때, 저장된 컴포넌트를 불러오도록 하는 고차 컴포넌트이다. 따라서 props가 거의 항상 변경되는 컴포넌트에는 갱신값 비교에서 계속 false가 될 것이므로, 오히려 비효율적이다.(props값 비교에 더 많은 자원을 사용하게 된다.)

 

사용법은 간단하다.

그냥 함수를 감싸주면 된다.

const hi = "name";

const hello = () => {
  console.log(`hi, ${hi}`);
};

위와 같은 함수를

const hi = "name";

const hello = React.memo(() => {
  console.log(`hi, ${hi}`);
})

하면 되고,

이게 컴포넌트 단위일때는

export default React.memo(foo);

하면 된다.