[Korean FE Article] 리액트 성능 최적화, 500ms 에서 1.7ms 까지 : 그 여정과 체크리스트
글 링크 : https://ykss.netlify.app/translation/500ms-to-1.7ms-in-react:-a-journey-and-a-checklist/
소개
리액트 애플리케이션을 개발하다 보면 성능 개선이 필요한 시점이 있습니다. 하지만 많은 개발자들이 정작 어떤 시점에 성능 개선을 해야 할지, 어떤 지점에서 성능 병목 현상이 발생하는지, 어떤 방식으로 병목 현상을 해결하고 성능 개선을 해야할 지모르는 경우가 많습니다.
이 글에서는 원작자가 겪었던 성능 병목 현상을 500ms에서 1.7ms까지 줄여갔던 여정이 담겨있습니다. 원작자가 어떤 식으로 성능 병목 현상을 찾고, 어떤 방법으로 성능 개선을 하였는지 살펴보면 성능 개선에 대해 알아가는데 많은 도움이 될 것으로 생각합니다.
tl;dr
성능 개선의 시기
성능 개선은 성능 감소를 발견했을 때 시작합니다.
과도한 메모이제이션은 지양합니다.
너무 이른 시기에 최적화하지 않아야 합니다.
성능 개선의 여정
큰 컴포넌트를 작은 컴포넌트로 리팩터링합니다.
React.memo를 사용하고 원시타입 프로퍼티를 활용합니다.
jsx의 const 변수를 컴포넌트로 변환합니다.
React Devtool의 프로파일링을 통해 성능 감소 원인을 찾습니다.