{"id":92,"date":"2025-07-16T14:55:21","date_gmt":"2025-07-16T05:55:21","guid":{"rendered":"http:\/\/34.64.61.65\/?p=92"},"modified":"2025-07-16T15:17:00","modified_gmt":"2025-07-16T06:17:00","slug":"__trashed-5","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=92","title":{"rendered":"React \uae30\ucd08"},"content":{"rendered":"\n<p>1) \ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5<\/p>\n\n\n\n<p>(1) \ucef4\ud3ec\ub10c\ud2b8(Component)<\/p>\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. \ub9c8\uce58 \ub808\uace0 \ube14\ub7ed&#8230;<\/p>\n\n\n\n<p>\uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ud654\uba74\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\uc131\ud558\ub294 \uac83\uc774 \ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5.<\/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<p>(2) \uac00\uc0c1\ub3d4(Virtual DOM)<\/p>\n\n\n\n<p>\u270d\ud83c\udffb \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud654\uba74\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \uacfc\uc815<\/p>\n\n\n\n<p>\uc11c\ubc84\ub85c\ubd80\ud130 \ubc1b\ub294 \ud30c\uc77c\uc744 \ud30c\uc2f1\ud558\uc5ec DOM Tree\uc640 CSSOM Tree\ub97c \ub9cc\ub4e4\uace0 \uacb0\ud569 : \ub80c\ub354\ud2b8\ub9ac(Render Tree) \uc0dd\uc131.<\/p>\n\n\n\n<p>\uc0dd\uc131\ud55c Render Tree\ub85c&nbsp; Layout\uc744 \uacc4\uc0b0\ud558\uace0 \ub9cc\ub4e0 \ud6c4, \uc774 \uc694\uc18c\ub4e4\uc744 \uc2e4\uc81c\ub85c \ud654\uba74\uc744 \uadf8\ub9ac\ub294 Paint\ub97c \ud55c\ub2e4.<\/p>\n\n\n\n<p>DOM + CSSOM \u2192 Render Tree<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>DOM(Document Object Model) Tree<\/li>\n<\/ul>\n\n\n\n<p>HTML \ud30c\uc77c\uc744&nbsp; \ud30c\uc2f1\ud558\uc5ec \uad6c\uc870\ud654\ud558\uc5ec \ud45c\ud604\ud55c \uac83.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSSOM(CSS Object Model) Tree<\/li>\n<\/ul>\n\n\n\n<p>CSS \ud30c\uc77c\uc744 DOM\ucc98\ub7fc \ud30c\uc2f1\ud558\uace0 \uad6c\uc870\ud654\ud558\uc5ec \ub9cc\ub4e0 \uac83.<\/p>\n\n\n\n<p>DOM\uc740 \uc544\uc8fc \uc791\uc740 \ubcc0\uacbd\uc0ac\ud56d\uc774 \uc788\ub354\ub77c\ub3c4 \ud56d\uc0c1 \ub9ac\ub80c\ub354\ub9c1\uc744 \ud558\uace0 \uc774\ub54c \ubb38\uc81c\uc810 \ubc1c\uc0dd<\/p>\n\n\n\n<p>= \ud654\uba74\uc774 \ucee4\uc9c0\uba74 \ucee4\uc9c8\uc218\ub85d \ud654\uba74\uc744 \uadf8\ub9ac\ub294 \uc2dc\uac04\uc774 \uae38\uc5b4\uc9c0\ub294, \uc989 \uc18d\ub3c4\uac00 \ub290\ub824\uc9c0\ub294 \uac83.<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c \uac00\uc0c1\ub3d4(Virtual DOM)\uc744 \uc0ac\uc6a9.<\/p>\n\n\n\n<p>\ud83c\udf1f \ub9ac\uc561\ud2b8\uac00 \uac00\uc0c1\ub3d4(Virtual DOM)\uc744 \ubc18\uc601\ud558\ub294 \uc808\ucc28<\/p>\n\n\n\n<p>\u2460 \ubcc0\uacbd\uc0ac\ud56d \ubc1c\uc0dd \u2192 \uc804\uccb4 UI\ub97c Virtual DOM\uc5d0 \ub9ac\ub80c\ub354\ub9c1.<\/p>\n\n\n\n<p>\u2461 \uc774\uc804 Virtual DOM\uacfc \ud604\uc7ac\ub97c \ube44\uad50 : \uac00\uc0c1\ub3d4\ub07c\ub9ac \ube44\uad50<\/p>\n\n\n\n<p>\u2462 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \uc5c5\ub370\uc774\ud2b8<\/p>\n\n\n\n<p>\uc989, \uac04\ub2e8\ud788 \uc694\uc57d\ud558\uc790\uba74:<\/p>\n\n\n\n<p>\uae30\uc874 : \ud654\uba74\uc758 \uc77c\ubd80\uac00 \uc218\uc815\ub418\uba74 \ud654\uba74 \uc804\uccb4\ub97c \uc5c5\ub370\uc774\ud2b8.<\/p>\n\n\n\n<p>\uac00\uc0c1 DOM \ub3c4\uc785 : \uc774\uc804 UI\uc5d0\uc11c&nbsp;<strong>\ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \ubc18\uc601\ud558\uc5ec \uc5c5\ub370\uc774\ud2b8<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1) \ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5 (1) \ucef4\ud3ec\ub10c\ud2b8(Component) \uc7ac\uc0ac\uc6a9\uc774 \uac00\ub2a5\ud55c \uac01\uac01\uc758 \uc791\uace0 \ub3c5\ub9bd\uc801\uc778 \ubaa8\ub4c8. \ub9c8\uce58 \ub808\uace0 \ube14\ub7ed&#8230; \uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ud654\uba74\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\uc131\ud558\ub294 \uac83\uc774 \ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5. \ud83c\udf1f \ucef4\ud3ec\ub10c\ud2b8\uc758 \uad6c\uc131\uc694\uc18c (2) \uac00\uc0c1\ub3d4(Virtual DOM) \u270d\ud83c\udffb \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud654\uba74\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \uacfc\uc815 \uc11c\ubc84\ub85c\ubd80\ud130 \ubc1b\ub294 \ud30c\uc77c\uc744 \ud30c\uc2f1\ud558\uc5ec DOM Tree\uc640 CSSOM Tree\ub97c \ub9cc\ub4e4\uace0 \uacb0\ud569 : \ub80c\ub354\ud2b8\ub9ac(Render Tree) \uc0dd\uc131. \uc0dd\uc131\ud55c Render Tree\ub85c&nbsp; Layout\uc744 \uacc4\uc0b0\ud558\uace0 \ub9cc\ub4e0 [&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-92","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\/92","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=92"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}