React 공식문서 -memo

- memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다.

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

- memo로 컴포넌트를 감싸 메모화된 버전의 컴포넌트를 얻을 수 있다.

- 메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는 한 부모 컴포넌트가 리렌더링할 때 같이 리렌더링 하지 않는다.

 

* 매개변수

- component : 첫 번째 인자로 메모화 하려는 컴포넌트가 들어간다.

- arePropsEqual(optional) : 컴포넌트의 이전 prop 및 새로운 prop의 두 인자를 받는 함수이다. 만약 새로운 prop과 이전 prop이 같으면 true를 반환한다. React는 기본적으로 Object.is로 각 prop을 비교하기 때문에, 일반적으로 이 함수를 지정하지는 않는다.

---

Minimizing props changes(props 변경 최소화하기)

- memo를 사용할 때, React는 Object.is를 사용해서 어떤 prop이든 이전 prop과 얕은 비교를 하고 같지 않을 때마다 컴포넌트를 리렌더링 한다.

- memo를 최대한 활용하려면 props가 변경되는 횟수를 최소화해야 한다.

- prop이 객체인 경우, useMemo를 사용하여 부모 컴포넌트가 해당 객체를 매번 다시 만드는 것을 방지할 수 있다.

- 혹은 props가 해당 요소에 필요한 최소한 정보만을 받고 있는지 확인하고, 전체 객체 대신 개별 값을 사용할 수도 있다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)