React.memo

React.memo()란?

React는 먼저 컴포넌트를 랜더링한 뒤 , 이전에 랜더링 된 겨로가와 비교하여 DOM 업데이트를 결정

만약 렌더링 결과가 이전과 다르다면, React는 DOM 을 업데이트

 

이 과정에서 만약 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 렌더링하고

결과를 메모이징 함

그리고 다음 렌더링이 일어날 떄 랜더링하는 컴포넌트의 props가 같다면, React는 메모이징된 내용을 재사용

 

React Memo를 사용을 지양해야한 상황

랜더링 될 떄 props가 다른 경우가 대부분인 컴포넌트를 생각해보면, 메모이제이션 기법의 이점을 얻기 힘듬

 

props가 자주 변하는 컴포넌트를 React.memo()로 래핑 할지라도, React는 두가지 작업을 리 렌더링 할 때마다 수행

 

1. 이전 props와 다음 props의 동등 비교를 위해 비교 함수를 수행

2. 비교 함수는 거의 항상 false를 반환할 것이기 때문에 React는 이전 랜더링 내용과 다음 랜더링 내용을 비교

 

비교 함수의 결과는 대부분 false를 반환하기에 props 비교는 불필요

 

React.memo()는 리 랜더링을 막기 위한 도구보다 성능 개선의 도구

React는 성능 개선을 위한 하나의 도구로 메모이제이션을 사용

대부분의 상황에서 React는 메모이징 된 컴포넌트의 리 랜더링을 피할 수 있지만, 랜더링을 막기 위해 메모이제이션에 너무 의존하면 안됨