aidenybai/react-scan

어떤 프로젝트인가요?

핵심 기능

• 01페이지에서 불필요하게 리렌더링되는 컴포넌트를 강조 표시
• 02스크립트 태그로 추가하면 코드 변경이 필요 없음
• 03렌더링을 살펴볼 수 있는 페이지 내 툴바 제공
• 04프로그래밍 방식으로 제어할 수 있는 scan, useScan, setOptions API 제공
• 05onRender를 사용해 특정 컴포넌트의 렌더링을 감지
• 06브라우저 확장 프로그램과 프레임워크 설정 가이드 제공

활용 사례

• 느린 React 싱글 페이지 앱에서 불필요한 리렌더링 찾기
• 개발 중 상태가 바뀐 뒤 어떤 컴포넌트가 리렌더링되는지 확인
• Next.js 또는 Remix 프로젝트에서 불필요한 렌더링 작업 점검
• onRender 훅으로 단일 컴포넌트의 렌더링 추적

빠른 시작

1. 1

   init 명령을 실행해 프레임워크를 자동 감지하고 React Scan을 설정합니다

   npx -y react-scan@latest init
2. 2

   또는 npm으로 패키지를 직접 설치합니다

   npm install -D react-scan
3. 3

   앱에 script 태그를 추가합니다(예: index.html에서 다른 스크립트보다 앞에 추가)

사용 전 알아둘 점

• !README에서는 후속 프로젝트로 React Doctor를 권장하므로 React Scan 개발이 예전만큼 활발하지 않을 수 있습니다.
• !수동 설정에는 script 태그나 프레임워크별 코드를 추가해야 하며, 스크립트는 unpkg.com에서 로드됩니다.

토픽

자주 묻는 질문

react-scan은(는) 무엇인가요?

코드를 바꾸지 않아도 불필요한 리렌더링을 일으키는 컴포넌트를 자동으로 찾아 강조 표시하는 React 성능 도구입니다. React Scan은 렌더링을 감지하고 불필요하게 다시 렌더링되는 컴포넌트를 강조 표시해 React 애플리케이션의 성능 문제를 찾아냅니다. 스크립트 태그 하나를 추가하거나 npm 패키지를 설치하면 되므로 애플리케이션 코드를 수정하지 않아도 사용할 수 있습니다.

react-scan은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-scan은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-scan은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. react-scan의 마지막 커밋은 2026년 8월 16일입니다.

react-scan은(는) 어디에 사용할 수 있나요?

느린 React 싱글 페이지 앱에서 불필요한 리렌더링 찾기 개발 중 상태가 바뀐 뒤 어떤 컴포넌트가 리렌더링되는지 확인 Next.js 또는 Remix 프로젝트에서 불필요한 렌더링 작업 점검 onRender 훅으로 단일 컴포넌트의 렌더링 추적

react-scan는 어떻게 설치하나요?

init 명령을 실행해 프레임워크를 자동 감지하고 React Scan을 설정합니다: npx -y react-scan@latest init 또는 npm으로 패키지를 직접 설치합니다: npm install -D react-scan 앱에 script 태그를 추가합니다(예: index.html에서 다른 스크립트보다 앞에 추가)

react-scan은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/aidenybai/react-scan