React 렌더링 성능 최적화 과정

안녕하세요. 이번 포스팅에서는 실무에서 겪었던 렌더링 성능 이슈와 어떠한 과정을 거쳐서 해결했는지 공유해보도록 하겠습니다.

Issue

문제가 된 이슈에 대해 간략히 설명해보겠습니다. 여러 개의 text를 선택해 tts 요청을 보내고 response가 왔을때 성공했다는 UI를 그리게 위해 state를 업데이트하는 상황입니다. 그러나 여러 개의 text를 가지고 있는 컴포넌트들의 숫자가 굉장히 많아질 경우 리렌더링이 여러번 발생하기 때문에 토스트를 띄운다거나 할때 토스트 애니메이션이 버벅이는 jank 현상이 있었습니다.

Chrome devtools performance tab

먼저 큰 그림에서 어떤 부분이 문제인지를 파악하기 위해 chrome devtools에서 performance tab을 활용했습니다.

아래 이미지에서 하단 heap 메모리 사용량을 보면 특정 시점부터 갑자기 증가하다가 뚝 떨어지는 것을 확인할 수 있습니다. 이때 예상으로는 리렌더링이 엄청나게 일어나다가 garbage collector가 작동한다고 생각했습니다.

main thread를 확인해봐도 엄청나게 많은 수의 콜스택이 있는 것을 확인할 수 있었습니다.

아래 이미지의 왼쪽 빨간 박스를 보면 click 이벤트와 dispatch가 호출되는 것을 확인할 수 있습니다. 이를 통해 리렌더링이 발생했다는 것을 알 수 있죠. 세부적으로 어떤 컴포넌트가 문제인지 파악하기 위해 react profiler devtools를 사용했습니다.