렌더링 수 줄이기

[ React -1 ] React.memo 를 사용하여 컴포넌트 성능 최적화하기 . / React.memo 사용할 때 그리고 사용하지 않을 때 팁 정리

유저들은 아주 작은 속도에도 굉장히 민감하게 반응을 합니다. 100 ~300 의 정말 작은 초 단위도 느낄만큼 유저들은 서비스의 속도에 대해서 아주 민감하네요. 이런 UI 를 해결하기 위해서, React 는 higher order component 중 하나인 React.memo 를 제공합니다. 1. React.memo() 에 대한 간략한 소개 React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정합니다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트하게 됩니다. React.memo() 로 감싸져있는 내용을, 리액트는 결과를 먼저 memoizing 하게 됩니다. 다음 렌더전에, props 의 결과가 똑같다면 react 는 me..