{"id":247,"date":"2025-10-29T14:30:00","date_gmt":"2025-10-29T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=247"},"modified":"2025-10-28T11:32:27","modified_gmt":"2025-10-28T02:32:27","slug":"context-api-vs-%e1%84%89%e1%85%a1%e1%86%bc%e1%84%90%e1%85%a2%e1%84%80%e1%85%aa%e1%86%ab%e1%84%85%e1%85%b5-%e1%84%85%e1%85%a1%e1%84%8b%e1%85%b5%e1%84%87%e1%85%b3%e1%84%85%e1%85%a5%e1%84%85%e1%85%b5","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=247","title":{"rendered":"Context API vs \u1109\u1161\u11bc\u1110\u1162\u1100\u116a\u11ab\u1105\u1175 \u1105\u1161\u110b\u1175\u1107\u1173\u1105\u1165\u1105\u1175"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\uc0c1\ud0dc\uad00\ub9ac\ub294 \uc65c \ud544\uc694\ud55c\uac00?<\/h2>\n\n\n\n<p>\ub9ac\uc561\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \uac00\uc9c4\ub2e4.<\/p>\n\n\n\n<p>\ubd80\ubaa8 \u2192 \uc790\uc2dd\uc73c\ub85c props\ub85c \uc804\ub2ec\ud558\uba70 UI\ub97c \uad6c\uc131\ud558\ub294\ub370, \uc571\uc774 \ucee4\uc9c8\uc218\ub85d \uc774 \uad6c\uc870\uc5d0\uc11c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>\uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uac19\uc740 \ub370\uc774\ud130\ub97c \ud544\uc694\ub85c \ud558\uac70\ub098, \uc911\ucca9 \uc804\ub2ec\uc774 \ubc18\ubcf5\ub418\uace0 \uc774\ubca4\ud2b8\uac00 \uae4a\uc740 \uc790\uc2dd\uc5d0\uc11c \ubc1c\uc0dd\ud574 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc601\ud5a5\uc744 \uc8fc\ub294 \ub4f1\uc758 \uc0c1\ud669\uc744 \ub9c8\uc8fc\ud558\uac8c \ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub370\uc774\ud130 \uacf5\uc720\ub97c \uc27d\uac8c \ub9cc\ub4dc\ub294 \uad6c\uc870\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p>\u2192 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac \ub3c4\uc785\uc758 \ud544\uc694\uc131<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Context API<\/h2>\n\n\n\n<p>\ub9ac\uc561\ud2b8\uc5d0\uc11c \uae30\ubcf8\uc73c\ub85c \uc81c\uacf5\ud558\ub294 \uc804\uc5ed \uc0c1\ud0dc \ucee8\ud14d\uc2a4\ud2b8\ub85c, props drilling(\uc911\ucca9 \uc804\ub2ec)\uc744 \uc904\uc774\uae30 \uc704\ud574 \uc124\uacc4\ub418\uc5c8\ub2e4.<\/p>\n\n\n\n<p>\ub9ac\uc561\ud2b8 \ub0b4\uc7a5 \uae30\ub2a5\uc73c\ub85c \ud3b8\ud558\uac8c \uc0ac\uc6a9 \uac00\ub2a5(createContext, useContext)\ud558\uba70, Provider \u2192 Consumer \uad6c\uc870\ub85c \uc804\uc5ed \ub370\uc774\ud130\ub97c \uacf5\uc720\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const ThemeContext = createContext();\nfunction App() {\n  return (\n    &lt;ThemeContext.Provider value=\"dark\"&gt;\n      &lt;Toolbar \/&gt;\n    &lt;\/ThemeContext.Provider&gt;\n  );\n}\nfunction Toolbar() {\n  const theme = useContext(ThemeContext);\n  return &lt;Button theme={theme} \/&gt;;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uc7a5\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc678\ubd80 \uc758\uc874\uc131 X<\/li>\n\n\n\n<li>\ub2e8\uc21c\ud55c \uc804\uc5ed \uc0c1\ud0dc\uc5d0 \uc801\ud569\ud558\ub2e4. e.g. \ud14c\ub9c8, \uc5b8\uc5b4 \uc124\uc815 \ub4f1<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ub2e8\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc0c1\ud0dc\uac00 \uc790\uc8fc \ubc14\ub00c\uba74 Provider \uc804\uccb4\uac00 \ub9ac\ub80c\ub354\ub9c1 \ub41c\ub2e4.<\/li>\n\n\n\n<li>\uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \uc131\ub2a5 \uc800\ud558 \ubc0f \uad00\ub9ac \ubcf5\uc7a1\ub3c4 \uc99d\uac00.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Redux<\/h2>\n\n\n\n<p>\uc0c1\ud0dc\uc758 \uc911\uc559\uc9d1\uc911 \uad00\ub9ac \ubaa8\ub378.<\/p>\n\n\n\n<p>Redux\ub294 \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \ud558\ub098\uc758 Store\uc5d0 \ubcf4\uad00, state\ub97c \uc624\uc9c1 action\uacfc reducer\ub97c \ud1b5\ud574\uc11c\ub9cc \uc218\uc815.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const initialState = { count: 0 };\nfunction counterReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    default:\n      return state;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uc7a5\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uba85\ud655\ud55c \uc0c1\ud0dc \ucd94\uc801: action log, time travel debug \uac00\ub2a5.<\/li>\n\n\n\n<li>\ub300\uaddc\ubaa8 \ud300, \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \ud750\ub984\uc5d0\uc11c \uc77c\uad00\uc131 \uc720\uc9c0 \uc6a9\uc774.<\/li>\n\n\n\n<li>\ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud1b5\ud55c \ud655\uc7a5\uc131(redux-thunk, redux-saga \ub4f1).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ub2e8\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc\uac00 \ub9ce\uc74c(action, reducer, dispatch \ubc18\ubcf5)<\/li>\n\n\n\n<li>\ucd08\uae30 \uc9c4\uc785\uc7a5\ubcbd\uc774 \ub192\uace0, \ub2e8\uc21c \uc571\uc5d0\ub294 \uacfc\ud55c \uad6c\uc870.<\/li>\n<\/ul>\n\n\n\n<p>\u2192 \uba85\ud655\ud55c \uad6c\uc870\uc640 \uc608\uce21 \uac00\ub2a5\uc131\uc774 \ud544\uc694\ud55c \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\ud569\ud568.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zustand<\/h2>\n\n\n\n<p>Redux\uc758 \ucca0\ud559\uc744 \uc720\uc9c0\ud558\uba70 \ucf54\ub4dc \ubcf5\uc7a1\ub3c4\ub97c \ucd5c\uc18c\ud654\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac.<\/p>\n\n\n\n<p>Hook \uae30\ubc18\uc73c\ub85c Store\ud558\uba70 Context\ub098 Provider \ubd88\ud544\uc694,<\/p>\n\n\n\n<p>React\uc758 \ub9ac\ub80c\ub354\ub9c1 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud588\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const useStore = create((set) =&gt; ({\n  count: 0,\n  increment: () =&gt; set((state) =&gt; ({ count: state.count + 1 })),\n}));<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uc7a5\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub9e4\uc6b0 \uac04\ub2e8\ud55c API<\/li>\n\n\n\n<li>\ubd80\ubd84 \uad6c\ub3c5(selectors)\uc73c\ub85c \ubd88\ud544\uc694\ud55c \ub9ac\ub80c\ub354\ub9c1 \ubc29\uc9c0<\/li>\n\n\n\n<li>Immer, persist(\uc2a4\ud1a0\ub9ac\uc9c0 \uc800\uc7a5) \ub4f1 \uae30\ubcf8 \uc9c0\uc6d0.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ub2e8\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Redux\ucc98\ub7fc \uc0c1\ud0dc \ubcc0\uacbd \ucd94\uc801(logging, time travel) \uae30\ub2a5\uc740 \ubd80\uc871.<\/li>\n\n\n\n<li>\ub108\ubb34 \uc790\uc720\ub3c4\uac00 \ub192\uc74c \u2192 \uc77c\uad00\ub41c \ud328\ud134 \uc720\uc9c0 \uc5b4\ub824\uc6c0<\/li>\n<\/ul>\n\n\n\n<p>\u2192 \ub2e8\uc77c \ud398\uc774\uc9c0\ub098 \ucef4\ud3ec\ub10c\ud2b8 \uc911\uc2ec\uc758 \uc911\uac04 \uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc774\uc0c1\uc801.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recoil<\/h2>\n\n\n\n<p>React\uc5d0 \ucd5c\uc801\ud654\ub41c \uc758\uc874\uc131 \uae30\ubc18 \uc0c1\ud0dc \uad00\ub9ac.<\/p>\n\n\n\n<p>Facebook\uc774 React \uc804\uc6a9\uc73c\ub85c \uc124\uacc4\ud55c \uc0c1\ud0dc \uadf8\ub798\ud504 \uae30\ubc18 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c,<\/p>\n\n\n\n<p>\uac01 \uc0c1\ud0dc \ub2e8\uc704\ub97c atom\uc73c\ub85c \uad00\ub9ac\ud558\uba70 selector\ub97c \ud1b5\ud574 \ud30c\uc0dd \uc0c1\ud0dc(derived state)\ub97c \uacc4\uc0b0\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const countState = atom({ key: 'count', default: 0 });\nconst doubleCount = selector({\n  key: 'doubleCount',\n  get: ({ get }) =&gt; get(countState) * 2,\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uc7a5\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useState\ucc98\ub7fc \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \uc0ac\uc6a9\uc131<\/li>\n\n\n\n<li>atom \uac04 \uc758\uc874\uc131 \uc790\ub3d9 \uad00\ub9ac \u2192 \ubd80\ubd84 \ub9ac\ub80c\ub354\ub9c1 \ucd5c\uc18c\ud654<\/li>\n\n\n\n<li>React Suspense, concurrent feature\uc640 \ud638\ud658.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ub2e8\uc810<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc870\uae08 \ubd88\uc548\uc815\ud55c \uc0c1\ud0dc.<\/li>\n\n\n\n<li>\ub514\ubc84\uae45\/\ub3c4\uad6c \uc9c0\uc6d0\uc774 Redux\ub9cc\ud07c \uc131\uc219\ud558\uc9c0 \uc54a\uc74c.<\/li>\n<\/ul>\n\n\n\n<p>\u2192 React \ub0b4\ubd80 \ub3d9\uc791\uacfc \ubc00\uc811\ud558\uac8c \ud1b5\ud569, \ucc28\uc138\ub300 React \ud658\uacbd\uacfc \uc798 \ub9de\uc74c<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uadf8\ub798\uc11c \ubb58 \uc368\uc57c \ud560\uae4c?<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uad6c\ubd84<\/th><th>\ud2b9\uc9d5<\/th><th>\uc801\ud569\ud55c \uacbd\uc6b0<\/th><\/tr><\/thead><tbody><tr><td>Context API<\/td><td>\ub9ac\uc561\ud2b8 \uae30\ubcf8 \ub0b4\uc7a5, \ub2e8\uc21c\ud55c \uc804\uc5ed \ub370\uc774\ud130 \uacf5\uc720<\/td><td>\ub2e4\ud06c \ubaa8\ub4dc, \ub85c\ucf00\uc77c, \uac04\ub2e8\ud55c \uc124\uc815 \uac12<\/td><\/tr><tr><td>Redux<\/td><td>\uc911\uc559\uc9d1\uc911 + \uba85\ud655\ud55c \uc0c1\ud0dc \ud750\ub984, \ubbf8\ub4e4\uc6e8\uc5b4 \ud48d\ubd80<\/td><td>\ub300\uaddc\ubaa8 SPA, \ud611\uc5c5\uc774 \ub9ce\uc740 \ud504\ub85c\uc81d\ud2b8<\/td><\/tr><tr><td>Zustand<\/td><td>Hook \uae30\ubc18, \ucf54\ub4dc \uac04\uacb0, \ube60\ub978 \uc131\ub2a5<\/td><td>\uc2a4\ud0c0\ud2b8\uc5c5, MVP, UI \uc0c1\ud0dc \uc911\uc2ec \uc571<\/td><\/tr><tr><td>Recoil<\/td><td>atom\/selector \uae30\ubc18, React \uce5c\ud654\uc801<\/td><td>React 18+ \uae30\ubc18 \uc2e0\uaddc \ud504\ub85c\uc81d\ud2b8<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\uc0c1\ud0dc\uad00\ub9ac\ub294 \uc65c \ud544\uc694\ud55c\uac00? \ub9ac\uc561\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc744 \uac00\uc9c4\ub2e4. \ubd80\ubaa8 \u2192 \uc790\uc2dd\uc73c\ub85c props\ub85c \uc804\ub2ec\ud558\uba70 UI\ub97c \uad6c\uc131\ud558\ub294\ub370, \uc571\uc774 \ucee4\uc9c8\uc218\ub85d \uc774 \uad6c\uc870\uc5d0\uc11c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud55c\ub2e4. &nbsp; \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uac19\uc740 \ub370\uc774\ud130\ub97c \ud544\uc694\ub85c \ud558\uac70\ub098, \uc911\ucca9 \uc804\ub2ec\uc774 \ubc18\ubcf5\ub418\uace0 \uc774\ubca4\ud2b8\uac00 \uae4a\uc740 \uc790\uc2dd\uc5d0\uc11c \ubc1c\uc0dd\ud574 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc601\ud5a5\uc744 \uc8fc\ub294 \ub4f1\uc758 \uc0c1\ud669\uc744 \ub9c8\uc8fc\ud558\uac8c \ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub370\uc774\ud130 \uacf5\uc720\ub97c \uc27d\uac8c \ub9cc\ub4dc\ub294 \uad6c\uc870\uac00 \ud544\uc694\ud558\ub2e4. \u2192 \uc0c1\ud0dc \uad00\ub9ac [&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":[44,1],"tags":[174,152,100,102,176,175,177,101,173],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-frontend","category-react","tag-contextapi","tag-next-js","tag-react","tag-react-js","tag-recoil","tag-redux","tag-zustand","tag-101","tag-173"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/247","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=247"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/247\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}