{"id":785,"date":"2026-05-18T23:03:12","date_gmt":"2026-05-18T15:03:12","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-devtools-25\/"},"modified":"2026-05-19T20:26:33","modified_gmt":"2026-05-19T12:26:33","slug":"react-devtools-25","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-devtools-25\/","title":{"rendered":"React DevTools + \ub9c8\uc774\uadf8\ub808\uc774\uc158 (Ch.25)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 759 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uc6b4\uc601 25\ud3b8 \u00b7 \uc2dc\ub9ac\uc988 \uc644\uacb0<\/span>\n  <h1>React DevTools + \ub9c8\uc774\uadf8\ub808\uc774\uc158<\/h1>\n  <p>\ub514\ubc84\uae45 \ub3c4\uad6c + \uc61b \ucf54\ub4dc \uc815\ub9ac \ud328\ud134 \u2014 \uc2dc\ub9ac\uc988 \ub9c8\uc9c0\ub9c9 25\ud3b8.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-42.jpg\" alt=\"\ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc704 \ub3cb\ubcf4\uae30 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 \ub514\ubc84\uae45 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>\ub9c8\uc9c0\ub9c9 \ud3b8. 1~24\ud3b8\uc73c\ub85c React \ucf54\ub4dc\ub97c \ucc98\uc74c\ubd80\ud130 production \uae4c\uc9c0 \uc9e4 \uc218 \uc788\ub2e4. \uadf8\ub7ec\ub098 \uc6b4\uc601 \uc2dc\uc791\ud558\uba74 \ub450 \uac00\uc9c0\uac00 \ub610 \ub530\ub77c\uc628\ub2e4 \u2014 <strong>\ub514\ubc84\uae45<\/strong> \uacfc <strong>\uae30\uc874 \ucf54\ub4dc \ub9c8\uc774\uadf8\ub808\uc774\uc158<\/strong>. \ub458 \ub2e4 \ub3c4\uad6c\u00b7\ud328\ud134\uc774 \uc788\uc5b4 \ud55c \ubc88 \uc775\ud788\uba74 \ud3c9\uc0dd \uc4f4\ub2e4.<\/p>\n\n<p>\uc774\ubc88 25\ud3b8\uc740 React DevTools \uc758 \ud575\uc2ec 4 \uae30\ub2a5 + 3 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud328\ud134 (Class\u2192Hooks\u00b7JS\u2192TS\u00b7CRA\u2192Vite) + \uc2dc\ub9ac\uc988 \ub9c8\ubb34\ub9ac.<\/p>\n\n<h2>1. React DevTools \u2014 \uc124\uce58 + \ud575\uc2ec 4 \uae30\ub2a5<\/h2>\n\n<p>Chrome\u00b7Firefox\u00b7Edge \ud655\uc7a5 \u2014 &#8220;React Developer Tools&#8221; \uac80\uc0c9\u00b7\uc124\uce58. \uc124\uce58\ud558\uba74 DevTools \uc5d0 <strong>Components<\/strong> \uc640 <strong>Profiler<\/strong> \ud0ed \ucd94\uac00.<\/p>\n\n<div class=\"databox\">\n<strong>4 \ud575\uc2ec \uae30\ub2a5<\/strong> \u2014 \u2460 Components \ud2b8\ub9ac: \uc5b4\ub290 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b4\ub5a4 props\u00b7state \uc778\uc9c0 \uc2e4\uc2dc\uac04. \u2461 &#8220;Highlight updates&#8221;: \uc7ac\ub80c\ub354 \ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0\uc11c \uae5c\ube61\uc784 (16\ud3b8 \uc131\ub2a5 \uc9c4\ub2e8). \u2462 Profiler \ub179\ud654: \ud55c \uc561\uc158\uc758 \ubaa8\ub4e0 \ub80c\ub354\ub97c \uce21\uc815\u00b7\uc2dc\uac01\ud654. \u2463 &#8220;useReducer&#8221; \ub2e4\uc774\uc5bc\ub85c\uadf8: action\u00b7state \ubcc0\ud654 \ucd94\uc801 (14\ud3b8).\n<\/div>\n\n<h3>\uc2e4\uc804 \u2014 Highlight updates \ub85c \ub204\uc218 \uc7a1\uae30<\/h3>\n\n<p>DevTools \ud1b1\ub2c8\ubc14\ud034 \u2192 &#8220;Highlight updates when components render&#8221; \uccb4\ud06c. \ud398\uc774\uc9c0 \uc0ac\uc6a9\ud558\ub2e4 \ubcf4\uba74 \u2014 input \ud55c \uae00\uc790 \uc785\ub825\uc5d0 \uc804\uccb4 \ud398\uc774\uc9c0\uac00 \uae5c\ube61\uc778\ub2e4? \u2192 \ubd80\ubaa8 \uc5b4\ub518\uac00\uc5d0\uc11c state \uac00 \uc704\uae4c\uc9c0 \ud758\ub7ec\uac04\ub2e4. 16\ud3b8 memo\u00b7useMemo \uac00 \ub2f5.<\/p>\n\n<h3>Profiler \ub179\ud654<\/h3>\n\n<p>Profiler \ud0ed \u2192 \ube68\uac04 \uc810 (\ub179\ud654 \uc2dc\uc791) \u2192 \ub290\ub9b0 \uc561\uc158 \uc218\ud589 \u2192 \ub2e4\uc2dc \ud074\ub9ad (\uc815\uc9c0). \ucef4\ud3ec\ub10c\ud2b8\ubcc4 \ub80c\ub354 \ud69f\uc218\u00b7\uc2dc\uac04 \uc2dc\uac01\ud654. &#8220;\uc774 \ucef4\ud3ec\ub10c\ud2b8\uac00 30\ubc88 \ub80c\ub354\ub410\ub294\ub370 1\ubc88\uc774\uba74 \ucda9\ubd84&#8221; \ud328\ud134\uc744 \uc815\ud655\ud788 \uc9da\uc5b4\uc900\ub2e4. \uce21\uc815 \uc5c6\uc774 \ucd5c\uc801\ud654\ud558\uc9c0 \ub9d0 \uac83 (16\ud3b8 \uc6d0\uce59).<\/p>\n\n<h2>2. \ub9c8\uc774\uadf8\ub808\uc774\uc158 1 \u2014 Class \u2192 Hooks<\/h2>\n\n<p>2020 \ub144 \uc774\uc804 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub77c\uba74 \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8 \uac00\ub4dd. \ubaa8\ub4e0 \ud328\ud134\uc774 \ud568\uc218\ud615\uc73c\ub85c \ub300\uc751.<\/p>\n\n<div class=\"code-block\">\/\/ Before (Class)\nclass Counter extends React.Component {\n  state = { count: 0 };\n  componentDidMount() {\n    this.timer = setInterval(() =&gt; this.tick(), 1000);\n  }\n  componentWillUnmount() {\n    clearInterval(this.timer);\n  }\n  tick = () =&gt; this.setState({ count: this.state.count + 1 });\n  render() {\n    return &lt;p&gt;{this.state.count}&lt;\/p&gt;;\n  }\n}\n\n\/\/ After (Hooks)\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  useEffect(() =&gt; {\n    const timer = setInterval(() =&gt; setCount(c =&gt; c + 1), 1000);\n    return () =&gt; clearInterval(timer);\n  }, []);\n  return &lt;p&gt;{count}&lt;\/p&gt;;\n}<\/div>\n\n<p>\ub300\uc751 \u2014 <code>this.state<\/code> \u2192 useState \u00b7 <code>componentDidMount<\/code> \u2192 useEffect(&#8230;,[]) \u00b7 <code>componentWillUnmount<\/code> \u2192 effect \uc758 cleanup return \u00b7 <code>this.props<\/code> \u2192 \ud568\uc218 \uc778\uc790. 6\ud3b8\u00b711\ud3b8 \ud328\ud134 \uadf8\ub300\ub85c.<\/p>\n\n<p>\ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc21c\uc11c \u2014 \u2460 \uc78e(leaf) \ucef4\ud3ec\ub10c\ud2b8\ubd80\ud130. \u2461 \ud55c \ubc88\uc5d0 1 \ucef4\ud3ec\ub10c\ud2b8, PR \ubd84\ub9ac. \u2462 21\ud3b8 \ud14c\uc2a4\ud2b8\ub85c \ud68c\uadc0 \uac80\uc99d. \ud070 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc77c\ub2e8 \ub450\uace0 \uc0c8 \ucf54\ub4dc\ubd80\ud130 \ud568\uc218\ud615\uc73c\ub85c \uc791\uc131.<\/p>\n\n<h2>3. \ub9c8\uc774\uadf8\ub808\uc774\uc158 2 \u2014 JavaScript \u2192 TypeScript<\/h2>\n\n<div class=\"code-block\"># 1. \uc124\uc815 \ucd94\uac00\nnpm install -D typescript @types\/react @types\/react-dom\n\n# tsconfig.json (allowJs \ud575\uc2ec \u2014 \uc810\uc9c4 \ub9c8\uc774\uadf8\ub808\uc774\uc158)\n{\n  &#8220;compilerOptions&#8221;: {\n    &#8220;allowJs&#8221;: true,\n    &#8220;checkJs&#8221;: false,\n    &#8220;strict&#8221;: false,\n    &#8230;\n  }\n}\n\n# 2. \ud30c\uc77c \ud55c \uac1c\uc529 \ubcc0\ud658\nmv Button.jsx Button.tsx\n\n# 3. \ud0c0\uc785 \ucd94\uac00 (20\ud3b8 \ud328\ud134)\ntype ButtonProps = { label: string; onClick: () =&gt; void };\nfunction Button({ label, onClick }: ButtonProps) { &#8230; }<\/div>\n\n<div class=\"warnbox\">\n<strong>\ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc21c\uc11c \uad8c\uc7a5<\/strong> \u2014 \u2460 tsconfig \ucd94\uac00, \ubaa8\ub4e0 .js \uac00 \ub3d9\uc791 \ubcf4\uc7a5. \u2461 \uc0c8 \ud30c\uc77c\ubd80\ud130 .tsx \ub85c. \u2462 \uc790\uc8fc \uc218\uc815\ud558\ub294 \ud30c\uc77c\u00b7\ud575\uc2ec \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1 \uc6b0\uc120. \u2463 <code>any<\/code> \uc784\uc2dc \ud5c8\uc6a9 (strict: false). \u2464 1\ub144 \ud6c4 strict: true \ub85c \uc810\uc9c4 \uac15\ud654. \ud55c \ubc88\uc5d0 \uc804\uccb4 \ubcc0\ud658\uc740 \ube44\ud604\uc2e4\uc801.\n<\/div>\n\n<h2>4. \ub9c8\uc774\uadf8\ub808\uc774\uc158 3 \u2014 CRA \u2192 Vite<\/h2>\n\n<p>CRA \uac00 deprecated (2\ud3b8 \ucc38\uc870) \uc774\ub77c \uae30\uc874 \ud504\ub85c\uc81d\ud2b8\uba74 Vite \uc804\ud658 \uad8c\uc7a5. \ub2e8\uc21c\ud55c SPA \uba74 1~2\uc77c.<\/p>\n\n<div class=\"code-block\"># 1. \uc0c8 \ud3f4\ub354\uc5d0 Vite \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\nnpm create vite@latest my-app-vite &#8212; &#8211;template react-ts\n\n# 2. \uc61b src\/ \ud1b5\uc9f8\ub85c \ubcf5\uc0ac\ncp -r my-app-cra\/src my-app-vite\/\n\n# 3. \ud658\uacbd\ubcc0\uc218 prefix \ubcc0\uacbd\n# REACT_APP_API_URL \u2192 VITE_API_URL\nsed -i &#8216;s\/REACT_APP_\/VITE_\/g&#8217; src\/**\/*.{ts,tsx}\n\n# 4. process.env \u2192 import.meta.env \uce58\ud658\nsed -i &#8216;s\/process\\.env\\.\/import.meta.env.\/g&#8217; src\/**\/*.{ts,tsx}\n\n# 5. public\/index.html \u2192 \ud504\ub85c\uc81d\ud2b8 root \uc758 index.html \ub85c \uc774\ub3d9\u00b7\ud1b5\ud569\n\n# 6. \uc758\uc874\uc131 \uc7ac\uc124\uce58\nnpm install\nnpm run dev   # \ub3d9\uc791 \ud655\uc778<\/div>\n\n<p>\ub300\ubd80\ubd84 \ucf00\uc774\uc2a4 \uc704 6\ub2e8\uacc4\ub85c \ub05d. <code>react-scripts<\/code>\u00b7<code>react-app-rewired<\/code>\u00b7CRA \uc804\uc6a9 \ud50c\ub7ec\uadf8\uc778\uc744 \uc4f0\ub358 \uacbd\uc6b0\ub294 \ucd94\uac00 \uc791\uc5c5 \ud544\uc694.<\/p>\n\n<h2>5. \uc2dc\ub9ac\uc988 \uc644\uacb0 \u2014 25\ud3b8 \ud68c\uace0<\/h2>\n\n<p>1\ud3b8 &#8220;React \ub780 \ubb34\uc5c7\uc778\uac00&#8221; \ubd80\ud130 \uc5ec\uae30\uae4c\uc9c0 25\ud3b8. \uc785\ubb38 5\ud3b8\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\u00b7JSX\u00b7Props, \uae30\ucd08 5\ud3b8\uc73c\ub85c state\u00b7\uc774\ubca4\ud2b8\u00b7\ub80c\ub354\ub9c1\u00b7form\u00b7effect, \uc911\uae09 5\ud3b8\uc73c\ub85c hook\u00b7context\u00b7reducer\u00b7router\u00b7\uc131\ub2a5, \uace0\uae09 6\ud3b8\uc73c\ub85c Suspense\u00b7Error\u00b7CSS\u00b7TS\u00b7\ud14c\uc2a4\ud2b8\u00b7Zod, \uc6b4\uc601 4\ud3b8\uc73c\ub85c RSC\u00b7\ubc30\ud3ec\u00b7DevTools\u00b7\ub9c8\uc774\uadf8\ub808\uc774\uc158.<\/p>\n\n<p>\uc774 25\ud3b8\uc774\uba74 React \uba74\uc811\u00b7\uc2e4\ubb34 \uc591\ucabd \ub2e4 \uc790\uc2e0 \uc788\uac8c. \ub2e4\uc74c \uc2dc\ub9ac\uc988\ub294 Next.js\u00b7Node.js\u00b7FastAPI \uc911 \ubc15\uc900\uc131\ub2d8 \uacb0\uc815.<\/p>\n\n<div class=\"cta\">\n<h3>React \uad50\uc7ac \uc2dc\ub9ac\uc988 \uc644\uacb0<\/h3>\n<p>1~25\ud3b8 \uc644\ub8cc. \ub2e4\uc74c\uc740 Next.js (React \uc704 \ud480\uc2a4\ud0dd) \ub610\ub294 Node.js (\ubc31\uc5d4\ub4dc) \uc2dc\ub9ac\uc988\ub85c \uc774\uc5b4\uc9d1\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 (\uc644\uacb0) \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-intro-1\/\">1\ud3b8 \uc785\ubb38<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-zod-rhf-22\/\">22\ud3b8 Zod+RHF<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-server-components-23\/\">23\ud3b8 RSC<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-build-deploy-24\/\">24\ud3b8 \ubc30\ud3ec<\/a> \u00b7\n<strong>25\ud3b8 DevTools+\ub9c8\uc774\uadf8\ub808\uc774\uc158<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React DevTools \ub514\ubc84\uae45 + Class\u2192Hooks, JS\u2192TS, CRA\u2192Vite \ub9c8\uc774\uadf8\ub808\uc774\uc158. \uc2dc\ub9ac\uc988 \ub9c8\uc9c0\ub9c9.<\/p>\n","protected":false},"author":1,"featured_media":759,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=785"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/785\/revisions"}],"predecessor-version":[{"id":812,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/785\/revisions\/812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/759"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}