{"id":944,"date":"2025-06-22T14:32:22","date_gmt":"2025-06-22T05:32:22","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=944"},"modified":"2025-06-24T00:39:23","modified_gmt":"2025-06-23T15:39:23","slug":"%f0%9f%93%8b-react%ec%97%90%ec%84%9c-%eb%b0%b0%ec%97%b4-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ed%99%94%eb%a9%b4%ec%97%90-%ec%b6%9c%eb%a0%a5%ed%95%98%ea%b8%b0-%eb%a6%ac%ec%8a%a4%ed%8a%b8-%eb%a0%8c","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=944","title":{"rendered":"[React] \ud83d\udccb React\uc5d0\uc11c \ubc30\uc5f4 \ub370\uc774\ud130 \ud654\uba74\uc5d0 \ucd9c\ub825\ud558\uae30 \u2013 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1"},"content":{"rendered":"\n<p>\uc0ac\uc6a9\uc790 \ubaa9\ub85d, \ub313\uae00 \ubaa9\ub85d, \uc0c1\ud488 \ub9ac\uc2a4\ud2b8\ucc98\ub7fc <strong>\uc5ec\ub7ec \uac1c\uc758 \ud56d\ubaa9\uc744 \ubc18\ubcf5\ud574\uc11c \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc918\uc57c \ud558\ub294 \uacbd\uc6b0<\/strong>, React\uc5d0\uc11c\ub294 <code>map()<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c JSX\ub97c \ubc18\ubcf5 \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uc758 \uae30\ubcf8\uacfc \ud568\uaed8, <strong>\uaf2d \ud544\uc694\ud55c key \uc18d\uc131<\/strong>\uc5d0 \ub300\ud574 \uc124\uba85\ud569\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\">1. \ud83c\udf00 \ubc30\uc5f4\uc744 JSX\ub85c \ubc14\uafb8\uae30 \u2013 map() \ud568\uc218<\/h3>\n\n\n\n<p>JS\uc758 <code>map()<\/code> \ud568\uc218\ub294 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud574 \uac01\uac01\uc758 \uc694\uc18c\ub97c \uc6d0\ud558\ub294 \ud615\ud0dc\ub85c \ubc14\uafd4\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const fruits = ['\uc0ac\uacfc', '\ubc14\ub098\ub098', '\ub538\uae30'];\n\nfunction FruitList() {\n  return (\n    &lt;ul&gt;\n      {fruits.map((fruit) =&gt; (\n        &lt;li&gt;{fruit}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\uc704 \ucf54\ub4dc\uc5d0\uc11c <code>fruits<\/code> \ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc744 <code>&lt;li&gt;<\/code> \ud0dc\uadf8\ub85c \ubc18\ubcf5 \ucd9c\ub825\ud558\uace0 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. \u26a0\ufe0f key \uc18d\uc131\uc740 \uaf2d \ub123\uc790!<\/h3>\n\n\n\n<p>React\ub294 \ub9ac\uc2a4\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \ub54c <strong>\uac01 \ud56d\ubaa9\uc744 \uad6c\ubd84\ud558\uae30 \uc704\ud574 key<\/strong>\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. key\uac00 \uc5c6\uac70\ub098 \uc911\ubcf5\ub418\uba74 \uc131\ub2a5 \uc800\ud558\ub098 UI \ubb38\uc81c(\uc608: \uae5c\ube61\uc784)\uac00 \uc0dd\uae38 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<p>\uc704 \uc608\uc81c\ub97c \uac1c\uc120\ud574\ubcfc\uac8c\uc694:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">{fruits.map((fruit, index) =&gt; (\n  &lt;li key={index}&gt;{fruit}&lt;\/li&gt;\n))}\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udccc \uc5ec\uae30\uc120 <code>index<\/code>\ub97c key\ub85c \uc37c\uc9c0\ub9cc, <strong>\uac00\ub2a5\ud558\uba74 \uace0\uc720\ud55c \uac12<\/strong>(\uc608: id)\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ub354 \uc88b\uc2b5\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. \ud83e\uddea \uace0\uc720 ID\uac00 \uc788\ub294 \uacbd\uc6b0<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const users = [\n  { id: 1, name: '\ucca0\uc218' },\n  { id: 2, name: '\uc601\ud76c' }\n];\n\nfunction UserList() {\n  return (\n    &lt;ul&gt;\n      {users.map(user =&gt; (\n        &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p><strong>key={user.id}<\/strong>\ub294 \ucd5c\uc801\uc758 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc774 \uac12\uc740 \ud56d\ubaa9\uc774 \ubcc0\ud574\ub3c4 \uc720\uc9c0\ub418\uae30 \ub54c\ubb38\uc774\uc8e0.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccc \uc815\ub9ac<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React\uc5d0\uc11c \ubc30\uc5f4\uc744 \ucd9c\ub825\ud560 \ub550 <code>map()<\/code>\uc744 \uc0ac\uc6a9\ud574 \ubc18\ubcf5\ud569\ub2c8\ub2e4<\/li>\n\n\n\n<li><code>key<\/code>\ub294 \ud544\uc218\uc774\uba70, \uac01 \ud56d\ubaa9\uc744 \uace0\uc720\ud558\uac8c \uad6c\ubd84\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4<\/li>\n\n\n\n<li>\uac00\ub2a5\ud558\uba74 <strong>index \ub300\uc2e0 \uace0\uc720\ud55c id<\/strong>\ub97c key\ub85c \uc0ac\uc6a9\ud558\uc138\uc694<\/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 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1 \ud750\ub984\ub3c4<\/h3>\n\n\n\n<p>\uc544\ub798 \uadf8\ub9bc\uc740 \ubc30\uc5f4 \u2192 \ubc18\ubcf5 \u2192 JSX \u2192 \ub80c\ub354\ub9c1 \uacfc\uc815\uc744 \uc2dc\uac01\ud654\ud55c \ud750\ub984\ub3c4\uc785\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-5-1024x683.png\" alt=\"\" class=\"wp-image-945\" srcset=\"https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-5-1024x683.png 1024w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-5-300x200.png 300w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-5-768x512.png 768w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-5-624x416.png 624w, https:\/\/nangchang.nes.or.kr\/wp-content\/uploads\/2025\/06\/image-5.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\uc0ac\uc6a9\uc790 \ubaa9\ub85d, \ub313\uae00 \ubaa9\ub85d, \uc0c1\ud488 \ub9ac\uc2a4\ud2b8\ucc98\ub7fc \uc5ec\ub7ec \uac1c\uc758 \ud56d\ubaa9\uc744 \ubc18\ubcf5\ud574\uc11c \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc918\uc57c \ud558\ub294 \uacbd\uc6b0, React\uc5d0\uc11c\ub294 map() \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c JSX\ub97c \ubc18\ubcf5 \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uc758 \uae30\ubcf8\uacfc \ud568\uaed8, \uaf2d \ud544\uc694\ud55c key \uc18d\uc131\uc5d0 \ub300\ud574 \uc124\uba85\ud569\ub2c8\ub2e4. 1. \ud83c\udf00 \ubc30\uc5f4\uc744 JSX\ub85c \ubc14\uafb8\uae30 \u2013 map() \ud568\uc218 JS\uc758 map() \ud568\uc218\ub294 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud574 \uac01\uac01\uc758 \uc694\uc18c\ub97c \uc6d0\ud558\ub294 \ud615\ud0dc\ub85c \ubc14\uafd4\uc90d\ub2c8\ub2e4. \uc704 \ucf54\ub4dc\uc5d0\uc11c fruits \ubc30\uc5f4\uc758 [&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-944","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\/944","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=944"}],"version-history":[{"count":2,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/944\/revisions"}],"predecessor-version":[{"id":958,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/944\/revisions\/958"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}