{"id":96,"date":"2025-07-16T14:55:15","date_gmt":"2025-07-16T05:55:15","guid":{"rendered":"http:\/\/34.64.61.65\/?p=96"},"modified":"2025-07-16T15:16:04","modified_gmt":"2025-07-16T06:16:04","slug":"__trashed-2","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=96","title":{"rendered":"React Component"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>\ucef4\ud3ec\ub10c\ud2b8(Component)<\/li>\n<\/ol>\n\n\n\n<p><strong>\uc7ac\uc0ac\uc6a9<\/strong>\uc774 \uac00\ub2a5\ud55c \uac01\uac01\uc758 \uc791\uace0 \ub3c5\ub9bd\uc801\uc778 \ubaa8\ub4c8.<\/p>\n\n\n\n<p>\ub9ac\uc561\ud2b8\ub85c \uac1c\ubc1c\ud55c \uc571\uc744 \uc774\ub8e8\ub294 \uac00\uc7a5 \uc791\uc740 \ub2e8\uc704, \uc870\uac01.<\/p>\n\n\n\n<p>\ub808\uace0\ube14\ub7ed\uc73c\ub85c \ube44\uc720\ud560 \ub54c, \ub808\uace0\ube14\ub7ed\uc73c\ub85c \ub9cc\ub4e0 \uc9d1\uc740 \ub9ac\uc561\ud2b8 \uc571\uc73c\ub85c \ubcf4\uace0<\/p>\n\n\n\n<p>\uc9d1\uc744 \uad6c\uc131\ud558\ub294 \ud558\ub098\uc758 \uc791\uc740 \ube14\ub85d\ub4e4\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub77c\uace0 \ud560 \uc218 \uc788\uc74c.<\/p>\n\n\n\n<p>1) \uc65c \ucef4\ud3ec\ub10c\ud2b8\uc778\uac00<\/p>\n\n\n\n<p>\uae30\uc874 \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\ub294 MVC(Model, View, Controller) \ubc29\uc2dd\uc73c\ub85c \ubd84\ub9ac\ud558\uc5ec \uad00\ub9ac.<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c \uac01 \uc694\uc18c\ub4e4\uc774 \ub3c5\ub9bd\uc801\uc774\uc9c0 \uc54a\uace0 \uc758\uc874\uc131\uc774 \ub192\uc544\uc11c \uc7ac\uc0ac\uc6a9\uc774 \uc5b4\ub824\uc6c0.<\/p>\n\n\n\n<p>\u2192 \ucef4\ud3ec\ub10c\ud2b8\ub294 View\ub97c \ub3c5\ub9bd\uc801\uc73c\ub85c \uad6c\uc131\ud558\uc5ec \uc7ac\uc0ac\uc6a9 \uac00\ub2a5!<\/p>\n\n\n\n<p>2) \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9<\/p>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc774\ub984\uc740&nbsp;<strong>\ud56d\uc0c1 \ub300\ubb38\uc790<\/strong>\ub85c \uc2dc\uc791.<\/p>\n\n\n\n<p>\u203b React\uc5d0\uc11c \uc18c\ubb38\uc790\ub85c \uc2dc\uc791\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub294 DOM \ud0dc\uadf8\ub85c \uc778\uc2dd\ud568.<\/p>\n\n\n\n<p>\ud83c\udf1f \ucef4\ud3ec\ub10c\ud2b8\uc758 \uad6c\uc131\uc694\uc18c<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud504\ub85c\ud37c\ud2f0(Props)<\/li>\n\n\n\n<li>state<\/li>\n\n\n\n<li>\ucee8\ud14d\uc2a4\ud2b8(Context)<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc120\uc5b8\ubc29\uc2dd<\/li>\n<\/ol>\n\n\n\n<p>1)&nbsp;<strong>\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8(Functional Component)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>state\uc640 LifeCycle API \uc0ac\uc6a9\uc774 \ubd88\uac00\ub2a5\ud588\uc73c\ub098 Hook \uae30\ub2a5\uc73c\ub85c \uc0ac\uc6a9 \uac00\ub2a5 .<\/li>\n\n\n\n<li>\ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8\ubcf4\ub2e4 \uc120\uc5b8\ud558\uae30 \ud3b8\ud568.<\/li>\n\n\n\n<li>\ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8\ubcf4\ub2e4 \uba54\ubaa8\ub9ac \uc790\uc6d0\uc744 \ub35c \uc0ac\uc6a9\ud568<\/li>\n<\/ul>\n\n\n\n<p>(1) \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8 \uc120\uc5b8<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nconst App = () =&gt; {\n    return(\n        &lt;div&gt;&lt;\/div&gt;\n    );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>2) \ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8(Class Component)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>state\uc640 LifeCycle API \uc0ac\uc6a9 \uac00\ub2a5.<\/li>\n\n\n\n<li>\uc784\uc758 \uba54\uc11c\ub4dc \uc815\uc758 \uac00\ub2a5.<\/li>\n<\/ul>\n\n\n\n<p>(1) \ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8 \uc120\uc5b8<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>class \ud0a4\uc6cc\ub4dc \ud544\uc694<\/li>\n\n\n\n<li>Component\ub97c \uc0c1\uc18d \ubc1b\uc544\uc57c \ud568.<\/li>\n\n\n\n<li>render() \uba54\uc18c\ub4dc \ubc18\ub4dc\uc2dc \ud544\uc694.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { Component } from 'react';\n\nclass App extends Component {\n    render() {\n            return(\n            &lt;div&gt;&lt;\/div&gt;\n            );\n    }\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>\u203b \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uac1c\ubc1c\uc744 \uc9c4\ud589\ud55c \ud504\ub85c\uc81d\ud2b8\uc758 \uc720\uc9c0\ubcf4\uc218\ub97c \uc704\ud574 \uc54c\uc544\ub458 \uac83<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc7ac\uc0ac\uc6a9\uc774 \uac00\ub2a5\ud55c \uac01\uac01\uc758 \uc791\uace0 \ub3c5\ub9bd\uc801\uc778 \ubaa8\ub4c8. \ub9ac\uc561\ud2b8\ub85c \uac1c\ubc1c\ud55c \uc571\uc744 \uc774\ub8e8\ub294 \uac00\uc7a5 \uc791\uc740 \ub2e8\uc704, \uc870\uac01. \ub808\uace0\ube14\ub7ed\uc73c\ub85c \ube44\uc720\ud560 \ub54c, \ub808\uace0\ube14\ub7ed\uc73c\ub85c \ub9cc\ub4e0 \uc9d1\uc740 \ub9ac\uc561\ud2b8 \uc571\uc73c\ub85c \ubcf4\uace0 \uc9d1\uc744 \uad6c\uc131\ud558\ub294 \ud558\ub098\uc758 \uc791\uc740 \ube14\ub85d\ub4e4\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub77c\uace0 \ud560 \uc218 \uc788\uc74c. 1) \uc65c \ucef4\ud3ec\ub10c\ud2b8\uc778\uac00 \uae30\uc874 \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\ub294 MVC(Model, View, Controller) \ubc29\uc2dd\uc73c\ub85c \ubd84\ub9ac\ud558\uc5ec \uad00\ub9ac. \ub530\ub77c\uc11c \uac01 \uc694\uc18c\ub4e4\uc774 \ub3c5\ub9bd\uc801\uc774\uc9c0 \uc54a\uace0 \uc758\uc874\uc131\uc774 \ub192\uc544\uc11c \uc7ac\uc0ac\uc6a9\uc774 \uc5b4\ub824\uc6c0. \u2192 \ucef4\ud3ec\ub10c\ud2b8\ub294 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[100,102,101],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=96"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/96\/revisions\/150"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}