{"id":914,"date":"2025-06-14T23:16:21","date_gmt":"2025-06-14T14:16:21","guid":{"rendered":"https:\/\/nangchang.nes.or.kr\/?p=914"},"modified":"2025-06-24T00:16:00","modified_gmt":"2025-06-23T15:16:00","slug":"%f0%9f%a7%a0-%eb%a6%ac%ec%95%a1%ed%8a%b8%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80","status":"publish","type":"post","link":"https:\/\/nangchang.nes.or.kr\/?p=914","title":{"rendered":"[React] \ud83e\udde0 \ub9ac\uc561\ud2b8\ub780 \ubb34\uc5c7\uc778\uac00?"},"content":{"rendered":"\n<p>\ub9ac\uc561\ud2b8(React)\ub294 \ud398\uc774\uc2a4\ubd81\uc774 \ub9cc\ub4e0 <strong>\uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \ub9cc\ub4e4\uae30 \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/strong>\uc785\ub2c8\ub2e4.<br>\ud558\uc9c0\ub9cc \uc774\ub807\uac8c \ub9d0\ud574\ub3c4 \uc544\uc9c1 \uac10\uc774 \uc548 \uc62c \uc218 \uc788\uc5b4\uc694. \uadf8\ub798\uc11c \ucc28\uadfc\ucc28\uadfc \ud480\uc5b4\ubcfc\uac8c\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udc40 \uc6f9\uc0ac\uc774\ud2b8\ub294 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud560\uae4c?<\/h3>\n\n\n\n<p>\uc6f9\uc0ac\uc774\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc544\ub798\uc640 \uac19\uc740 \ud750\ub984\uc73c\ub85c \ub3d9\uc791\ud574\uc694:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ub204\ub978\ub2e4<\/li>\n\n\n\n<li>\ud654\uba74\uc758 \uc5b4\ub5a4 \ub0b4\uc6a9\uc774 \ubc14\ub010\ub2e4<\/li>\n\n\n\n<li>\uc774\uac78 \uc704\ud574 HTML\/CSS\/JavaScript\uac00 \ud611\ub825\ud55c\ub2e4<\/li>\n<\/ol>\n\n\n\n<p>\uc5ec\uae30\uc11c \ubb38\uc81c\uac00 \uc0dd\uae41\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ubc84\ud2bc\uc744 \ub204\ub97c \ub54c\ub9c8\ub2e4 \ud654\uba74\uc744 <strong>\uc9c1\uc811 \uc870\uc791(DOM \uc870\uc791)<\/strong> \ud574\uc57c \ud574\uc694.<\/li>\n\n\n\n<li>\uc0c1\ud0dc\uac00 \ub9ce\uc544\uc9c8\uc218\ub85d \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574\uc9c0\uace0 \uc2e4\uc218\ud558\uae30 \uc26c\uc6cc\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\ude13 \uc804\ud1b5\uc801\uc778 \ubc29\uc2dd<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ub204\ub984<\/li>\n\n\n\n<li>JavaScript\uac00 \uc9c1\uc811 <code>&lt;div&gt;<\/code>\uc758 \ud14d\uc2a4\ud2b8\ub97c \ubc14\uafd4\uc90c<\/li>\n\n\n\n<li>\uc5ec\ub7ec \uac1c\uc758 \uc0c1\ud0dc\ub97c \uc77c\uc77c\uc774 \ucd94\uc801\ud574\uc57c \ud568<\/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\">\ud83c\udf89 \uadf8\ub798\uc11c \ub098\uc628 \uac8c \ub9ac\uc561\ud2b8!<\/h3>\n\n\n\n<p>\ub9ac\uc561\ud2b8\ub294 \uc774\uac78 \ud6e8\uc52c <strong>\uae54\ub054\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac<\/strong>\ud560 \uc218 \uc788\uac8c \ud574\uc918\uc694.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub370\uc774\ud130(state)\uac00 \ubc14\ub00c\uba74<\/li>\n\n\n\n<li>\ub9ac\uc561\ud2b8\uac00 \uc790\ub3d9\uc73c\ub85c UI\ub97c \ub2e4\uc2dc \uadf8\ub824\uc918\uc694<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201c\ub370\uc774\ud130 \uc911\uc2ec\u201d\uc73c\ub85c UI\ub97c \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub3fc\uc694.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd01 \ube44\uc720\ub85c \uc774\ud574\ud574\ubcf4\uc790<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ub9ac\uc561\ud2b8\ub97c \ucc98\uc74c \ubc30\uc6b0\ub294 \uc0ac\ub78c\uc5d0\uac8c \uac00\uc7a5 \uc88b\uc740 \ube44\uc720\ub294 \u2018\uc790\ub3d9 \uacc4\uc0b0\uae30\u2019\uc608\uc694.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uacc4\uc0b0\uae30\uc5d0 \uc22b\uc790\ub97c \uc785\ub825\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \uacb0\uacfc\uac00 \uac31\uc2e0\ub418\uc8e0?<\/li>\n\n\n\n<li>\uc6b0\ub9ac\uac00 \ubc84\ud2bc\uc744 \ub204\ub97c \ub54c\ub9c8\ub2e4 \uacb0\uacfc\ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud560 \ud544\uc694\ub294 \uc5c6\uc5b4\uc694.<\/li>\n\n\n\n<li><strong>\ub9ac\uc561\ud2b8\ub294 \ud654\uba74\ub3c4 \uc774\ub807\uac8c \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \uacc4\uc0b0\ud574\uc8fc\ub294 \ub3c4\uad6c<\/strong>\uc608\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\">\ud83e\udde9 \ub9ac\uc561\ud2b8\uc758 \ud575\uc2ec \uc694\uc18c 3\uac00\uc9c0<\/h3>\n\n\n\n<p>\ub9ac\uc561\ud2b8\ub294 \ud06c\uac8c \uc544\ub798 3\uac00\uc9c0\ub85c \uad6c\uc131\ub3fc\uc694:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\uc694\uc18c<\/th><th>\uc124\uba85<\/th><\/tr><\/thead><tbody><tr><td>\ucef4\ud3ec\ub10c\ud2b8 (Component)<\/td><td>\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \uc870\uac01<\/td><\/tr><tr><td>\uc0c1\ud0dc (State)<\/td><td>\ubcc0\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130<\/td><\/tr><tr><td>\ub80c\ub354\ub9c1 (Rendering)<\/td><td>\ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud654\uba74\uc744 \uadf8\ub9ac\ub294 \uc77c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce6 \uac04\ub2e8\ud55c \uc608\uc81c \ucf54\ub4dc<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><code>function Welcome() {\n  return &lt;h1&gt;\uc548\ub155\ud558\uc138\uc694, React!&lt;\/h1&gt;;\n}\n<\/code><\/code><\/pre>\n\n\n\n<p>\uc774\uac74 \u201cWelcome\u201d\uc774\ub77c\ub294 \uc774\ub984\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud55c \uac70\uc608\uc694.<br><code>&lt;Welcome \/&gt;<\/code>\uc774\ub77c\uace0 \uc4f0\uba74 \ud654\uba74\uc5d0 \u201c\uc548\ub155\ud558\uc138\uc694, React!\u201d\uac00 \ub098\ud0c0\ub098\uc8e0.<\/p>\n\n\n\n<p>\ud83d\udc49 \ub9c8\uce58 \ub0b4\uac00 HTML \ud0dc\uadf8\ub97c \uc0c8\ub85c \ub9cc\ub4e0 \uac83\ucc98\ub7fc \uc4f8 \uc218 \uc788\uc5b4\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc0ac\uc6a9\uc790 \uc785\ub825 \u2192<\/li>\n\n\n\n<li>\uc0c1\ud0dc(state)\uac00 \ubc14\ub01c \u2192<\/li>\n\n\n\n<li>\ub9ac\uc561\ud2b8\uac00 \uc0c8\ub85c\uc6b4 UI\ub97c \uacc4\uc0b0 \u2192<\/li>\n\n\n\n<li>\ud654\uba74\uc774 \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub428<\/li>\n<\/ol>\n\n\n\n<p>\uc774 \ubaa8\ub4e0 \uac78 \ub9ac\uc561\ud2b8\uac00 <strong>\uc790\ub3d9\uc73c\ub85c<\/strong> \ud574\uc8fc\ub294 \uac8c \ud575\uc2ec\uc774\uc5d0\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 \uc815\ub9ac<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub9ac\uc561\ud2b8\ub294 <strong>\ub370\uc774\ud130 \uc911\uc2ec\uc73c\ub85c UI\ub97c \ub9cc\ub4dc\ub294 \ub3c4\uad6c<\/strong>\uc608\uc694.<\/li>\n\n\n\n<li>\ubcf5\uc7a1\ud55c \ud654\uba74\ub3c4 \ub354 <strong>\uc608\uce21 \uac00\ub2a5\ud558\uace0 \ud6a8\uc728\uc801<\/strong>\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\uc5b4\uc694.<\/li>\n\n\n\n<li>\ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c \uc791\ub3d9\ud558\uba70, \ubcc0\ud654\uc5d0 \ub530\ub77c UI\ub97c \ub2e4\uc2dc \uadf8\ub824\uc918\uc694.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8(React)\ub294 \ud398\uc774\uc2a4\ubd81\uc774 \ub9cc\ub4e0 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \ub9cc\ub4e4\uae30 \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.\ud558\uc9c0\ub9cc \uc774\ub807\uac8c \ub9d0\ud574\ub3c4 \uc544\uc9c1 \uac10\uc774 \uc548 \uc62c \uc218 \uc788\uc5b4\uc694. \uadf8\ub798\uc11c \ucc28\uadfc\ucc28\uadfc \ud480\uc5b4\ubcfc\uac8c\uc694. \ud83d\udc40 \uc6f9\uc0ac\uc774\ud2b8\ub294 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud560\uae4c? \uc6f9\uc0ac\uc774\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc544\ub798\uc640 \uac19\uc740 \ud750\ub984\uc73c\ub85c \ub3d9\uc791\ud574\uc694: \uc5ec\uae30\uc11c \ubb38\uc81c\uac00 \uc0dd\uae41\ub2c8\ub2e4. \ud83d\ude13 \uc804\ud1b5\uc801\uc778 \ubc29\uc2dd \ud83c\udf89 \uadf8\ub798\uc11c \ub098\uc628 \uac8c \ub9ac\uc561\ud2b8! \ub9ac\uc561\ud2b8\ub294 \uc774\uac78 \ud6e8\uc52c \uae54\ub054\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uac8c \ud574\uc918\uc694. \u201c\ub370\uc774\ud130 \uc911\uc2ec\u201d\uc73c\ub85c UI\ub97c \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uc774\ub77c\uace0 [&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-914","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\/914","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=914"}],"version-history":[{"count":3,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/914\/revisions"}],"predecessor-version":[{"id":952,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=\/wp\/v2\/posts\/914\/revisions\/952"}],"wp:attachment":[{"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nangchang.nes.or.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}