---
title: React Developer Tools
translatedTitle: React 개발자 도구
translators: [정재남]
---
Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems.
React 개발자 도구를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고, [props](/learn/passing-props-to-a-component) 및 [state](/learn/state-a-components-memory)를 편집하고, 성능 문제를 식별할 수 있습니다.
* How to install React Developer Tools
- React 개발자 도구 설치 방법
## Browser extension브라우저 확장 프로그램 {/*browser-extension*/}
The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
React로 빌드된 웹사이트를 디버깅하는 가장 쉬운 방법은 React 개발자 도구 브라우저 확장 프로그램을 설치하는 것입니다. 여러 인기 브라우저에서 사용할 수 있습니다:
* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels.
이제 **React로 구축된** 웹사이트를 방문하면 *컴포넌트*와 *프로파일러* 패널을 볼 수 있습니다.
### Safari and other browsersSafari 및 다른 브라우저 {/*safari-and-other-browsers*/}
For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm 패키지를 설치합니다:
```bash
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
```
Next open the developer tools from the terminal:
그런 다음 터미널에서 개발자 도구를 엽니다:
```bash
react-devtools
```
Then connect your website by adding the following `
```
Reload your website in the browser now to view it in developer tools.
이제 브라우저에서 웹사이트를 새로고침하면 개발자 도구에서 볼 수 있습니다.
## Mobile (React Native) {/*mobile-react-native*/}
React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
React 개발자 도구는 [React Native](https://reactnative.dev/)로 빌드된 앱을 검사하는 데에도 사용할 수 있습니다.
The easiest way to use React Developer Tools is to install it globally:
React 개발자 도구를 사용하는 가장 쉬운 방법은 전역에 설치하는 것입니다:
```bash
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
```
Next open the developer tools from the terminal.
다음으로 터미널에서 개발자 도구를 엽니다.
```bash
react-devtools
```
It should connect to any local React Native app that's running.
실행 중인 로컬 React Native 앱에 연결해야 합니다.
> Try reloading the app if developer tools doesn't connect after a few seconds.
개발자 도구가 몇 초 후에도 연결되지 않으면 앱을 다시 로드해 보세요.
[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
[React Native 디버깅에 대해 자세히 알아보세요.](https://reactnative.dev/docs/debugging)