{"id":925,"date":"2025-06-17T21:23:20","date_gmt":"2025-06-17T12:23:20","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=925"},"modified":"2025-06-24T00:16:15","modified_gmt":"2025-06-23T15:16:15","slug":"%f0%9f%a7%a0-%eb%a6%ac%ec%95%a1%ed%8a%b8-%ec%83%81%ed%83%9cstate%eb%9e%80-usestate%eb%a1%9c-%eb%b2%84%ed%8a%bc-%ed%81%b4%eb%a6%ad-%ec%88%98-%ec%84%b8%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=925","title":{"rendered":"[React]  \ub9ac\uc561\ud2b8 \uc0c1\ud0dc(state)\ub780? \u2013 useState\ub85c \ubc84\ud2bc \ud074\ub9ad \uc218 \uc138\uae30"},"content":{"rendered":"\n<p>\ub9ac\uc561\ud2b8\uc5d0\uc11c <strong>UI\ub97c \ubc14\uafb8\ub294 \ud575\uc2ec \uc6d0\ub9ac<\/strong>\ub294 \ubc14\ub85c &#8220;\uc0c1\ud0dc(state)&#8221;\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<br>\uc624\ub298\uc740 <strong>useState \ud6c5(Hook)<\/strong>\uc744 \uc774\uc6a9\ud574 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc22b\uc790\uac00 \uc62c\ub77c\uac00\ub294 \uc544\uc8fc \uae30\ubcf8\uc801\uc778 \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4\ubcfc \uac70\uc608\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. \ud83c\udfaf \uc0c1\ud0dc(state)\ub294 \ubb34\uc5c7\uc778\uac00\uc694?<\/h3>\n\n\n\n<p>\uc0c1\ud0dc\ub780 <strong>\ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0\uc11c \ubc14\ub00c\ub294 \uac12<\/strong>\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc22b\uc790\uac00 \uc62c\ub77c\uac04\ub2e4\uba74, \uc774 \uc22b\uc790\uac00 \ubc14\ub85c \uc0c1\ud0dc\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 <code>useState<\/code>\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c \uc0c1\ud0dc\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. \ud83d\udd27 useState \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n\n\n\n<p><code>useState<\/code>\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook \uc911 \ud558\ub098\ub85c, \uc774\ub807\uac8c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\uc9c0\uae08\uae4c\uc9c0 {count}\ubc88 \ud074\ub9ad\ud588\uc5b4\uc694!&lt;\/p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n        \ud074\ub9ad!\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>\u2705 \uc124\uba85:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useState(0)<\/code>: <strong>\ucd08\uae43\uac12 0<\/strong>\uc73c\ub85c \uc0c1\ud0dc(count)\ub97c \ub9cc\ub4e4\uc5b4\uc694<\/li>\n\n\n\n<li><code>setCount<\/code>: \uc0c1\ud0dc\ub97c \ubc14\uafb8\ub294 \ud568\uc218\uc785\ub2c8\ub2e4<\/li>\n\n\n\n<li><code>onClick<\/code> \uc774\ubca4\ud2b8\ub85c \ud074\ub9ad\ud560 \ub54c <code>setCount<\/code>\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f \uc0c1\ud0dc \ubcc0\uacbd \ud750\ub984 \uadf8\ub9bc<\/h3>\n\n\n\n<p>\uc544\ub798 \uadf8\ub9bc\uc740 \ubc84\ud2bc\uc744 \ub204\ub97c \ub54c\ub9c8\ub2e4 \uc0c1\ud0dc\uac00 \uc5b4\ub5bb\uac8c \ubc14\ub00c\ub294\uc9c0\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1-1024x683.png\" alt=\"\" class=\"wp-image-926\" srcset=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1-1024x683.png 1024w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1-300x200.png 300w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1-768x512.png 768w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1-624x416.png 624w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-1.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 \uac12\uc73c\ub85c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\uc5b4 \uc22b\uc790\uac00 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. \u2705 \uc815\ub9ac<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useState<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud0dc\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4<\/li>\n\n\n\n<li>\uc0c1\ud0dc\uac00 \ubc14\ub00c\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub294 <strong>\uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \uadf8\ub824\uc9c4\ub2e4<\/strong><\/li>\n\n\n\n<li><code>set\ud568\uc218<\/code>\ub97c \ud638\ucd9c\ud574\uc57c\ub9cc \uc0c1\ud0dc\uac00 \ubc14\ub010\ub2e4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udca1 \uc9c1\uc811 \uc2e4\uc2b5\ud574\ubcf4\uae30<\/h3>\n\n\n\n<p>\uc544\ub798 \ucf54\ub4dc\ub97c <code>App.jsx<\/code> \uc548\uc5d0 \ubd99\uc5ec\uc11c \uc9c1\uc811 \uc2e4\uc2b5\ud574\ubcf4\uc138\uc694!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { useState } from 'react';\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;div style={{ textAlign: 'center', marginTop: '50px' }}&gt;\n      &lt;h1&gt;\ud074\ub9ad \uc218: {count}&lt;\/h1&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\ub204\ub974\uae30&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8\uc5d0\uc11c UI\ub97c \ubc14\uafb8\ub294 \ud575\uc2ec \uc6d0\ub9ac\ub294 \ubc14\ub85c &#8220;\uc0c1\ud0dc(state)&#8221;\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.\uc624\ub298\uc740 useState \ud6c5(Hook)\uc744 \uc774\uc6a9\ud574 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc22b\uc790\uac00 \uc62c\ub77c\uac00\ub294 \uc544\uc8fc \uae30\ubcf8\uc801\uc778 \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4\ubcfc \uac70\uc608\uc694. 1. \ud83c\udfaf \uc0c1\ud0dc(state)\ub294 \ubb34\uc5c7\uc778\uac00\uc694? \uc0c1\ud0dc\ub780 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0\uc11c \ubc14\ub00c\ub294 \uac12\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc22b\uc790\uac00 \uc62c\ub77c\uac04\ub2e4\uba74, \uc774 \uc22b\uc790\uac00 \ubc14\ub85c \uc0c1\ud0dc\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 useState\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c \uc0c1\ud0dc\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. 2. \ud83d\udd27 useState \uae30\ubcf8 \uc0ac\uc6a9\ubc95 useState\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[80],"class_list":["post-925","post","type-post","status-publish","format-standard","hentry","category-pogramming","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=925"}],"version-history":[{"count":2,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/925\/revisions"}],"predecessor-version":[{"id":954,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/925\/revisions\/954"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}