[ React ] React Memo - 성능 개선 도구

React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다.

이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다.

하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. 

 

React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다.

만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다.

 

이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다.

 

매개 변수를 추가하여 비교방식을 수정할 수도 있다.
React.memo(컴포넌트, [compareFunction(prevProps,nextProps)])

 

React Memo를 지향해야하는 상황

• 랜더링될 때 props가 다른 경우
• props가 자주 변하는 컴포넌트

 

메모이제이션 (Memoization)
주어진 입력값에 대한 결과를 저장 -> 같은 입력값에 대한 함수가 한번만 실행되는 것을 보장