개발자 도구를 활용한 react 렌더링 성능 개선(performance & profiler)
안녕하세요. 이그나이트 FE1팀 한준호입니다. 오늘은 크롬 개발자 도구를 활용해 react 기반 웹 서비스에서 실제로 발생한 입력 지연 문제를 분석하고 개선한 경험을 공유해보려 합니다. 문제를 어떻게 정의했고, 어떤 도구로 추적했으며, 어떤 방식으로 개선했는지. 그리고 개선 전후의 수치와 체감 변화는 어땠는지 정리해 보았습니다. 🧩 "입력이 느려요" 새로운 프로젝트의 어드민 서비스를 개발하던 중, 예상치 못한 문제가 발생했습니다. react-hook-form 을 활용한 복잡한 화면에서 input 필드에 값을 입력할 때마다 프레임 드랍이 발생한 것이었습니다. 처음엔 큰 문제가 아니라고 생각했지만, 입력이 끊기듯 반응하면서 사용자에게 눈에 띄는 불편함을 주는 수준으로 나타났고, 그때부터 본격적인 분석을 시작했습니다. 아래 영상에서는 입력 시 텍스트가 끊겨 보이거나, 반응 속도가 늦어지는 현상을 확인할 수 있습니다. 🔍 React DevTools – Highlight 해당 어드민은 react 기반으로 개발되었습니다. 먼저, 입력 시 어떤 컴포넌트가 리렌더링되는지 확인하기 위해 React Developer Tools의 highlight 리렌더링 기능을 활성화해 보았습니다. 예상대로, 특정 input 필드에 값을 입력하면 화면 전체에서 대량의 리렌더링이 발생하는 것이 시각적으로 확인되었습니다. highlight 기능을 통해 리렌더링이 다수 발생하는 것은 인지했으니, 이 리렌더링이 정말 성능 저하의 원인인지 파악할 필요가 있습니다. 성능 저하는 layout shift, heap memory 증가로 인한 GC 부하 등 다양한 요인으로 발생하기 때문입니다. react는 화면을 최신 상태로 유지하기 위해 리렌더링을 의도적으로 수행합니다. state나 props가 변경되면 해당 컴포넌트를 다시 렌더링하는 구조는 react의 핵심 동작 원리입니다. 또한, 최신 react는 fiber reconciliation을 통해 렌더링 성능을 최적화합니다. 불필요한 DOM 변경은 건너뛰고, 실제로 변경이 필요한 부분만 선별적으로 갱신되도록 설계되어 있습니다. 따라서 리렌더링 자체는 문제가 아닙니다. 하지만 그 리렌더링이 과도하거나, 필요 이상의 컴포넌트까지 확산되면서 브라우저 성능에 부담을 준다면, 그건 문제의 원인이 될 수 있습니다.
- 한준호한

8