- 기존 도구(
Profiler, Why Did You Render?, React Devtools)와 달리 코드 변경이 거의 필요 없고, 단순한 비주얼 큐와 프로그래밍 가능한 API를 제공함
- 성능 문제를 일으키는 렌더링을 자동으로 감지하고 강조 표시하고, 정확히 어떤 구성 요소를 수정해야 하는지 보여줌
- 간단한 Javascript 이므로, 어디든 넣을수 있음 : Script 태그, NPM 등
React Scan이 필요한 이유
- React를 최적화하는 것은 까다로울수 있음
- 의도적으로 컴포넌트 props가 값이 아닌 참조로 비교된다는 것. 이렇게 해서 렌더링 실행 비용을 감소 시킴
- 하지만, 이렇게 하면 불필요한 렌더링이 실수로 발생하기 쉬워 앱 속도가 느려질 수 있음
- 수백명 개발자가 있는 대규모의 프로덕션 앱에서도 최적화가 어려운 경우가 많음 (GitHub, Twitter, Instagram 사례).
React Scan이 React Devtools보다 나은 점
-
React Devtools의 한계:
- 범용 도구로 설계되어 있어, 불필요한 렌더와 필요한 렌더를 명확히 구분하지 못함.
- 프로그래밍 가능한 API가 없어, 성능 디버깅의 자동화가 어려움.
-
React Devtools의 하이라이트 기능에 대한 개인적인 불만:
-
렌더링 감지 지연: React Devtools는 렌더링을 배치로 처리하여 빠르게 렌더링되는 컴포넌트는 매 초 1번만 표시.
-
박스 위치 업데이트 문제: 스크롤하거나 크기를 조정할 경우 박스 위치가 업데이트되지 않음.
-
렌더링 횟수 표시 부족: 각 컴포넌트의 렌더링 횟수를 보여주지 않음.
-
문제 렌더링 구분 어려움: 느리거나 비효율적인 렌더링을 확인하려면 직접 컴포넌트를 검사해야 함.
-
사용자 경험 부족: 메뉴가 숨겨져 있어 기능을 켜고 끄기가 번거로움. 성능 디버깅에 적합한 UI 설계가 아님.
-
프로그램 API 없음: 디버깅을 자동화하거나 고급 작업에 사용할 수 없음.
-
Chrome 확장에 국한: 웹 어디에서나 사용할 수 없고 브라우저 확장에 의존.
-
주관적 디자인 문제: 박스 선이 흐릿하고 느리게 작동하는 느낌.
-
React Scan의 차별화된 점:
- 성능 디버깅을 위해 설계된 전문 도구로, 불필요한 렌더를 명확히 식별.
- 모든 플랫폼에서 사용 가능하며(웹, 스크립트, npm), 개발자 경험을 최적화.
- Ambitious한 기능 로드맵으로, React Devtools를 넘어서는 가능성을 제공.