React.memo

React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인합니다.
입력되는 모든 props의 신규 값을 확인한 뒤, 기존의 props의 값과 비교하도록 리액트에게 전달합니다.
props의 값이 바뀐 경우에만 컴포넌트를 재실행 및 재평가하게 됩니다.
부모 컴포넌트가 변경되었지만 React.memo의 인자로 들어간 컴포넌트의 props 값이 바뀌지 않았다면 컴포넌트 실행은 건너뜁니다.(재평가 하지 않습니다)

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}

export default React.memo(MyComponent);

언제 사용해야 할까

1. 컴포넌트가 같은 Props로 자주 렌더링 될 때
2. 컴포넌트가 렌더링 될때마다 복잡한 로직을 처리해야 할 때
3. 컴포넌트 트리가 매우 크고, 트리의 상위에 위치해 있을 때
4. 부모 컴포넌트를 재평가할 때마다 컴포넌트 혹은, props의 값이 변화할 필요가 없을 때

Props 변화에만 의존하는 최적화 방법입니다.
React.memo를 사용하여도 만약, state와 관련된 hook을 사용한다면 state와 context가 변할 때마다 재평가 됩니다.
React.memo의 최적화는 컴포넌트를 재평가하는 데에 필요한 성능 비용과 props를 비교하는 성능 비용을 서로 맞바꾸는 겁니다.
따라서 불필요한 랜더링 횟수를 줄일 수 있지만 추가적인 메모리를 소비하기 때문에 정말 필요한 상황에서만 사용해야합니다.