React.memo

React.memo는 고차 컴포넌트(컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수)이다.
React.memo는 리액트에서 고질적으로 발생하는 하위 컴포넌트들의 리렌더링을 방지하기 위해서 만들어진 고차 컴포넌트이다.

불필요한 리렌더링 방지

리액트는 부모 컴포넌트가 어떤 이유(props 변경, 상태 변경)에 의해서 리렌더링하면 자식 컴포넌트 함수 또한 다시 실행된다. 만약 자식 컴포넌트에서 useCallback을 통해 최적화를 하더라도, 부모 컴포넌트 함수가 실행되면 자식 컴포넌트 함수가 다시 실행되는 것을 방지할 수 없다.

이 때문에 자식컴포넌트 함수 자체를 호출하지 않기 위해서 props가 변경되지 않으면 자식 컴포넌트 함수를 호출하는 대신에, 이전에 생성한 컴포넌트를 재사용하는 식으로 렌더링 퍼포먼스를 개선할 수 있다.

예제 코드: https://playcode.io/1509329