React가 너무 느릴 때 개선하는 방법

Question

안녕하세요~ 얼마전에 새로운 팀으로 이동하게 되었는데 React를 맡게되었습니다. 다만, 가끔씩 웹사이트가 너무 느리더라구요. 이걸 좀 파보고 싶은데 기존에 사용하던 크롬 개발자 도구 Performance로는 이해하기가 좀 어렵더라구요.

혹시 React를 위한 퍼포먼스 측정 도구가 있나요?
그리고 보통 React가 느린 문제를 개선할 때 접근하는 방법들이 있나요?
React를 한번도 해본적없는데 급작스럽게 맡게 되어서 급하게 올려봅니다. 감사합니다~

손정현 · Answer

react-dev-tools라는 크롬 익스텐션이 있습니다.
- https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

사용하시면 컴포넌트 리렌더링, 프로파일링 등을 할 수 있습니다 :)

React가 느린 문제를 개선하는 방법은 느린 문제 사례가 너무 다양해서 코드를 직접 봐야 알 수 있을 것 같습니다. 외부 API 요청이 문제일 수도 있습니다. 또는 렌더링을 막거나 실행이 오래 걸리는 동기적인 함수들과 무분별한 렌더링이 조합이 문제일수도 있구요. 다만 이건 다 추측일 뿐이고 하나씩 뜯어봐야 왜 느린지 알 수 있을 것 같습니다.