{"id":685,"date":"2025-02-28T15:43:00","date_gmt":"2025-02-28T06:43:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=685"},"modified":"2025-02-25T19:50:39","modified_gmt":"2025-02-25T10:50:39","slug":"react-library-zustand","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=685","title":{"rendered":"React Library &#8211; Zustand"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<figure class=\"wp-container-2 wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"800\" height=\"467\" data-id=\"687\"  src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/zustand.png\" alt=\"\" class=\"wp-image-687\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/zustand.png 800w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/zustand-300x175.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/zustand-768x448.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub294 \ud544\uc218\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. React\uc758 \uae30\ubcf8 \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\uc778 <code>useState<\/code>\uc640 <code>useReducer<\/code>\ub294 \uac04\ub2e8\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ucda9\ubd84\ud558\uc9c0\ub9cc, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ucee4\uc9c8\uc218\ub85d \ub354 \uac15\ub825\ud558\uace0 \uc720\uc5f0\ud55c \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\uac00 \ud544\uc694\ud574\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>Zustand<\/strong>\ub294 \uc774\ub7ec\ud55c \uc694\uad6c\ub97c \ucda9\uc871\uc2dc\ud0a4\ub294 \uac00\ubccd\uace0 \uc9c1\uad00\uc801\uc778 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucd5c\uadfc \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uc0ac\ub791\ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Zustand\uc758 \uc8fc\uc694 \ud2b9\uc9d5, \uc0ac\uc6a9\ubc95, \ub2e4\ub978 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640\uc758 \ube44\uad50, \uadf8\ub9ac\uace0 Zustand\uac00 \uc0ac\ub791\ubc1b\ub294 \uc774\uc720\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>Zustand\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n<p><strong>Zustand<\/strong>\ub294 \ub3c5\uc77c\uc5b4\ub85c &#8220;\uc0c1\ud0dc(state)&#8221;\ub97c \uc758\ubbf8\ud558\uba70, React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub97c \uac04\ub2e8\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. Redux, Recoil\uacfc \uac19\uc740 \ub2e4\ub978 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ube44\uad50\ud588\uc744 \ub54c, Zustand\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ud2b9\uc9d5\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<h4>\uc8fc\uc694 \ud2b9\uc9d5<\/h4>\n\n\n\n<ol><li><strong>\uac00\ubccd\uace0 \ube60\ub984<\/strong>: Zustand\ub294 \uc57d 1KB\uc758 \uc791\uc740 \ud06c\uae30\ub85c, \uc131\ub2a5 \ucd5c\uc801\ud654\uac00 \ub0b4\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>React\uc5d0 \uc885\uc18d\uc801\uc774\uc9c0 \uc54a\uc74c<\/strong>: React \uc678\uc758 \ud658\uacbd\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uc9c1\uad00\uc801\uc778 API<\/strong>: \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0 \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc774 \uac04\ub2e8\ud558\uba70, \ub7ec\ub2dd \ucee4\ube0c\uac00 \ub0ae\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uc120\ud0dd\uc801 \uc0c1\ud0dc \uad6c\ub3c5<\/strong>: \ud544\uc694\ud55c \uc0c1\ud0dc\ub9cc \uad6c\ub3c5\ud560 \uc218 \uc788\uc5b4 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.<\/li><li><strong>\ubbf8\ub4e4\uc6e8\uc5b4 \uc9c0\uc6d0<\/strong>: Redux DevTools\uc640 \uac19\uc740 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc27d\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:47px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>Zustand \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n\n\n\n<p>Zustand\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95\uc740 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0, \uc774\ub97c \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h4>1. \uc0c1\ud0dc \uc815\uc758\ud558\uae30<\/h4>\n\n\n\n<p>Zustand\uc5d0\uc11c\ub294 <code>create<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud574 \uc0c1\ud0dc\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc0c1\ud0dc \uc815\uc758 \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { create } from 'zustand';\n\nconst useStore = create((set) =&gt; ({\n  count: 0,\n  increase: () =&gt; set((state) =&gt; ({ count: state.count + 1 })),\n  decrease: () =&gt; set((state) =&gt; ({ count: state.count - 1 })),\n}));<\/code><\/pre>\n\n\n\n<ul><li><code>useStore<\/code>\ub294 Zustand\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.<\/li><li><code>count<\/code>\ub294 \uc0c1\ud0dc \uac12\uc774\uba70, <code>increase<\/code>\uc640 <code>decrease<\/code>\ub294 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><li><code>set<\/code> \ud568\uc218\ub294 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h4>2. \uc0c1\ud0dc \uc0ac\uc6a9\ud558\uae30<\/h4>\n\n\n\n<p>\uc815\uc758\ud55c \uc0c1\ud0dc\ub294 React \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { useStore } from '.\/store'; \/\/ \uc0c1\ud0dc \uc815\uc758 \ud30c\uc77c\n\nfunction Counter() {\n  const { count, increase, decrease } = useStore();\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Count: {count}&lt;\/h1&gt;\n      &lt;button onClick={increase}&gt;Increase&lt;\/button&gt;\n      &lt;button onClick={decrease}&gt;Decrease&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n\n\n\n<div style=\"height:61px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>Zustand\uc758 \uace0\uae09 \uae30\ub2a5<\/h2>\n\n\n\n<p>Zustand\ub294 \uae30\ubcf8\uc801\uc778 \uc0c1\ud0dc \uad00\ub9ac \uc678\uc5d0\ub3c4 \ub2e4\uc591\ud55c \uace0\uae09 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4>1. \uc120\ud0dd\uc801 \uc0c1\ud0dc \uad6c\ub3c5<\/h4>\n\n\n\n<p>Zustand\ub294 \uc0c1\ud0dc\uc758 \ud2b9\uc815 \ubd80\ubd84\ub9cc \uad6c\ub3c5\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const count = useStore((state) =&gt; state.count);<\/code><\/pre>\n\n\n\n<p>\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 <code>count<\/code> \uc0c1\ud0dc\ub9cc \uad6c\ub3c5\ud558\ubbc0\ub85c, \ub2e4\ub978 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\ub354\ub77c\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4>2. \ube44\ub3d9\uae30 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8<\/h4>\n\n\n\n<p>Zustand\ub294 \ube44\ub3d9\uae30 \uc791\uc5c5\ub3c4 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, API \ud638\ucd9c\uc744 \ud1b5\ud574 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uacbd\uc6b0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const useStore = create((set) =&gt; ({\n  data: null,\n  fetchData: async () =&gt; {\n    const response = await fetch('&lt;https:\/\/api.example.com\/data&gt;');\n    const data = await response.json();\n    set({ data });\n  },\n}));<\/code><\/pre>\n\n\n\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4>3. \ubbf8\ub4e4\uc6e8\uc5b4 \uc0ac\uc6a9<\/h4>\n\n\n\n<p>Zustand\ub294 Redux DevTools\uc640 \uac19\uc740 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc27d\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc \ubcc0\uacbd \ub0b4\uc5ed\uc744 \ucd94\uc801\ud558\uac70\ub098 \ub514\ubc84\uae45\ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { create } from 'zustand';\nimport { devtools } from 'zustand\/middleware';\n\nconst useStore = create(\n  devtools((set) =&gt; ({\n    count: 0,\n    increase: () =&gt; set((state) =&gt; ({ count: state.count + 1 })),\n  }))\n);<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>Zustand vs Redux vs Recoil<\/h2>\n\n\n\n<p>Zustand, Redux, Recoil\uc740 \ubaa8\ub450 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uac01 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uace0\uc720\ud55c \ud2b9\uc9d5\uacfc \uc7a5\ub2e8\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \ud504\ub85c\uc81d\ud2b8\uc758 \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub530\ub77c \uc801\ud569\ud55c \uc120\ud0dd\uc774 \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uc138 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ube44\uad50\ud55c \ud45c\uc785\ub2c8\ub2e4:<\/p>\n\n\n\n<h4><strong>1. \ub7ec\ub2dd \ucee4\ube0c<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: \ub9e4\uc6b0 \uac04\ub2e8\ud55c API\ub85c \ud559\uc2b5\uc774 \uc27d\uace0 \ube60\ub985\ub2c8\ub2e4. \uc0c1\ud0dc \uad00\ub9ac\uc5d0 \ub300\ud55c \uae30\ubcf8 \uac1c\ub150\ub9cc \uc54c\uba74 \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: \ud559\uc2b5 \uace1\uc120\uc774 \ub2e4\uc18c \uac00\ud30c\ub985\ub2c8\ub2e4. Redux Toolkit\uc744 \uc0ac\uc6a9\ud558\uba74 \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8\uac00 \uc904\uc5b4\ub4e4\uc9c0\ub9cc, \uc5ec\uc804\ud788 \uc561\uc158, \ub9ac\ub4c0\uc11c, \ubbf8\ub4e4\uc6e8\uc5b4 \ub4f1 \uac1c\ub150\uc744 \uc774\ud574\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: React\uc640 \uc720\uc0ac\ud55c \ubc29\uc2dd\uc73c\ub85c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \ub54c\ubb38\uc5d0 React\ub97c \uc798 \uc54c\uace0 \uc788\ub2e4\uba74 \uc27d\uac8c \ubc30\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>2. \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc\uac00 \uac70\uc758 \uc5c6\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0 \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: Redux Toolkit\uc744 \uc0ac\uc6a9\ud558\uba74 \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8\uac00 \ub9ce\uc774 \uc904\uc5b4\ub4e4\uc5c8\uc9c0\ub9cc, \uc5ec\uc804\ud788 \uc561\uc158\uacfc \ub9ac\ub4c0\uc11c\ub97c \uc791\uc131\ud574\uc57c \ud558\ubbc0\ub85c \ucf54\ub4dc\uac00 \ub2e4\uc18c \ub9ce\uc544\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8\uac00 \uc801\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc\ub97c atom\uacfc selector\ub85c \uc815\uc758\ud558\uba74 \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>3. React \uc758\uc874\uc131<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: React\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uc73c\uba70, React \uc678\uc758 \ud658\uacbd\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: React\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uc73c\uba70, \ub2e4\uc591\ud55c \ud658\uacbd\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: React \uc804\uc6a9 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, React\uc5d0 \uac15\ud558\uac8c \uc758\uc874\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>4. \ube44\ub3d9\uae30 \ucc98\ub9ac<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: \ube44\ub3d9\uae30 \ucc98\ub9ac\ub294 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud1b5\ud574 \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ub418\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: \ube44\ub3d9\uae30 \ucc98\ub9ac\ub294 Redux Thunk\ub098 Redux Saga \uac19\uc740 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud1b5\ud574 \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: \ube44\ub3d9\uae30 \uc0c1\ud0dc \uad00\ub9ac\ub97c \uae30\ubcf8\uc801\uc73c\ub85c \uc9c0\uc6d0\ud558\uba70, selector\ub97c \ud1b5\ud574 \uac04\ub2e8\ud788 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>5. \uc131\ub2a5 \ucd5c\uc801\ud654<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: React Context\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uae30\ubcf8\uc801\uc73c\ub85c \uc131\ub2a5\uc774 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc \ubcc0\uacbd \uc2dc \uad00\ub828\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub9cc \ub9ac\ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: \uc0c1\ud0dc \ubcc0\uacbd \uc2dc \uc804\uccb4 \uc2a4\ud1a0\uc5b4\uac00 \uc5c5\ub370\uc774\ud2b8\ub418\ubbc0\ub85c, \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud574 memoization\uc774\ub098 React.memo\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: \uc0c1\ud0dc\ub97c atom \ub2e8\uc704\ub85c \uad00\ub9ac\ud558\uae30 \ub54c\ubb38\uc5d0 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ucd5c\uc801\ud654\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4><strong>6. \uc0ac\uc6a9 \uc0ac\ub840<\/strong><\/h4>\n\n\n\n<ul><li><strong>Zustand<\/strong>: \uc18c\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\ub098 \uac04\ub2e8\ud55c \uc0c1\ud0dc \uad00\ub9ac\uac00 \ud544\uc694\ud55c \uacbd\uc6b0 \uc801\ud569\ud569\ub2c8\ub2e4. \ube60\ub978 \uac1c\ubc1c\uc774 \ud544\uc694\ud55c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc720\ub9ac\ud569\ub2c8\ub2e4.<\/li><li><strong>Redux<\/strong>: \ub300\uaddc\ubaa8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\uc758 \uc608\uce21 \uac00\ub2a5\uc131\uacfc \uccb4\uacc4\uc801\uc778 \uad00\ub9ac\uac00 \ud544\uc694\ud55c \uacbd\uc6b0 \uc801\ud569\ud569\ub2c8\ub2e4.<\/li><li><strong>Recoil<\/strong>: React \uae30\ubc18 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ube44\ub3d9\uae30 \uc0c1\ud0dc \uad00\ub9ac\uac00 \uc911\uc694\ud55c \uacbd\uc6b0\ub098 React Suspense\ub97c \ud65c\uc6a9\ud55c \ub370\uc774\ud130 \ud328\uce6d\uc774 \ud544\uc694\ud55c \uacbd\uc6b0 \uc801\ud569\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:42px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>Zustand\uac00 \uc0ac\ub791\ubc1b\ub294 \uc774\uc720<\/h2>\n\n\n\n<p>Zustand\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc720\ub85c \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uc0ac\ub791\ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\uac04\ub2e8\ud558\uace0 \uc9c1\uad00\uc801\uc778 API<\/strong>: \uc0c1\ud0dc \uc815\uc758\uc640 \uc0ac\uc6a9\uc774 \ub9e4\uc6b0 \uac04\ub2e8\ud558\uba70, \ub7ec\ub2dd \ucee4\ube0c\uac00 \ub0ae\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1 \ubc29\uc9c0<\/strong>: \uc120\ud0dd\uc801 \uc0c1\ud0dc \uad6c\ub3c5\uc744 \ud1b5\ud574 \uc131\ub2a5 \ucd5c\uc801\ud654\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li><li><strong>React\uc5d0 \uc885\uc18d\uc801\uc774\uc9c0 \uc54a\uc74c<\/strong>: React \uc678\uc758 \ud658\uacbd\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4 \uc720\uc5f0\uc131\uc774 \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4.<\/li><li><strong>\ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uac04\ud3b8\ud55c \ucc98\ub9ac<\/strong>: \ubbf8\ub4e4\uc6e8\uc5b4 \uc5c6\uc774\ub3c4 \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uac00\ubcbc\uc6b4 \ud06c\uae30\uc640 \ub6f0\uc5b4\ub09c \uc131\ub2a5<\/strong>: \uc57d 1KB\uc758 \uc791\uc740 \ud06c\uae30\ub85c, \ubc88\ub4e4 \ud06c\uae30\ub97c \ucd5c\uc18c\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ubbf8\ub4e4\uc6e8\uc5b4\uc640\uc758 \uc26c\uc6b4 \ud1b5\ud569<\/strong>: Redux DevTools\uc640 \uac19\uc740 \ub3c4\uad6c\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ucee4\ubba4\ub2c8\ud2f0\uc640 \ubb38\uc11c\uc758 \uc131\uc7a5<\/strong>: \uacf5\uc2dd \ubb38\uc11c\uac00 \uac04\uacb0\ud558\uace0 \uc774\ud574\ud558\uae30 \uc26c\uc6b0\uba70, \ucee4\ubba4\ub2c8\ud2f0\uac00 \ud65c\ubc1c\ud788 \uc131\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>\ub9c8\ubb34\ub9ac<\/h2>\n\n\n\n<p>Zustand\ub294 \uac00\ubccd\uace0 \uac15\ub825\ud55c \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uac04\ub2e8\ud55c API\uc640 \ub6f0\uc5b4\ub09c \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc18c\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\ubd80\ud130 \ub300\uaddc\ubaa8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uae4c\uc9c0 \ub2e4\uc591\ud55c \uc0c1\ud669\uc5d0\uc11c \uc801\ud569\ud558\uba70, \uc0c1\ud0dc \uad00\ub9ac\ub97c \uac04\uc18c\ud654\ud558\uace0 \uac1c\ubc1c \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>Zustand\ub97c \uc0ac\uc6a9\ud574 \ud504\ub85c\uc81d\ud2b8\uc758 \uc0c1\ud0dc \uad00\ub9ac\ub97c \uac04\ub2e8\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud574\ubcf4\uc138\uc694.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"210\" height=\"210\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png\" alt=\"\" class=\"wp-image-641\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub294 \ud544\uc218\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. React\uc758 \uae30\ubcf8 \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\uc778 useState\uc640 useReducer\ub294 \uac04\ub2e8\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ucda9\ubd84\ud558\uc9c0\ub9cc, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ucee4\uc9c8\uc218\ub85d \ub354 \uac15\ub825\ud558\uace0 \uc720\uc5f0\ud55c \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\uac00 \ud544\uc694\ud574\uc9d1\ub2c8\ub2e4. Zustand\ub294 \uc774\ub7ec\ud55c \uc694\uad6c\ub97c \ucda9\uc871\uc2dc\ud0a4\ub294 \uac00\ubccd\uace0 \uc9c1\uad00\uc801\uc778 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucd5c\uadfc \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uc0ac\ub791\ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Zustand\uc758 \uc8fc\uc694 \ud2b9\uc9d5, \uc0ac\uc6a9\ubc95, \ub2e4\ub978 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640\uc758 \ube44\uad50, \uadf8\ub9ac\uace0 Zustand\uac00 \uc0ac\ub791\ubc1b\ub294 \uc774\uc720\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Zustand\ub780 \ubb34\uc5c7\uc778\uac00? [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,72,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/685"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=685"}],"version-history":[{"count":2,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/685\/revisions\/706"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}