실시간 컴포넌트 검사
Inspect Element for React.js components
·2026.04.17 21:32
react-reinspect는 실행 중인 React 앱에서 컴포넌트와 props를 바로 수정하는 디버깅 도구다.
react-reinspect는 실행 중인 React 앱 위에서 컴포넌트 경계를 시각적으로 보여주고, 우클릭으로 style props와 props를 즉시 바꿔볼 수 있게 해준다.
- 컴포넌트 경계를 UI에 표시
- 실행 중인 화면에서 props override 지원
- 스타일을 소스 수정 없이 라이브 편집
- 인터랙션 중 rerender 추적 가능
설치는 react-reinspect 패키지를 추가한 뒤 ReinspectProvider로 앱을 감싸는 방식이며, Vite용 자동 탐색 플러그인과 Next.js(webpack 모드)용 플러그인을 제공한다.
기본값은 production-safe로 비활성화되어 있고, Vite에서는 import.meta.env.DEV, Next.js에서는 process.env.NODE_ENV !== 'production'로 개발 환경에만 켜는 구성이 권장된다.
이 요약은 원문 이해를 돕기 위한 큐레이션입니다. 저작권은 원저작자에게 있으며, 정확한 내용과 맥락은 원문을 확인하세요.
요약 오류, 출처 표기 문제, 삭제 요청은 문의 · 건의로 알려주세요.