state를 가지고 있는 컴포넌트는 당연히 렌더링이 되어야 한다. 그리고 타이핑할 때 마다 변화해야하는 message부분, 타이핑 하는 부분도 당연히 렌더링 되어야한다. 여기까지는 렌더링 되어야하는 부분이니까 상관이 없는데 문제는 렌더링 될 필요가 없는 더미 데이터의 리스트와 리스트 아이템까지도 렌더링 되는 상황이 발생해버린다.
이러한 부분은 React.memo로 해결이 가능하다.
React.memo의 적용 방법은 간단하게 원하는 컴포넌트를 React.memo( )로 감싸주면 된다.
React.memo가 필요한 컴포넌트에 적용해주면 더이상 불필요한 부분까지 렌더링 되는 일이 방지 된다.
이렇게 React.memo를 적용한 B컴포넌트의 렌더링 속도는 어떨까?
B 컴포넌트의 렌더링 속도가 엄청나게 향상한 것을 볼 수 있다.
이렇게 좋은 React.memo란 ?
React는 먼저 컴포넌트를 렌더링 한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다.
만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트 한다.
이 과정에서 만약 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 렌더링하는 컴포넌트의 props가 같다면, React는 메모이징 된 내용을 재사용 한다.
메모이제이션
Memoization은 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장함.
React.memo 사용을 지양해야하는 상황
렌더링 될 때 props가 다른 경우가 대부분인 컴포넌트는 메모이제이션 기법의 이점을 얻기 힘들다.
props가 자주 변하는 컴포넌트를 React.memo 적용 하더라도 React는 두 가지 작업을 리 렌더링할 때 마다 수행한다.
1. 이전 props와 다음 props의 동등 비교를 위해 props 비교 함수 수행
2. 비교 함수는 거의 항상 fasle를 반환할 것이기 때문에, React는 이전 렌더링 내용과 다음 렌더링 내용을 비교
비교 함수의 결과는 대부분 false를 반환하기 때문에 렌더링 비교까지 매 렌더링마다 수행한다. 이에 props 비교는 비효율적인 작업이 된다.
React.memo는 리 렌더링을 막기 위한 도구보다 성능 개선의 도구
React에서는 성능 개선을 위한 하나의 도구로 메모이제이션을 사용한다. 대부분의 상황에서 React는 메모이징 된 컴포넌트의 리 렌더링을 피할 수 있지만, 렌더링을 막기 위해 메모이제이션에 너무 의존하면 안 된다.
정리하자면
리액트에서 렌더링 성능 최적화를 위해서는 컴포넌트를 분리하고 React.memo를 사용한다. 하지만 React.memo가 항상 좋은 것은 아니기에 profiler를 이용해서 성능상 이점이 있는지 확인 후 사용하는 것이 좋다.
