AI Briefing실시간 컴포넌트 검사
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'로 개발 환경에만 켜는 구성이 권장된다.
이 한국어 요약은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.