{"id":662,"date":"2025-02-11T15:42:00","date_gmt":"2025-02-11T06:42:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=662"},"modified":"2025-02-25T19:46:26","modified_gmt":"2025-02-25T10:46:26","slug":"react-hook-usestate-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=662","title":{"rendered":"React Hook &#8211; UseState \uc774\ud574\ud558\uae30"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"941\" height=\"498\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useSatte.jpg\" alt=\"\" class=\"wp-image-665\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useSatte.jpg 941w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useSatte-300x159.jpg 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useSatte-768x406.jpg 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<p>React\uc758 useState\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 <strong>\uac00\uc7a5 \uae30\ubcf8\uc801\uc774\uace0 \uc911\uc694\ud55c <\/strong>Hook \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useState\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95, \uc608\uc81c, \uadf8\ub9ac\uace0 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c useState\uac00 \uc65c \uc911\uc694\ud55c\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>1. <code>useState<\/code>\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n<p><strong>useState<\/strong>\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook \uc911 \ud558\ub098\ub85c, \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c <strong>\uc0c1\ud0dc(state)<\/strong>\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. React\uc758 \uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130\ub098 UI\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>\uc8fc\uc694 \ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n<ol><li><strong>\uc0c1\ud0dc \uac12\uacfc \uc0c1\ud0dc \ubcc0\uacbd \ud568\uc218 \uc81c\uacf5<\/strong><br><code>useState<\/code>\ub294 \uc0c1\ud0dc \uac12\uc744 \uc800\uc7a5\ud558\ub294 \ubcc0\uc218\uc640, \uadf8 \uac12\uc744 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ucd08\uae30\uac12 \uc124\uc815 \uac00\ub2a5<\/strong><br><code>useState<\/code>\ub294 \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc73c\uba70, \uc774 \ucd08\uae30\uac12\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucc98\uc74c \ub80c\ub354\ub9c1\ub420 \ub54c \uc0c1\ud0dc\uc758 \uae30\ubcf8\uac12\uc73c\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><li><strong>\ub9ac\ub80c\ub354\ub9c1 \ud2b8\ub9ac\uac70<\/strong><br>\uc0c1\ud0dc \ubcc0\uacbd \ud568\uc218(<code>setState<\/code>)\ub97c \ud638\ucd9c\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\uc5b4 UI\uac00 \ucd5c\uc2e0 \uc0c1\ud0dc\ub97c \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<h4><strong>\uae30\ubcf8 \ubb38\ubc95<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;state, setState] = useState(initialValue);<\/code><\/pre>\n\n\n\n<ul><li><strong><code>state<\/code><\/strong>: \ud604\uc7ac \uc0c1\ud0dc \uac12\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/li><li><strong><code>setState<\/code><\/strong>: \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><li><strong><code>initialValue<\/code><\/strong>: \uc0c1\ud0dc\uc758 \ucd08\uae30\uac12\uc785\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"316\" height=\"160\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/usestate_hook.jpg\" alt=\"\" class=\"wp-image-667\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/usestate_hook.jpg 316w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/usestate_hook-300x152.jpg 300w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>2. \uc65c <code>useState<\/code>\uac00 \uc911\uc694\ud55c\uac00?<\/h2>\n\n\n\n<p>React\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub294 \ub3d9\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud558\ub294 \ud575\uc2ec\uc785\ub2c8\ub2e4. <code>useState<\/code>\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc720\ub85c \uc911\uc694\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>UI\uc640 \uc0c1\ud0dc\uc758 \ub3d9\uae30\ud654<\/strong> <code>useState<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c React\uac00 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc5ec UI\ub97c \ucd5c\uc2e0 \uc0c1\ud0dc\ub85c \uc720\uc9c0\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub294 \ud56d\uc0c1 \ucd5c\uc2e0 \ub370\uc774\ud130\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac \uac00\ub2a5<\/strong> React\uc758 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uac00\ubccd\uace0 \uac04\uacb0\ud558\uc9c0\ub9cc, \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 <code>useState<\/code>\uc640 \uac19\uc740 Hook\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. <code>useState<\/code>\ub294 \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8 \uc5c6\uc774\ub3c4 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.<\/li><li><strong>\uc7ac\uc0ac\uc6a9\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131 \ud5a5\uc0c1<\/strong> <code>useState<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud0dc \uad00\ub9ac \ub85c\uc9c1\uc744 \uac04\ub2e8\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uc5b4 \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc774 \ub192\uc544\uc9d1\ub2c8\ub2e4.<\/li><li><strong>React\uc758 \ud575\uc2ec \ucca0\ud559\uacfc \uc77c\uce58<\/strong> React\ub294 &#8220;UI\ub294 \uc0c1\ud0dc\uc758 \ud568\uc218&#8221;\ub77c\ub294 \ucca0\ud559\uc744 \ub530\ub985\ub2c8\ub2e4. <code>useState<\/code>\ub294 \uc774 \ucca0\ud559\uc744 \uad6c\ud604\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 \ub3c4\uad6c\uc785\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>3. <code>useState<\/code>\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n\n\n\n<h4><strong>\uac04\ub2e8\ud55c \uce74\uc6b4\ud130 \uc608\uc81c<\/strong><\/h4>\n\n\n\n<p>\uc544\ub798\ub294 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc22b\uc790\uac00 \uc99d\uac00\ud558\ub294 \uac04\ub2e8\ud55c \uce74\uc6b4\ud130 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ud604\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n  const &#91;count, setCount] = useState(0); \/\/ \ucd08\uae30\uac12\uc740 0\n\n  const handleClick = () =&gt; {\n    setCount(count + 1); \/\/ \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\ud604\uc7ac \uce74\uc6b4\ud2b8: {count}&lt;\/p&gt;\n      &lt;button onClick={handleClick}&gt;\uc99d\uac00&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n\n\n\n<h4><strong>\ub3d9\uc791 \uc6d0\ub9ac<\/strong><\/h4>\n\n\n\n<ol><li><code>useState<\/code>\ub97c \ud638\ucd9c\ud558\uba74 <code>count<\/code>\ub77c\ub294 \uc0c1\ud0dc\uc640 \uc774\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub294 <code>setCount<\/code> \ud568\uc218\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4.<\/li><li>\ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 <code>setCount<\/code>\uac00 \ud638\ucd9c\ub418\uc5b4 \uc0c1\ud0dc\uac00 \uc5c5\ub370\uc774\ud2b8\ub418\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><li>\ub80c\ub354\ub9c1\ub41c UI\ub294 \uc5c5\ub370\uc774\ud2b8\ub41c \uc0c1\ud0dc \uac12\uc744 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>4. \uc608\uc81c &#8211; \uc0ac\uc6a9\uc790 \uc785\ub825 \uad00\ub9ac\ud558\uae30<\/h2>\n\n\n\n<h4><strong>\uc694\uad6c\uc0ac\ud56d<\/strong><\/h4>\n\n\n\n<ul><li>\uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uc774\ub984\uc744 \ub9ac\uc2a4\ud2b8\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li><li>\uc785\ub825 \ud544\ub4dc\uc5d0 \uc785\ub825\ub41c \uac12\uc740 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc0c1\ud0dc\uc5d0 \ubc18\uc601\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h4><strong>\uad6c\ud604 \ucf54\ub4dc<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from 'react';\n\nfunction NameList() {\n  const &#91;names, setNames] = useState(&#91;'\ud64d\uae38\ub3d9', '\uae40\ubbfc\uc218']); \/\/ \ucd08\uae30\uac12\uc740 \ubc30\uc5f4\n  const &#91;input, setInput] = useState(''); \/\/ \uc785\ub825 \ud544\ub4dc \uc0c1\ud0dc\n\n  const handleInputChange = (e) =&gt; {\n    setInput(e.target.value); \/\/ \uc785\ub825\uac12 \uc5c5\ub370\uc774\ud2b8\n  };\n\n  const handleUpload = () =&gt; {\n    setNames((prevNames) =&gt; &#91;input, ...prevNames]); \/\/ \uc0c8\ub85c\uc6b4 \uc774\ub984 \ucd94\uac00\n    setInput(''); \/\/ \uc785\ub825 \ud544\ub4dc \ucd08\uae30\ud654\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;input\n        type=\"text\"\n        value={input}\n        onChange={handleInputChange}\n        placeholder=\"\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694\"\n      \/&gt;\n      &lt;button onClick={handleUpload}&gt;\uc5c5\ub85c\ub4dc&lt;\/button&gt;\n      &lt;ul&gt;\n        {names.map((name, index) =&gt; (\n          &lt;li key={index}&gt;{name}&lt;\/li&gt;\n        ))}\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default NameList;<\/code><\/pre>\n\n\n\n<h4><strong>\uc8fc\uc694 \ud3ec\uc778\ud2b8<\/strong><\/h4>\n\n\n\n<ul><li><strong>\ub9ac\uc2a4\ud2b8 \uc0c1\ud0dc \uad00\ub9ac<\/strong>: \uae30\uc874 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\uba74\uc11c \uc0c8\ub85c\uc6b4 \uac12\uc744 \ucd94\uac00\ud558\uae30 \uc704\ud574 <code>setNames<\/code>\uc5d0 \ucf5c\ubc31 \ud568\uc218\ub97c \uc804\ub2ec\ud588\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uc785\ub825 \ud544\ub4dc \uc0c1\ud0dc \uad00\ub9ac<\/strong>: \uc785\ub825\uac12\uc744 <code>input<\/code> \uc0c1\ud0dc\ub85c \uad00\ub9ac\ud558\uace0, \uc785\ub825\uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 <code>onChange<\/code> \uc774\ubca4\ud2b8\ub85c \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>5. \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud55c \ud301<\/h2>\n\n\n\n<h4><strong>\ucd08\uae30\uac12 \uacc4\uc0b0 \ucd5c\uc801\ud654<\/strong><\/h4>\n\n\n\n<p><code>useState<\/code>\uc758 \ucd08\uae30\uac12\uc774 \ubcf5\uc7a1\ud55c \uacc4\uc0b0\uc744 \ud544\uc694\ub85c \ud55c\ub2e4\uba74, \ucf5c\ubc31 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucd08\uae30\uac12 \uacc4\uc0b0\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>\ubb38\uc81c \uc0c1\ud669<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function App() {\n  const heavyWork = () =&gt; {\n    console.log('\ubb34\uac70\uc6b4 \uc791\uc5c5 \uc2e4\ud589 \uc911...');\n    return &#91;'\ub300\uc0c1\ud601', '\uc624\ucc3d\uc12d'];\n  };\n\n  const &#91;names, setNames] = useState(heavyWork()); \/\/ \ub9e4\ubc88 \ub80c\ub354\ub9c1 \uc2dc \uc2e4\ud589\ub428\n\n  return &lt;div&gt;...&lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<h4><strong>\ud574\uacb0 \ubc29\ubc95<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function App() {\n  const heavyWork = () =&gt; {\n    console.log('\ubb34\uac70\uc6b4 \uc791\uc5c5 \uc2e4\ud589 \uc911...');\n    return &#91;'\ub300\uc0c1\ud601', '\uc624\ucc3d\uc12d'];\n  };\n\n  const &#91;names, setNames] = useState(() =&gt; heavyWork()); \/\/ \ucf5c\ubc31 \ud568\uc218\ub85c \ucd08\uae30\uac12 \uc124\uc815\n\n  return &lt;div&gt;...&lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<ul><li><strong>\ucf5c\ubc31 \ud568\uc218 \uc0ac\uc6a9<\/strong>: <code>useState<\/code>\uc5d0 \ucf5c\ubc31 \ud568\uc218\ub97c \uc804\ub2ec\ud558\uba74, \ucd08\uae30\uac12 \uacc4\uc0b0\uc774 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucc98\uc74c \ub80c\ub354\ub9c1\ub420 \ub54c \ud55c \ubc88\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>6. \uc694\uc57d<\/h2>\n\n\n\n<ul><li><code>useState<\/code>\ub294 React\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud55c \uae30\ubcf8 Hook\uc785\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc\uc640 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8 \ud568\uc218\ub97c \ubc30\uc5f4 \ud615\ud0dc\ub85c \ubc18\ud658\ud558\uba70, \uc774\ub97c \ud1b5\ud574 \uc0c1\ud0dc\ub97c \uc120\uc5b8\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8 \uc2dc \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><li>\uc774\uc804 \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\ub97c \uacc4\uc0b0\ud574\uc57c \ud560 \uacbd\uc6b0, <code>setState<\/code>\uc5d0 \ucf5c\ubc31 \ud568\uc218\ub97c \uc804\ub2ec\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/li><li>\ucd08\uae30\uac12 \uacc4\uc0b0\uc774 \ubcf5\uc7a1\ud55c \uacbd\uc6b0, \ucf5c\ubc31 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"210\" height=\"210\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png\" alt=\"\" class=\"wp-image-641\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React\uc758 useState\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc774\uace0 \uc911\uc694\ud55c Hook \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useState\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95, \uc608\uc81c, \uadf8\ub9ac\uace0 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c useState\uac00 \uc65c \uc911\uc694\ud55c\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. 1. useState\ub780 \ubb34\uc5c7\uc778\uac00? useState\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook \uc911 \ud558\ub098\ub85c, \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc(state)\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. React\uc758 \uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130\ub098 UI\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc8fc\uc694 [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,63,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/662"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=662"}],"version-history":[{"count":3,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/662\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/662\/revisions\/701"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}