렌더링 성능 시각화 도구 react-scan에 대해서 - Antd와 Radix의 렌더링 성능 비교

React는 리렌더링 최적화를 위해

,

,

등의 함수를 제공하고 있다. 또한 React 19에서는 불필요한 메모이제이션을 최적화하고, 개발자에게 의존할 수밖에 없는 수동 최적화 문제를 해소하고, 코드의 복잡도를 줄이기 위해 React Compiler도 출시했다. 하지만 React Compiler가 모든 성능 이슈를 해결해 주지는 않으며 여전히 복잡한 애플리케이션일수록 최적화가 필요하다.

그동안 컴포넌트 리렌더링을 어떻게 인지하고 분석하여 최적화 할 지에 대한 여러 시도들이 있었고, 그 중 새로운 충격을 선사해준 react-scan에 대해서 간략히 알아보자.

은 컴포넌트의 리렌더링을 분석하고 시각적으로 표현해주는 도구다. 화면 상에서 리렌더링이 발생한 컴포넌트를 시각적으로 강조하고, 몇 번이나 변경되었는지, 어떤 props를 가지고 있는 지 등을 더 직관적으로 파악할 수 있다.

React에서 제공해주는 렌더링 성능을 측정할 수 있는

컴포넌트나 크롬에서 React 디버깅을 지원해주는

보다도 훨씬 더 명확하게 렌더링 성능 최적화가 필요한 지점을 식별할 수 있다.

👉

이 라이브러리를 개발한

는 이전에도 VSCode에서 성능을 확인해볼 수 있는

이라는 도구를 개발한 사람으로, IDE를 넘어 화면에서 리렌더링 성능을 측정할 수 있는 도구를 만들어냈다. 그의 GitHub 소개에 적혀있는

에서 진심이 느껴진다.

NPM

패키지를 설치한 후 프로젝트를 실행할 때

스크립트를 추가하여 실행하면 된다. 이후 위젯을 통해 on/off를 제어할 수 있다.

크롬 웹 스토어에 등록되어 있는

을 설치하면 일반 웹 사이트에서도 react-scan 위젯을 실행하여 리렌더링 성능을 측정해볼 수 있다.

단,

가 설치되어 있어야 사용할 수 있으며

가 react-scan 라이브러리를 래핑하여 개발한 것으로 2025년 1월 28일 1.0 버전이 출시 된 것으로 보인다.

그렇다면 크롬 플러그인을 활용해 실제 서비스 중인

과

의 페이지에서 렌더링 성능을 비교해보았다.

react-scan을 활성화하면 실제 리렌더링 되는 컴포넌트에 하이라이팅이 되는데, 마우스를 대충만 훑어도 매우 깜빡거리는 것을 볼 수 있다.

Ant Design 보다 확연히 렌더링 횟수가 적은 것을 확인할 수 있다.

번외로 내 블로그에도 적용해보니 스크롤 할 때마다 상단 로고가 리렌더링 되는 모습이 확인되었는데, 이처럼 react-scan을 활용하면 사이트를 이용하는 것만으로 최적화가 필요한 부분을 확인할 수 있어 매우 유용하다.

웹 사이트의 성능을 측정할 때 Core Web Vital을 활용하기도 하지만, 유저가 어플리케이션을 사용하며 발생하는 불필요한 리렌더링을 탐지하여 실제 개선 지점을 명확히 찾아낼 수 있다. 도입에 드는 비용도 굉장히 저렴한만큼 리렌더링 최적화가 고려되어야 하는 어플리케이션을 개발한다면 react-scan 도입을 적극적으로 검토해보면 좋겠다.

추가적으로 외부 컴포넌트 라이브러리나 디자인 시스템 등을 이용할 때도 react-scan 플러그인을 통해 성능 최적화가 얼마나 고려되어있는 지를 어느 정도 확인할 수 있어 선택에 도움을 줄 수 있을 것이다.

힐링페이퍼의 KOS팀에서 일하면서 동료분이 찾아서 적용해주신 라이브러리로, 리렌더링 성능 최적화에 민감하게 대응하며 일하는 과정에서 많은 도움을 받고 있다. 최근에도 한 컴포넌트가 특정 조건에서 무한 렌더링 되는 이슈를 react-scan 덕분에 발견하여 수정할 수 있었다.