# React Scan - React 앱을 스캔하여 성능 문제를 자동으로 찾아주는 도구

> Clean Markdown view of GeekNews topic #17931. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17931](https://news.hada.io/topic?id=17931)
- GeekNews Markdown: [https://news.hada.io/topic/17931.md](https://news.hada.io/topic/17931.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-11-25T09:41:05+09:00
- Updated: 2024-11-25T09:41:05+09:00
- Original source: [react-scan.million.dev](https://react-scan.million.dev/)
- Points: 28
- Comments: 3

## Summary

React Scan은 코드 변경 없이 성능 문제를 자동으로 감지하고 강조 표시하여 어떤 구성 요소를 수정해야 하는지 보여주는 도구입니다. React Devtools와 달리 프로그래밍 가능한 API를 제공하며, 모든 플랫폼에서 사용 가능하여 개발자 경험을 최적화합니다. 이 도구는 불필요한 렌더를 명확히 식별하고 성능 디버깅을 자동화할 수 있는 기능을 갖추고 있습니다.

## Topic Body

- 기존 도구(`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를 넘어서는 가능성을 제공.

## Comments



### Comment 31683

- Author: plenty
- Created: 2024-11-25T15:03:56+09:00
- Points: 1

보기 쉬워서 좋습니다.

### Comment 31669

- Author: carnoxen
- Created: 2024-11-25T13:05:51+09:00
- Points: 1

[매우 적절한 사용례](https://x.com/aidenybai/status/1859267710498263073)

### Comment 31663

- Author: kandk
- Created: 2024-11-25T10:24:58+09:00
- Points: 1

데모가 작은앱이라 그런지 몰라도, 반응속도가 빠르네요.