{"id":190,"date":"2026-06-26T13:33:17","date_gmt":"2026-06-26T13:33:17","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=190"},"modified":"2026-06-26T13:33:17","modified_gmt":"2026-06-26T13:33:17","slug":"%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%ec%a0%84%eb%9e%b5","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=190","title":{"rendered":"\ucef4\ud3ec\ub10c\ud2b8-\uc804\ub7b5"},"content":{"rendered":"<h2>\ub9ac\uc561\ud2b8\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5<\/h2>\n<p>\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5\uc740<br \/>\n<strong>\uc7ac\uc0ac\uc6a9\uc131, \uc720\uc9c0\ubcf4\uc218\uc131, \uc131\ub2a5\uc744 \uadf9\ub300\ud654\ud558\uc5ec \ud6a8\uc728\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ub2e4\uc591\ud55c \uc124\uacc4 \uc6d0\uce59\uacfc \ud328\ud134<\/strong>\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<br \/>\n\ub2e4\uc74c\uc740 \ub300\ud45c\uc801\uc778 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5\uc785\ub2c8\ub2e4.<br \/>\n<strong>1. \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac \uc6d0\uce59<\/strong><\/p>\n<ul>\n<li><strong>\ub2e8\uc77c \ucc45\uc784 \uc6d0\uce59(SRP, Single Responsibility Principle):<\/strong>\u00a0\ud558\ub098\uc758 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud558\ub098\uc758 \uc5ed\ud560\ub9cc \uc218\ud589\ud558\ub3c4\ub85d \uc124\uacc4\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \uc694\uccad \ub85c\uc9c1\uacfc UI \ub80c\ub354\ub9c1 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub354 \uac04\uacb0\ud574\uc9c0\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc774 \ub192\uc544\uc9d1\ub2c8\ub2e4.<\/li>\n<li><strong>\uc6d0\uc790\uc801 \ub514\uc790\uc778(Atomic Design):<\/strong>\u00a0UI\ub97c \uc6d0\uc790(atoms), \ubd84\uc790(molecules), \uc720\uae30\uccb4(organisms), \ud15c\ud50c\ub9bf(templates), \ud398\uc774\uc9c0(pages)\uc758 5\ub2e8\uacc4\ub85c \ub098\ub204\uc5b4 \uacc4\uce35\uc801\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc124\uacc4\ud569\ub2c8\ub2e4.\n<ul>\n<li><strong>\uc6d0\uc790(Atomic):<\/strong>\u00a0\ubc84\ud2bc, \uc785\ub825\ucc3d \ub4f1 \ub354 \uc774\uc0c1 \ubd84\ud574\ud560 \uc218 \uc5c6\ub294 \uac00\uc7a5 \uc791\uc740 \ub2e8\uc704.<\/li>\n<li><strong>\ubd84\uc790(Molecules):<\/strong>\u00a0\uc6d0\uc790\ub97c \uc870\ud569\ud558\uc5ec \ub9cc\ub4e0 \uac80\uc0c9\ucc3d\uacfc \uac19\uc740 \ub2e8\uc704.<\/li>\n<li><strong>\uc720\uae30\uccb4(Organisms):<\/strong>\u00a0\ubd84\uc790\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ub9cc\ub4e0 \ud5e4\ub354, \ud478\ud130\uc640 \uac19\uc740 \ub2e8\uc704.<\/li>\n<li><strong>\ud15c\ud50c\ub9bf(Templates):<\/strong>\u00a0\uc720\uae30\uccb4\ub85c \ud398\uc774\uc9c0\uc758 \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud558\ub294 \ub2e8\uacc4.<\/li>\n<li><strong>\ud398\uc774\uc9c0(Pages):<\/strong>\u00a0\uc2e4\uc81c \ub370\uc774\ud130\uac00 \uc801\uc6a9\ub41c \ucd5c\uc885 \ud654\uba74.<br \/>\n<strong>2. \ucef4\ud3ec\ub10c\ud2b8 \ud328\ud134<\/strong><\/li>\n<\/ul>\n<\/li>\n<li><strong>\ucee8\ud14c\uc774\ub108\/\ud504\ub9ac\uc820\ud14c\uc774\uc154\ub110 \ud328\ud134(Container\/Presentational Pattern):<\/strong>\n<ul>\n<li><strong>\ud504\ub9ac\uc820\ud14c\uc774\uc154\ub110 \ucef4\ud3ec\ub10c\ud2b8:<\/strong>\u00a0\ub370\uc774\ud130\ub098 \ub85c\uc9c1 \uc5c6\uc774 UI\ub9cc \ub80c\ub354\ub9c1\ud558\ub294 \uc5ed\ud560.<\/li>\n<li><strong>\ucee8\ud14c\uc774\ub108 \ucef4\ud3ec\ub10c\ud2b8:<\/strong>\u00a0\ub370\uc774\ud130 \uad00\ub9ac, \uc0c1\ud0dc \ub85c\uc9c1 \ucc98\ub9ac, API \ud638\ucd9c \ub4f1\uc744 \ub2f4\ub2f9\ud558\uace0, \ud504\ub9ac\uc820\ud14c\uc774\uc154\ub110 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\uace0\ucc28 \ucef4\ud3ec\ub10c\ud2b8(HOC, Higher-Order Component):<\/strong>\u00a0\ucef4\ud3ec\ub10c\ud2b8\ub97c \uc778\uc218\ub85c \ubc1b\uc544 \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218. \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub85c\uc9c1\uc744 \uc7ac\uc0ac\uc6a9\ud558\ub294 \ub370 \uc720\uc6a9\ud558\uc9c0\ub9cc, \ucd5c\uc2e0 React\uc5d0\uc11c\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc774 \ub354 \uc120\ud638\ub429\ub2c8\ub2e4.<\/li>\n<li><strong>\ub80c\ub354 \ud504\ub86d\uc2a4 \ud328\ud134(Render Props Pattern):<\/strong>\u00a0\uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uac8c props\ub85c \ud568\uc218\ub97c \uc804\ub2ec\ud558\uc5ec \ub85c\uc9c1\uc744 \uacf5\uc720\ud558\ub294 \ubc29\uc2dd.<\/li>\n<li><strong>\ucef4\ud30c\uc6b4\ub4dc \ucef4\ud3ec\ub10c\ud2b8 \ud328\ud134(Compound Component Pattern):<\/strong>\u00a0<code>&lt;Select&gt;<\/code>\uc640\u00a0<code>&lt;Select.Option&gt;<\/code>\ucc98\ub7fc \ud568\uaed8 \uc0ac\uc6a9\ub420 \ub54c \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uadf8\ub8f9\uc744 \ub9cc\ub4dc\ub294 \ud328\ud134. Context API\ub97c \ud65c\uc6a9\ud574 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uacf5\uc720\ud569\ub2c8\ub2e4.<\/li>\n<li><strong>\ucee4\uc2a4\ud140 \ud6c5 \ud328\ud134(Custom Hook Pattern):<\/strong>\u00a0\uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc7ac\uc0ac\uc6a9\ub418\ub294 \ub85c\uc9c1\uc744\u00a0<code>use<\/code>\ub85c \uc2dc\uc791\ud558\ub294 \ud568\uc218\ub85c \ubd84\ub9ac\ud558\ub294 \uc804\ub7b5. \uc0c1\ud0dc \uad00\ub9ac, \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1 \ub4f1 \ud2b9\uc815 \uae30\ub2a5\uc744 \ucd94\uc0c1\ud654\ud558\uc5ec \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc785\ub2c8\ub2e4.<br \/>\n<strong>3. \uc131\ub2a5 \ucd5c\uc801\ud654 \uc804\ub7b5<\/strong><\/li>\n<li><strong>\ub80c\ub354\ub9c1 \uc804\ub7b5 \uc120\ud0dd:<\/strong>\n<ul>\n<li><strong>\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8:<\/strong>\u00a0\uc0ac\uc6a9\uc790\uc640 \uc0c1\ud638\uc791\uc6a9\uc774 \ud544\uc694\ud55c \ub3d9\uc801 UI\ub97c \ub80c\ub354\ub9c1.<\/li>\n<li><strong>\ub9ac\uc561\ud2b8 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8(RSC):<\/strong>\u00a0\uc11c\ubc84\uc5d0\uc11c \ubbf8\ub9ac \ub80c\ub354\ub9c1\ub418\uc5b4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc804\uc1a1\ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubc88\ub4e4 \ud06c\uae30\ub97c \uc904\uc5ec \ucd08\uae30 \ub85c\ub529 \uc18d\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\ubd88\ud544\uc694\ud55c \ub9ac\ub80c\ub354\ub9c1 \ubc29\uc9c0:<\/strong>\n<ul>\n<li><code>React.memo<\/code>: props\uac00 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub9ac\ub80c\ub354\ub9c1\uc744 \uac74\ub108\ub6f0\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/li>\n<li><code>useMemo<\/code>: \uacc4\uc0b0\ub7c9\uc774 \ub9ce\uc740 \uac12\uc758 \uacb0\uacfc\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec \uc7ac\uacc4\uc0b0\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.<\/li>\n<li><code>useCallback<\/code>: \uc758\uc874\uc131\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \ud568\uc218\uc758 \uc7ac\uc0dd\uc131\uc744 \ubc29\uc9c0\ud558\uc5ec \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \ubd88\ud544\uc694\ud55c \ub9ac\ub80c\ub354\ub9c1\uc744 \ub9c9\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30(Lifting State Up):<\/strong>\u00a0\uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub3d9\uc77c\ud55c \uc0c1\ud0dc\ub97c \uacf5\uc720\ud574\uc57c \ud560 \ub54c, \uacf5\ud1b5\uc758 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc0c1\ud0dc\ub97c \uc774\ub3d9\uc2dc\ud0a4\ub294 \uc804\ub7b5.<\/li>\n<li><strong>\uc0c1\ud0dc \uad00\ub9ac:<\/strong>\u00a0\ucef4\ud3ec\ub10c\ud2b8 \uac04 \uc0c1\ud0dc \uacf5\uc720\uac00 \ubcf5\uc7a1\ud574\uc9c8 \uacbd\uc6b0, Context API \ub610\ub294 Redux, Zustand \uac19\uc740 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5\uc740 \uc7ac\uc0ac\uc6a9\uc131, \uc720\uc9c0\ubcf4\uc218\uc131, \uc131\ub2a5\uc744 \uadf9\ub300\ud654\ud558\uc5ec \ud6a8\uc728\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ub2e4\uc591\ud55c \uc124\uacc4 \uc6d0\uce59\uacfc \ud328\ud134\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ub300\ud45c\uc801\uc778 \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uc804\ub7b5\uc785\ub2c8\ub2e4. 1. \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac \uc6d0\uce59 \ub2e8\uc77c \ucc45\uc784 \uc6d0\uce59(SRP, Single Responsibility Principle):\u00a0\ud558\ub098\uc758 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud558\ub098\uc758 \uc5ed\ud560\ub9cc \uc218\ud589\ud558\ub3c4\ub85d \uc124\uacc4\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \uc694\uccad \ub85c\uc9c1\uacfc UI \ub80c\ub354\ub9c1 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub354 \uac04\uacb0\ud574\uc9c0\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc774 \ub192\uc544\uc9d1\ub2c8\ub2e4. \uc6d0\uc790\uc801 \ub514\uc790\uc778(Atomic &#8230; <a title=\"\ucef4\ud3ec\ub10c\ud2b8-\uc804\ub7b5\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=190\" aria-label=\"\ucef4\ud3ec\ub10c\ud2b8-\uc804\ub7b5\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=190"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/190\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}