React Developer Tools

React Developer Tools๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฒ€์‚ฌํ•˜๊ณ  props์™€ state๋ฅผ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

You will learn

  • React Developer Tools ์„ค์น˜ ๋ฐฉ๋ฒ•

๋ธŒ๋ผ์šฐ์ € ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ

React๋กœ ๋นŒ๋“œ๋œ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋””๋ฒ„๊น…ํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•์€ React Developer Tools ๋ธŒ๋ผ์šฐ์ € ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด React๋กœ ๊ตฌ์ถ•๋œ ์‚ฌ์ดํŠธ์— ๋ฐฉ๋ฌธํ•˜๋ฉด Components and Profiler ํŒจ๋„์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

React Developer Tools extension

Safari ๋ฐ ๊ธฐํƒ€ ๋ธŒ๋ผ์šฐ์ €

๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €(์˜ˆ: Safari)์˜ ๊ฒฝ์šฐ, react-devtools๋ฅผ npm package๋กœ ์„ค์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

๋‹ค์Œ์œผ๋กœ ํ„ฐ๋ฏธ๋„์—์„œ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ฝ๋‹ˆ๋‹ค.

react-devtools

๋‹ค์Œ์œผ๋กœ ๋‹น์‹ ์˜ ์›น ์‚ฌ์ดํŠธ์˜ <head>์˜ <script> ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์›น ์‚ฌ์ดํŠธ๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

<html>
<head>
<script src="http://localhost:8097"></script>

๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React Developer Tools standalone

๋ชจ๋ฐ”์ผ (React Native)

React Developer Tools๋Š” React Native๋กœ ๋งŒ๋“ค์–ด์ง„ ์•ฑ์—์„œ๋„ ์ž˜ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

React Developer Tools๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•์€ ์ „์—ญ์ ์œผ๋กœ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

๋‹ค์Œ์œผ๋กœ ํ„ฐ๋ฏธ๋„์—์„œ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ฌ์‹ญ์‹œ์˜ค.

react-devtools

์‹คํ–‰ ์ค‘์ธ ๋กœ์ปฌ React Native ์•ฑ์— ์—ฐ๊ฒฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž ๋„๊ตฌ๊ฐ€ ๋ช‡ ์ดˆ ํ›„์— ์—ฐ๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฉด ์•ฑ์„ ๋‹ค์‹œ ๋กœ๋“œํ•ด ๋ณด์‹ญ์‹œ์˜ค.

React Native ๋””๋ฒ„๊น…์— ๋Œ€ํ•˜์—ฌ ๋” ์•Œ์•„๋ณด๊ธฐ