title: React 개발자 도구
React 개발자 도구를 사용하면 React 컴포넌트를 검사하고, props와 state를 수정하고, 성능 문제를 찾아낼 수 있어요.
- React 개발자 도구를 설치하는 방법
브라우저 확장 프로그램 {/browser-extension/}
React로 만들어진 웹사이트를 디버깅하는 가장 쉬운 방법은 React 개발자 도구 브라우저 확장 프로그램을 설치하는 거예요. 여러 인기 있는 브라우저에서 사용할 수 있답니다:
이제 React로 만들어진 웹사이트를 방문하면, Components 패널과 Profiler 패널을 볼 수 있을 거예요.
Safari 및 다른 브라우저들 {/safari-and-other-browsers/}
다른 브라우저들(예를 들어, Safari)의 경우에는 react-devtools npm 패키지를 설치하면 돼요:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools그 다음에 터미널에서 개발자 도구를 열어주세요:
react-devtools그런 다음 웹사이트의 <head> 시작 부분에 다음 <script> 태그를 추가해서 웹사이트를 연결하세요:
<!-- html -->
<html>
<head>
<script src="http://localhost:8097"></script>이제 브라우저에서 웹사이트를 새로고침하면 개발자 도구에서 확인할 수 있어요.
모바일 (React Native) {/mobile-react-native/}
React Native로 만든 앱을 검사하려면, React Native DevTools를 사용할 수 있어요. 이건 React 개발자 도구가 깊이 통합된 내장 디버거예요. 네이티브 요소 하이라이팅과 선택 기능을 포함해서 모든 기능이 브라우저 확장 프로그램과 동일하게 작동한답니다.
React Native에서 디버깅하는 방법에 대해 더 알아보세요.
0.76 이전 버전의 React Native를 사용하는 경우에는, 위의 Safari 및 다른 브라우저들 가이드를 따라서 React DevTools의 독립 실행형 버전을 사용해주세요.
사이트맵
프론트에_가까운_풀스택_개발자