{"id":767,"date":"2026-05-18T23:00:40","date_gmt":"2026-05-18T15:00:40","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-usestate-6\/"},"modified":"2026-05-19T20:26:14","modified_gmt":"2026-05-19T12:26:14","slug":"react-usestate-6","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-usestate-6\/","title":{"rendered":"React useState \u2014 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0c1\ud0dc \ubc15\uae30 (Ch.6)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 743 -->\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.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\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 \uae30\ucd08 6\ud3b8<\/span>\n  <h1>React useState \u2014 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc0c1\ud0dc \ubc15\uae30<\/h1>\n  <p>\ucc98\uc74c \ub9cc\ub098\ub294 Hook. \ud074\ub9ad\ud558\uba74 +1 \ub418\ub294 \uce74\uc6b4\ud130\ubd80\ud130 \uac1d\uccb4\/\ubc30\uc5f4 state \ud568\uc815\uae4c\uc9c0.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-26.jpg\" alt=\"UI \uce74\uc6b4\ud130 \ubc30\uc9c0\uc640 \uc0c1\ud0dc \uc140\uc774 \ud654\uc0b4\ud45c\ub85c \uc5f0\uacb0\ub41c \uc77c\ub7ec\uc2a4\ud2b8 \u2014 useState \ubc18\uc751\uc131 \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>5\ud3b8\uae4c\uc9c0\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubd80\ubaa8\uac00 \uc900 props \ub9cc \ubcf4\uc5ec\uc92c\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud074\ub9ad\u00b7\uc785\ub825\ud574\ub3c4 \ud654\uba74\uc774 \uc548 \ubc14\ub01c. <strong>useState<\/strong> \uac00 \uadf8 \ubcbd\uc744 \uae68\ub294 \uccab \ub3c4\uad6c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 6\ud3b8\uc740 useState \uc758 \uae30\ubcf8 + \ud55c\uad6d \uac1c\ubc1c\uc790\uac00 \uac00\uc7a5 \ub9ce\uc774 \ud5e4\ub9e4\ub294 \ub450 \ud568\uc815 (setter \ube44\ub3d9\uae30\uc131\u00b7\uac1d\uccb4\/\ubc30\uc5f4 \uc5c5\ub370\uc774\ud2b8) + \ud568\uc218\ud615 \uc5c5\ub370\uc774\ud2b8 \ud328\ud134\uae4c\uc9c0. 7\ud3b8 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1\uacfc \ud569\uce58\uba74 \uc778\ud130\ub799\ud2f0\ube0c UI \uac00 \uc644\uc131\ub41c\ub2e4.<\/p>\n\n<h2>1. \uccab Hook \u2014 \uce74\uc6b4\ud130 5\uc904<\/h2>\n\n<p>\uac00\uc7a5 \ub2e8\uc21c\ud55c useState \uc608. \ubc84\ud2bc \ud074\ub9ad\ud558\uba74 \uc22b\uc790 +1.<\/p>\n\n<div class=\"code-block\">import { useState } from &#8216;react&#8217;;\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n      \uce74\uc6b4\ud2b8: {count}\n    &lt;\/button&gt;\n  );\n}<\/div>\n\n<p>\ud55c \uc904\uc529 \u2014 <code>useState(0)<\/code> \ucd08\uae30\uac12 0 \uc73c\ub85c state \ub9cc\ub4e4\uae30. \ubc18\ud658\uc740 <strong>\ubc30\uc5f4 [\ud604\uc7ac\uac12, setter \ud568\uc218]<\/strong>. \uad6c\uc870\ubd84\ud574\ub85c \ubc1b\uc544 \uc0ac\uc6a9. setter \ud638\ucd9c\ud558\uba74 React \uac00 state \uac31\uc2e0 + \ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc7ac\ub80c\ub354. \uc0c8 \uac12\uc73c\ub85c \ub2e4\uc2dc \ud568\uc218 \uc2e4\ud589\ub418\uc5b4 <code>count<\/code> \uac00 \uc0c8 \uc22b\uc790.<\/p>\n\n<div class=\"databox\">\n<strong>\uc65c \ubc30\uc5f4 \ubc18\ud658\uc778\uac00<\/strong> \u2014 \uac1d\uccb4\uc600\uc73c\uba74 \ub9e4\ubc88 <code>const counter = useState(0); counter.value<\/code> \uc2dd\uc778\ub370 \uae38\ub2e4. \ubc30\uc5f4\uc774\ub77c \uad6c\uc870\ubd84\ud574\ub85c \uc774\ub984\uc744 \uc790\uc720\ub86d\uac8c \uc9c0\uc744 \uc218 \uc788\ub2e4 (<code>const [count, setCount]<\/code> \ub610\ub294 <code>const [name, setName]<\/code>). \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 useState \uc5ec\ub7ec \uac1c \ubc15\uc744 \ub54c \uc774\ub984 \ucda9\ub3cc \uc5c6\uc74c.\n<\/div>\n\n<h2>2. setter \ub294 \ube44\ub3d9\uae30 \u2014 \ud638\ucd9c \uc9c1\ud6c4 \uac12 \uc548 \ubc14\ub01c<\/h2>\n\n<p>\ud55c\uad6d \uac1c\ubc1c\uc790\uac00 \uac00\uc7a5 \uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38 \u2014 &#8220;setState \ud55c \ub2e4\uc74c \uc904\uc5d0\uc11c console.log \ud558\uba74 \uc65c \uc61b \uac12\uc774 \ub098\uc624\ub098\uc694?&#8221;<\/p>\n\n<div class=\"code-block\">function Counter() {\n  const [count, setCount] = useState(0);\n\n  const handleClick = () =&gt; {\n    setCount(count + 1);\n    console.log(count); \/\/ \u274c \uc5ec\uc804\ud788 0 (\ub2e4\uc74c \ub80c\ub354\uc5d0\uc11c\uc57c 1)\n  };\n\n  return &lt;button onClick={handleClick}&gt;\ud074\ub9ad: {count}&lt;\/button&gt;;\n}<\/div>\n\n<p>\uc774\uc720 \u2014 React \uc758 state \ub294 <strong>\ub2e4\uc74c \ub80c\ub354 \uc0ac\uc774\ud074\uc5d0\uc11c \uac31\uc2e0<\/strong>. setter \ub294 &#8220;\ub2e4\uc74c \ub80c\ub354 \ub54c \uc774 \uac12\uc73c\ub85c \ud574\uc918&#8221; \ub77c\ub294 \uc608\uc57d\uc77c \ubfd0, \ud604\uc7ac \ud568\uc218 \uc2e4\ud589 \uc911\uc5d0\ub294 <code>count<\/code> \ubcc0\uc218\uac00 \uc61b \uac12 \uadf8\ub300\ub85c. JavaScript \ud074\ub85c\uc800\uc758 \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \uacb0\uacfc.<\/p>\n\n<p>\uc0c8 \uac12\uc774 \ud544\uc694\ud558\uba74 <strong>setter \uc5d0 \ub118\uae34 \uac12\uc744 \ubcc0\uc218\ub85c<\/strong>:<\/p>\n\n<div class=\"code-block\">const newCount = count + 1;\nsetCount(newCount);\nconsole.log(newCount); \/\/ \u2705 1<\/div>\n\n<h2>3. \uac19\uc740 setter \ub450 \ubc88 \u2192 \ub9c8\uc9c0\ub9c9\ub9cc \uc801\uc6a9? \uc544\ub2c8\ub2e4<\/h2>\n\n<p>\ube44\ub3d9\uae30\uc131\uc758 \ub450 \ubc88\uc9f8 \uc5bc\uad74 \u2014 <strong>\ud55c \ud578\ub4e4\ub7ec \uc548\uc5d0\uc11c setter \ub450 \ubc88 \ud638\ucd9c\ud558\uba74 \ub450 \ubc88 \ub2e4 \uc61b \uac12 \uae30\uc900<\/strong>.<\/p>\n\n<div class=\"code-block\">const handleClick = () =&gt; {\n  setCount(count + 1);  \/\/ count=0 \u2192 1 \uc608\uc57d\n  setCount(count + 1);  \/\/ count=0 \u2192 1 \uc608\uc57d (\ub610!)\n  \/\/ \uacb0\uacfc: count=1 (2 \uac00 \uc544\ub2c8\ub2e4)\n};<\/div>\n\n<p>\ud574\uacb0\ucc45 \u2014 <strong>\ud568\uc218\ud615 \uc5c5\ub370\uc774\ud2b8<\/strong>. setter \uc5d0 \uac12 \ub300\uc2e0 &#8220;\uc61b \uac12\uc744 \ubc1b\uc544 \uc0c8 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218&#8221; \uc804\ub2ec:<\/p>\n\n<div class=\"code-block\">const handleClick = () =&gt; {\n  setCount(prev =&gt; prev + 1);  \/\/ prev=0 \u2192 1 \uc608\uc57d\n  setCount(prev =&gt; prev + 1);  \/\/ prev=1 (\uc9c1\uc804 \uc608\uc57d \uacb0\uacfc) \u2192 2\n  \/\/ \uacb0\uacfc: count=2 \u2705\n};<\/div>\n\n<p>&#8220;\uac19\uc740 state \ub97c \uc5ec\ub7ec \ubc88 \uc5c5\ub370\uc774\ud2b8&#8221; \uac00 \ud544\uc694\ud558\uba74 <strong>\ubb34\uc870\uac74 \ud568\uc218\ud615<\/strong>. \uce74\uc6b4\ud130 \uc678\uc5d0\ub3c4 \ud1a0\uae00 (<code>setOn(prev =&gt; !prev)<\/code>) \u00b7 \ub204\uc801 \uc791\uc5c5 (<code>setLog(prev =&gt; [...prev, newItem])<\/code>) \ubaa8\ub450 \uac19\uc740 \ud328\ud134.<\/p>\n\n<h2>4. \uac1d\uccb4\u00b7\ubc30\uc5f4 state \uc758 \ud568\uc815 \u2014 \ud56d\uc0c1 \uc0c8 \ucc38\uc870<\/h2>\n\n<p>state \uac00 \uac1d\uccb4\/\ubc30\uc5f4\uc774\uba74 \ud55c \uac00\uc9c0 \uaddc\uce59 \u2014 <strong>\uc808\ub300 \uc9c1\uc811 \uc218\uc815\ud558\uc9c0 \ub9d0 \uac83<\/strong>.<\/p>\n\n<div class=\"code-block\">const [user, setUser] = useState({ name: &#8216;\ubc15\uc900\uc131&#8217;, age: 42 });\n\n\/\/ \u274c \uc9c1\uc811 \uc218\uc815 (React \uac00 \uac10\uc9c0 \ubabb \ud568)\nuser.age = 43;\nsetUser(user);\n\n\/\/ \u2705 \uc0c8 \uac1d\uccb4 \ub9cc\ub4e4\uc5b4 \uc804\ub2ec (spread \ud328\ud134)\nsetUser({ &#8230;user, age: 43 });\n\n\/\/ \u2705 \ud568\uc218\ud615 + spread\nsetUser(prev =&gt; ({ &#8230;prev, age: prev.age + 1 }));<\/div>\n\n<p>\uc774\uc720 \u2014 React \ub294 state \uac00 \ubc14\ub00c\uc5c8\ub294\uc9c0 \ud310\ub2e8\ud560 \ub54c <strong>\ucc38\uc870 \ube44\uad50<\/strong> (<code>oldState === newState<\/code>) \ub9cc \ud55c\ub2e4. \uac19\uc740 \uac1d\uccb4\ub97c \uc218\uc815\ud574 \ub2e4\uc2dc \ub123\uc73c\uba74 \ucc38\uc870\uac00 \uac19\uc544\uc11c &#8220;\uc548 \ubc14\ub01c&#8221; \ud310\ub2e8 \u2192 \uc7ac\ub80c\ub354 \uc2a4\ud0b5.<\/p>\n\n<div class=\"warnbox\">\n<strong>\ubc30\uc5f4\ub3c4 \uac19\uc740 \uaddc\uce59<\/strong> \u2014 <code>arr.push(item)<\/code> \uae08\uc9c0. <code>setArr([...arr, item])<\/code> \ub610\ub294 <code>setArr(prev =&gt; [...prev, item])<\/code>. \uae4a\uc740 \uc911\ucca9 \uac1d\uccb4\uba74 <code>structuredClone<\/code> \ub610\ub294 Immer \ub77c\uc774\ube0c\ub7ec\ub9ac (\ud68c\uc0ac \ucf54\ub4dc\ubca0\uc774\uc2a4 \ud45c\uc900\uc774\uba74). 9\ud3b8 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uc5d0\uc11c \ub2e4\uc2dc \ub4f1\uc7a5.\n<\/div>\n\n<p>useState \uac00 \uc190\uc5d0 \uc7a1\ud788\uba74 React \uc758 \uc808\ubc18\uc740 \ub05d\ub09c \uc148. 7\ud3b8\uc5d0\uc11c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1 \ud328\ud134 (onChange\u00b7onSubmit\u00b7\ud569\uc131 \uc774\ubca4\ud2b8), 8\u00b79\ud3b8 \uc870\uac74\ubd80\u00b7\ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uae4c\uc9c0 \ud569\uce58\uba74 \uc2e4\uc804 \ud3fc \ucef4\ud3ec\ub10c\ud2b8 \uc791\uc131 \uc900\ube44 \uc644\ub8cc.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00<\/h3>\n<p>React \uad50\uc7ac 7\ud3b8 \u2014 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub9c1 \ud328\ud134. onClick\u00b7onChange\u00b7onSubmit, \ud569\uc131 \uc774\ubca4\ud2b8, preventDefault, \uc778\uc790 \uc804\ub2ec.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-jsx-syntax-4\/\">4\ud3b8 JSX<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-props-5\/\">5\ud3b8 Props<\/a> \u00b7\n<strong>6\ud3b8 useState<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>useState \uccab Hook \u2014 setter \ube44\ub3d9\uae30\u00b7\uac1d\uccb4\/\ubc30\uc5f4 \ud568\uc815\u00b7\ud568\uc218\ud615 \uc5c5\ub370\uc774\ud2b8. React \uad50\uc7ac 6\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-767","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\/767","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=767"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":795,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions\/795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/743"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}