React.memo()로 성능 개선

React.memo 개요

리액트는 컴포넌트를 렌더링 한 뒤 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면 DOM을 업데이트한다.

컴포넌트가 React.memo로 래핑되면 컴포넌트를 렌더링하고 결과를 기억(Memo) 한다. 그리고 다음 렌더링이 일어날때 props와 같다면 기억된 내용을 재사용한다.

React.memo 적용

리액트 디버깅툴에서 툴에서 환경설정에서 Highlight updates when components render 부분을 체크한다.

체크후에 카운트를 증가하면 전체 화면이 렌더링 되는것을 알 수 있다. 첫번째 player의 카운트를 증가하면 해당 플레이어만 렌더링하면 될 거 같은데, 전체가 렌더링 되는것은 분명히 성능을 떨어뜨리는 요소이다.

CustomPlayer와 Player, Counter 컴포넌트를 React.memo()로 래핑한 뒤에 렌더링 결과를 확인해보자. 전체가 렌더링 되지 않는 결과를 볼 것이다.