부모 컴포넌트의 변화로 자식 컴포넌트에 전달되는 prop 가 변경되지 않았는데 리 렌더링이 된다면 불필요한 렌더링이 발생하는 것 입니다.
이것을 해결하기 위해 React 에서 제공하는 React.memo 를 사용 합니다.
React.memo 는 React 에서 제공하는 고차 컴포넌트 입니다.
고차 컴포넌트는 어떤 컴포넌트를 인자로 받아서 최적화된 컴포넌트로 반환 합니다. 이때 렌더링이 되어야 할 상황에 React.memo 는 prop 를 체크해서 변경이 있는지 확인하고 변경이 있다면 렌더링 해주고 변경이 없다면 기존의 컴포넌트를 재사용 합니다.
React.memo 는 컴포넌트가 같은 prop 로 자주 렌더링 될 때와 컴포넌트가 렌더링이 될때마다 복잡한 코드를 처리해야 한다면 그때 사용하는것을 추천 합니다. 그렇지 않으면 너무 많은 컴포넌트를 메모리에 저장해둬야 해서 성능에 좋지 않습니다.
React.memo 는 prop 의 변화만 확인해서 렌더링을 결정 합니다.
useState, useReducer, useContext 같은 state 관리 hook 들을 사용했을때는 state, context 의 변화가 있다면ee prop 의 변화가 없더라도 리 렌더링을 막을 수 없습니다.
