https://azderica.github.io/til/assets/js/17923dde.934d3747.js

1"use strict";(self.webpackChunktil=self.webpackChunktil||[]).push([[1118],{3905:function(e,t,r){r.d(t,{Zo:function(){return c},kt:function(){return s}});var l=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,l)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,l,a=function(e,t){if(null==e)return{};var r,l,a={},n=Object.keys(e);for(l=0;l<n.length;l++)r=n[l],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(l=0;l<n.length;l++)r=n[l],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var o=l.createContext({}),d=function(e){var t=l.useContext(o),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=d(e.components);return l.createElement(o.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return l.createElement(l.Fragment,{},t)}},k=l.forwardRef((function(e,t){var r=e.components,a=e.mdxType,n=e.originalType,o=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),k=d(r),s=a,m=k["".concat(o,".").concat(s)]||k[s]||p[s]||n;return r?l.createElement(m,i(i({ref:t},c),{},{components:r})):l.createElement(m,i({ref:t},c))}));function s(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var n=r.length,i=new Array(n);i[0]=k;var u={};for(var o in t)hasOwnProperty.call(t,o)&&(u[o]=t[o]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var d=2;d<n;d++)i[d]=r[d];return l.createElement.apply(null,i)}return l.createElement.apply(null,r)}k.displayName="MDXCreateElement"},1441:function(e,t,r){r.r(t),r.d(t,{default:function(){return c},frontMatter:function(){return i},metadata:function(){return u},toc:function(){return o}});var l=r(7462),a=r(3366),n=(r(7294),r(3905)),i={sidebar_position:10},u={unversionedId:"react/react-a-to-z/ch10",id:"react/react-a-to-z/ch10",isDocsHomePage:!1,title:"10. Redux",description:"\ub9ac\ub355\uc2a4\ub780?",source:"@site/docs/react/react-a-to-z/ch10.md",sourceDirName:"react/react-a-to-z",slug:"/react/react-a-to-z/ch10",permalink:"/til/docs/react/react-a-to-z/ch10",editUrl:"https://github.com/Azderica/til/edit/master/docs/react/react-a-to-z/ch10.md",version:"current",lastUpdatedAt:1678232093,formattedLastUpdatedAt:"3/7/2023",sidebarPosition:10,frontMatter:{sidebar_position:10},sidebar:"tutorialSidebar",previous:{title:"9. React Version",permalink:"/til/docs/react/react-a-to-z/ch9"},next:{title:"\ub3c4\ucee4\ub85c \ub9ac\uc561\ud2b8 \uc2e4\ud589\ud558\uae30",permalink:"/til/docs/react/react-a-to-z/ch11"}},o=[{value:"\ub9ac\ub355\uc2a4\ub780?",id:"\ub9ac\ub355\uc2a4\ub780",children:[{value:"Props",id:"props",children:[]},{value:"State",id:"state",children:[]},{value:"Redux Store",id:"redux-store",children:[]}]},{value:"\ubbf8\ub4e4\uc6e8\uc5b4 \uc5c6\uc774 \ub9ac\ub355\uc2a4 \uce74\uc6b4\ud130 \uc571 \ub9cc\ub4e4\uae30",id:"\ubbf8\ub4e4\uc6e8\uc5b4-\uc5c6\uc774-\ub9ac\ub355\uc2a4-\uce74\uc6b4\ud130-\uc571-\ub9cc\ub4e4\uae30",children:[{value:"<code>CreateStore()</code>",id:"createstore",children:[]},{value:"<code>getState()</code>",id:"getstate",children:[]},{value:"<code>subscribe()</code>",id:"subscribe",children:[]}]},{value:"combineReducers",id:"combinereducers",children:[{value:"root reducer\uc640 sub reducer",id:"root-reducer\uc640-sub-reducer",children:[]}]},{value:"Redux Provider",id:"redux-provider",children:[{value:"Provider\ub780?",id:"provider\ub780",children:[]},{value:"Provider\ub97c \ub80c\ub354\ub9c1",id:"provider\ub97c-\ub80c\ub354\ub9c1",children:[]}]},{value:"useSelector &amp;

1 useDispatch",id:"useselector--usedispatch",children:[{value:"provider\ub85c \ub458\ub7ec \uc313\uc778 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c store\uc811\uadfc",id:"provider\ub85c-\ub458\ub7ec-\uc313\uc778-\ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c-store\uc811\uadfc",children:[]}]},{value:"\ub9ac\ub355\uc2a4 \ubbf8\ub4e4\uc6e8\uc5b4",id:"\ub9ac\ub355\uc2a4-\ubbf8\ub4e4\uc6e8\uc5b4",children:[{value:"\ub9ac\ub355\uc2a4 \ubbf8\ub4e4\uc6e8\uc5b4\ub780?",id:"\ub9ac\ub355\uc2a4-\ubbf8\ub4e4\uc6e8\uc5b4\ub780",children:[]},{value:"\ub9ac\ub355\uc2a4 \ub85c\uae45 \ubbf8\ub4e4\uc6e8\uc5b4 \uc0dd\uc131\ud558\uae30",id:"\ub9ac\ub355\uc2a4-\ub85c\uae45-\ubbf8\ub4e4\uc6e8\uc5b4-\uc0dd\uc131\ud558\uae30",children:[]}]},{value:"Redux Thunk",id:"redux-thunk",children:[{value:"\ub9ac\ub355\uc2a4 Thunk\ub780?",id:"\ub9ac\ub355\uc2a4-thunk\ub780",children:[]},{value:"Thunk \uc6a9\uc5b4\ub294?",id:"thunk-\uc6a9\uc5b4\ub294",children:[]},{value:"\ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \ud574\uc57c \ud560 \ub54c\ub294...???",id:"\ube44\ub3d9\uae30-\uc791\uc5c5\uc744-\ud574\uc57c-\ud560-\ub54c\ub294",children:[]},{value:"\uc5d0\ub7ec\uac00 \ub098\ub294 \uc774\uc720\ub294?",id:"\uc5d0\ub7ec\uac00-\ub098\ub294-\uc774\uc720\ub294",children:[]},{value:"\uacb0\ub860",id:"\uacb0\ub860",children:[]}]},{value:"\ub9ac\ub355\uc2a4 \uc775\uc2a4\ud150\uc158 \ucd94\uac00\ud558\uae30",id:"\ub9ac\ub355\uc2a4-\uc775\uc2a4\ud150\uc158-\ucd94\uac00\ud558\uae30",children:[{value:"\ub9ac\ub355\uc2a4 \uc775\uc2a4\ud150\uc158\uc774\ub780",id:"\ub9ac\ub355\uc2a4-\uc775\uc2a4\ud150\uc158\uc774\ub780",children:[]},{value:"\uc124\uce58 \ubc29\ubc95",id:"\uc124\uce58-\ubc29\ubc95",children:[]},{value:"\ub9ac\ub355\uc2a4 \ud234\ud0b7\uc5d0\uc11c\ub294...",id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7\uc5d0\uc11c\ub294",children:[]}]},{value:"\ub9ac\ub355\uc2a4 \ud234\ud0b7(redux toolkit)",id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7redux-toolkit",children:[{value:"\ub9ac\ub355\uc2a4 \ud234\ud0b7",id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7",children:[]}]}],d={toc:o};function c(e){var t=e.components,r=(0,a.Z)(e,["components"]);return(0,n.kt)("wrapper",(0,l.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h2",{id:"\ub9ac\ub355\uc2a4\ub780"},"\ub9ac\ub355\uc2a4\ub780?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Redux is a predictable state container for JavaScript apps."),(0,n.kt)("li",{parentName:"ul"},"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud55c \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac \uc785\ub2c8\ub2e4.")),(0,n.kt)("h3",{id:"props"},"Props"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"properties\uc758 \uc904\uc784\ub9d0"),(0,n.kt)("li",{parentName:"ol"},"Props\ub294 \uad6c\uc131 \uc694\uc18c\uac00 \uc11c\ub85c \ud1b5\uc2e0\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ol"},"props\ub294 \uc0c1\uc704 \uad6c\uc131 \uc694\uc18c\uc5d0\uc11c \uc544\ub798\ucabd\uc73c\ub85c \ud750\ub985\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ol"},"\ud574\ub2f9 \uac12\uc744 \ubcc0\uacbd\ud558\ub824\uba74 \uc790\uc2dd \uad00\uc810\uc5d0\uc11c Props\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\uc73c\uba70, \ubd80\ubaa8\ub294 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4.")),(0,n.kt)("h3",{id:"state"},"State"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"parent component\uc5d0\uc11c child component\ub85c data\ub97c \ubcf4\ub0b4\ub294\uac8c \uc544\ub2cc \uadf8 component \uc548\uc5d0\uc11c\ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub824\uba74? State\uc73c\ub85c \uc608\ub97c \ub4e4\uc5b4\uc11c \uac80\uc0c9 \ucc3d\uc5d0 \uae00\uc744 \uc785\ub825\ud560\ub584 \uae00\uc774 \ubcc0\ud558\ub294\uac83\uc740 state\uc744 \ubc14\uafc8"),(0,n.kt)("li",{parentName:"ol"},"State is mutable"),(0,n.kt)("li",{parentName:"ol"},"State \uc774 \ubcc0\ud558\uba74 re-render \ub429\ub2c8\ub2e4.")),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"\uadf8\ub798\uc11c Redux\ub294 State\uc744 \uad00\ub9ac\ud558\ub294 \uac83")),(0,n.kt)("p",null,(0,n.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/42582516/223134699-274f1d51-3096-4b61-b46a-b5cc08faa29a.png",alt:"Redux Data Flow"})),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Reducer\ub294 pure function\uc774\uae30\uc5d0 reducer \ub0b4\ubd80\uc5d0\uc11c \ud558\uc9c0 \ub9d0\uc544\uc57c \ud560\uac83\ub4e4 !!!",(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},"Mutate its arguments"),(0,n.kt)("li",{parentName:"ul"},"Perform side effects like API calls and routing transistions"),(0,n.kt)("li",{parentName:"ul"},"Call non-pure functions (ex. ",(0,n.kt)("inlineCode",{parentName:"li"},"Date.now()"),", ",(0,n.kt)("inlineCode",{parentName:"li"},"Math.random()"),")")))),(0,n.kt)("h3",{id:"redux-store"},"Redux Store"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\uc774\ub4e4\uc744 \ud558\ub098\ub85c \ubaa8\uc73c\ub294 \uac1d\uccb4 \uc800\uc7a5\uc18c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc804\uccb4 \uc0c1\ud0dc \ud2b8\ub9ac\ub97c \ubcf4\uc720\ud569\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"\ub0b4\ubd80 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \uc720\uc77c\ud55c \ubc29\ubc95\uc740 \ud574\ub2f9 \uc0c1\ud0dc\uc5d0 \ub300\ud55c Action\uc744 \uc804\ub2ec\ud558\ub294 \uac83\uc785\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"Redux Store\ub294 \ud074\ub798\uc2a4\uac00 \uc544\ub2d9\ub2c8\ub2e4. \uba87 \uac00\uc9c0 Methods\uac00 \uc788\ub294 \uac1d\uccb4\uc77c \ubfd0\uc785\ub2c8\ub2e4.")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"\ubbf8\ub4e4\uc6e8\uc5b4-\uc5c6\uc774-\ub9ac\ub355\uc2a4-\uce74\uc6b4\ud130-\uc571-\ub9cc\ub4e4\uae30"},"\ubbf8\ub4e4\uc6e8\uc5b4 \uc5c6\uc774 \ub9ac\ub355\uc2a4 \uce74\uc6b4\ud130 \uc571 \ub9cc\ub4e4\uae30"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"npx create-react-app my-app --template typescript")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"npm install redux --save"))),(0,n.kt)("h3",{id:"createstore"},(0,n.kt)("inlineCode",{parentName:"h3"}

1,"CreateStore()")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\uc571\uc758 \uc804\uccb4 \uc0c1\ud0dc \ud2b8\ub9ac\ub97c \ubcf4\uc720\ud558\ub294 Redux \uc800\uc7a5\uc18c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. \uc571\uc5d0\ub294 \ud558\ub098\uc758 \uc2a4\ud1a0\uc5b4\ub9cc \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.")),(0,n.kt)("h3",{id:"getstate"},(0,n.kt)("inlineCode",{parentName:"h3"},"getState()")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://redux.js.org/api/store#getstate"},"getstate")),(0,n.kt)("li",{parentName:"ul"},"\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud604\uc7ac \uc0c1\ud0dc \ud2b8\ub9ac\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \uc2a4\ud1a0\uc5b4\uc758 \ub9ac\ub4c0\uc11c\uac00 \ubc18\ud658\ud55c \ub9c8\uc9c0\ub9c9 \uac12\uacfc \uac19\uc2b5\ub2c8\ub2e4")),(0,n.kt)("h3",{id:"subscribe"},(0,n.kt)("inlineCode",{parentName:"h3"},"subscribe()")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://redux.js.org/api/store#subscribelistener"},"subscribelistener")),(0,n.kt)("li",{parentName:"ul"},"change listener\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \uc791\uc5c5\uc774 \uc804\ub2ec\ub420 \ub54c\ub9c8\ub2e4 \ud638\ucd9c\ub418\uba70 \uc0c1\ud0dc \ud2b8\ub9ac\uc758 \uc77c\ubd80\uac00 \uc7a0\uc7ac\uc801\uc73c\ub85c \ubcc0\uacbd\ub418\uc5c8\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0\ub2e4\uc74c getState()\ub97c \ud638\ucd9c\ud558\uc5ec \ucf5c\ubc31 \ub0b4\ubd80\uc758 \ud604\uc7ac \uc0c1\ud0dc \ud2b8\ub9ac\ub97c \uc77d\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"combinereducers"},"combineReducers"),(0,n.kt)("h3",{id:"root-reducer\uc640-sub-reducer"},"root reducer\uc640 sub reducer"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\ud604\uc7ac\uae4c\uc9c0 counter \ub9ac\ub4c0\uc11c\ub9cc \uc788\ub294\ub370 \ud558\ub098\ub97c \ub354 \ucd94\uac00\ud574\uc8fc\ub824\uba74 Root \ub9ac\ub4c0\uc11c\ub97c \ub9cc\ub4e4\uc5b4\uc11c \uadf8 \uc544\ub798 counter\uc640 todos\ub77c\ub294 \uc11c\ube0c(sub)\ub9ac\ub4c0\uc11c\ub97c \ub123\uc5b4\uc8fc\uba74 \ub429\ub2c8\ub2e4. "),(0,n.kt)("li",{parentName:"ul"},"Root \ub9ac\ub4c0\uc11c\ub97c \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 combineReducers \uc785\ub2c8\ub2e4.")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"redux-provider"},"Redux Provider"),(0,n.kt)("h3",{id:"provider\ub780"},"Provider\ub780?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"<Provider>")," \uad6c\uc131 \uc694\uc18c\ub294 Redux Store \uc800\uc7a5\uc18c\uc5d0 \uc561\uc138\uc2a4\ud574\uc57c \ud558\ub294 \ubaa8\ub4e0 \uc911\ucca9 \uad6c\uc131 \uc694\uc18c\uc5d0\uc11c Redux Store \uc800\uc7a5\uc18c\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"React Redux \uc571\uc758 \ubaa8\ub4e0 React \uad6c\uc131 \uc694\uc18c\ub294 \uc800\uc7a5\uc18c\uc5d0 \uc5f0\uacb0\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \ub300\ubd80\ubd84\uc758 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc740 \uc804\uccb4 \uc571\uc758 \uad6c\uc131 \uc694\uc18c \ud2b8\ub9ac\uac00 \ub0b4\ubd80\uc5d0 \uc788\ub294 \ucd5c\uc0c1\uc704 \uc218\uc900\uc5d0\uc11c ",(0,n.kt)("inlineCode",{parentName:"li"},"<Provider>"),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"\uadf8\ub7f0 \ub2e4\uc74c Hooks \ubc0f \uc5f0\uacb0 API\ub294 React\uc758 \ucee8\ud14d\uc2a4\ud2b8 \uba54\ucee4\ub2c8\uc998\uc744 \ud1b5\ud574 \uc81c\uacf5\ub41c \uc800\uc7a5\uc18c \uc778\uc2a4\ud134\uc2a4\uc5d0 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.")),(0,n.kt)("h3",{id:"provider\ub97c-\ub80c\ub354\ub9c1"},"Provider\ub97c \ub80c\ub354\ub9c1"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"React Redux \uc571\uc758 \ubaa8\ub4e0 React \uad6c\uc131 \uc694\uc18c\ub294 \uc800\uc7a5\uc18c\uc5d0 \uc5f0\uacb0\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \ub300\ubd80\ubd84\uc758 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc740 \uc804\uccb4 \uc571\uc758 \uad6c\uc131 \uc694\uc18c \ud2b8\ub9ac\uac00 \ub0b4\ubd80\uc5d0 \uc788\ub294 \ucd5c\uc0c1\uc704 \uc218\uc900\uc5d0\uc11c ",(0,n.kt)("inlineCode",{parentName:"li"},"<Provider>"),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"useselector--usedis

1patch"},"useSelector & useDispatch"),(0,n.kt)("h3",{id:"provider\ub85c-\ub458\ub7ec-\uc313\uc778-\ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c-store\uc811\uadfc"},"provider\ub85c \ub458\ub7ec \uc313\uc778 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c store\uc811\uadfc"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\ub9ac\uc561\ud2b8\uc5d0 Hooks\uac00 \uc788\ub4ef\uc774 \ub9ac\ub355\uc2a4\uc5d0\ub3c4 Hooks\uac00 \uc788\ub294\ub370 \uadf8\uac8c \ubc14\ub85c useSelector\uc640 useDispatch\uc785\ub2c8\ub2e4. \uc774 \ub450 \uac1c\ub97c \uc774\uc6a9\ud574\uc11c provider\ub85c useSelector Hooks\ub97c \uc774\uc6a9\ud574\uc11c \uc2a4\ud1a0\uc5b4\uc758 \uac12\uc744 \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"\ub9ac\ub355\uc2a4-\ubbf8\ub4e4\uc6e8\uc5b4"},"\ub9ac\ub355\uc2a4 \ubbf8\ub4e4\uc6e8\uc5b4"),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-\ubbf8\ub4e4\uc6e8\uc5b4\ub780"},"\ub9ac\ub355\uc2a4 \ubbf8\ub4e4\uc6e8\uc5b4\ub780?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Redux \ubbf8\ub4e4\uc6e8\uc5b4\ub294 \uc561\uc158\uc744 dispatch\uc804\ub2ec\ud558\uace0 \ub9ac\ub4c0\uc11c\uc5d0 \ub3c4\ub2ec\ud558\ub294 \uc21c\uac04 \uc0ac\uc774\uc5d0 \uc0ac\uc804\uc5d0 \uc9c0\uc815\ub41c \uc791\uc5c5\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc911\uac04\uc790\uc785\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"\ub85c\uae45, \ucda9\ub3cc \ubcf4\uace0, \ube44\ub3d9\uae30 API\uc640 \ud1b5\uc2e0, \ub77c\uc6b0\ud305 \ub4f1\uc744 \uc704\ud574 Redux \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.")),(0,n.kt)("p",null,(0,n.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/42582516/223285107-3f541c82-441b-4a0f-a614-14970c9b5354.png",alt:"redux-middleware"})),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-\ub85c\uae45-\ubbf8\ub4e4\uc6e8\uc5b4-\uc0dd\uc131\ud558\uae30"},"\ub9ac\ub355\uc2a4 \ub85c\uae45 \ubbf8\ub4e4\uc6e8\uc5b4 \uc0dd\uc131\ud558\uae30"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\ub9ac\ub355\uc2a4\ub97c \uc774\uc6a9\ud560 \ub54c \ub098\uc624\ub294 \ub85c\uadf8\ub97c \ucc0d\uc5b4\uc8fc\ub294 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc0dd\uc131")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-ts"},'const loggerMiddleware = (store: any) => (next: any) => (action: any) => {\n  console.log("store", store);\n  console.log("action", action);\n  next(action);\n};\n\nconst middleware = applyMiddleware(loggerMiddleware);\n')),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"applyMiddleware\ub294\ud558\ub098\ud639\uc740\ub354\ub9ce\uc740\ubbf8\ub4e4\uc6e8\uc5b4\ub97c\ubc1b\uc740\ud6c4\uc5d0\ud568\uc218\ub97c\ub9ac\ud134\ud558\ub294\ud568\uc218\uc785\ub2c8\ub2e4")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"redux-thunk"},"Redux Thunk"),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-thunk\ub780"},"\ub9ac\ub355\uc2a4 Thunk\ub780?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\ub9ac\ub355\uc2a4\ub97c \uc0ac\uc6a9\ud558\ub294 \uc571\uc5d0\uc11c \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \ud560 \ub54c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc774 redux-thunk \uc785\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"\uc774\uac83\ub3c4 \uc55e\uc11c \ub9cc\ub4e4\uc5b4\ubcf8 logger \ubbf8\ub4e4\uc6e8\uc5b4 \ucc98\ub7fc \ub9ac\ub355\uc2a4 \ubbf8\ub4e4\uc6e8\uc5b4\uc774\uba70, \ub9ac\ub355\uc2a4\ub97c \uac1c\ubc1c\ud55c D Ab \uac00 \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4")),(0,n.kt)("h3",{id:"thunk-\uc6a9\uc5b4\ub294"},"Thunk \uc6a9\uc5b4\ub294?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},'"thunk"\ub77c\ub294 \ub2e8\uc5b4\ub294 "\uc77c\ubd80 \uc9c0\uc5f0\ub41c \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 \ucf54\ub4dc \uc870\uac01"\uc744 \uc758\ubbf8\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \uc6a9\uc5b4\uc785\ub2c8\ub2e4. \uc9c0\uae08 \uc77c\ubd80 \ub17c\ub9ac(logic)\ub97c \uc2e4\ud589\ud558\ub294 \ub300\uc2e0 \ub098\uc911\uc5d0 \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 \ub370 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud568\uc218 \ubcf8\ubb38\uc774\ub098 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.')),(0,n.kt)("h3",{id:"\ube44\ub3d9\uae30-\uc791\uc5c5\uc744-\ud574\uc57c-\ud560-\ub54c\ub294"},"\ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \ud574\uc57c \ud560 \ub54c\ub294...???"),

1(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\uc5ec\ub7ec \uacbd\uc6b0\uac00 \uc788\uc9c0\ub9cc \uc11c\ubc84\uc5d0 \uc694\uccad\uc744 \ubcf4\ub0b4\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c \ub54c \uc8fc\ub85c \ube44\ub3d9\uae30 \uc694\uccad\uc744 \ubcf4\ub0c5\ub2c8\ub2e4.")),(0,n.kt)("h3",{id:"\uc5d0\ub7ec\uac00-\ub098\ub294-\uc774\uc720\ub294"},"\uc5d0\ub7ec\uac00 \ub098\ub294 \uc774\uc720\ub294?"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\uc6d0\ub798 Actions\uc740 \uac1d\uccb4\uc5ec\uc57c \ud558\ub294\ub370 \ud604\uc7ac\ub294 \ud568\uc218\ub97c Dispatch \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\uae30 \ub54c\ubb38\uc5d0 \ub098\ub294 \uc5d0\ub7ec\uc785\ub2c8\ub2e4. \uadf8\ub798\uc11c \ud568\uc218\ub97c dispatch \ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 Redux-Thunk \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc124\uce58\ud574\uc11c \uc0ac\uc6a9\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"npm install redux-thunk --save"))),(0,n.kt)("h3",{id:"\uacb0\ub860"},"\uacb0\ub860"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\uc774\ub807\uac8c \ub9ac\ub355\uc2a4 \ub358\ud06c\ub97c \uc0ac\uc6a9\ud568\uc73c\ub85c\uc368 \uc561\uc158 \uc0dd\uc131\uc790\uac00 \uadf8\uc800 \ud558\ub098\uc758 \uc561\uc158 \uac1d\uccb4\ub97c \uc0dd\uc131\ud560 \ubfd0 \uc544\ub2c8\ub77c \uadf8 \ub0b4\ubd80 \uc548\uc5d0\uc11c \uc5ec\ub7ec \uac00\uc9c0 \uc791\uc5c5\ub3c4 \ud560 \uc218 \uc788\uac8c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.")),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"\ub9ac\ub355\uc2a4-\uc775\uc2a4\ud150\uc158-\ucd94\uac00\ud558\uae30"},"\ub9ac\ub355\uc2a4 \uc775\uc2a4\ud150\uc158 \ucd94\uac00\ud558\uae30"),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-\uc775\uc2a4\ud150\uc158\uc774\ub780"},"\ub9ac\ub355\uc2a4 \uc775\uc2a4\ud150\uc158\uc774\ub780"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Redux-Devtools\ub294 Redux \uc571\uc744 \uc704\ud55c \ub514\ubc84\uae45 \ud50c\ub7ab\ud3fc\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc2dc\uac04 \uc5ec\ud589 \ub514\ubc84\uae45 \ubc0f \ub77c\uc774\ube0c \ud3b8\uc9d1\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},"\uacf5\uc2dd \ubb38\uc11c\uc758 \uc77c\ubd80 \uae30\ub2a5\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.",(0,n.kt)("ul",{parentName:"li"},(0,n.kt)("li",{parentName:"ul"},"\ubaa8\ub4e0 \uc0c1\ud0dc \ubc0f \uc791\uc5c5 \ud398\uc774\ub85c\ub4dc\ub97c \uac80\uc0ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},'\uc791\uc5c5\uc744 "\ucde8\uc18c"\ud558\uc5ec \uc2dc\uac04\uc744 \ub418\ub3cc\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.')))),(0,n.kt)("h3",{id:"\uc124\uce58-\ubc29\ubc95"},"\uc124\uce58 \ubc29\ubc95"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},"\uc775\uc2a4\ud150\uc158 \uc124\uce58\ud558\uae30"),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("ul",{parentName:"blockquote"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://chrome.google.com/webstore/detail/reduxdevtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=en"},"redux-devtools"))))),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},"\ud328\ud0a4\uc9c0 \uc124\uce58\ud558\uae30"),(0,n.kt)("blockquote",{parentName:"li"},(0,n.kt)("ul",{parentName:"blockquote"},(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"npm install redux-devtools-extension --save")))))),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7\uc5d0\uc11c\ub294"},"\ub9ac\ub355\uc2a4 \ud234\ud0b7\uc5d0\uc11c\ub294..."),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"devTools\ub97c \uc704\ud55c \ud30c\ub77c\ubbf8\ud130\uac00 \uc788\ub294\ub370 \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\uc744 \ud560\uc218\uc788\uac8c \uc124\uc815\ub418\uc5b4\uc788\uc2b5\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://redux-toolkit.js.org/api/configureStore#parameters"},"configureStore"))),(0,n.kt)("br",null),(0,n.kt)("h2",{id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7redux-toolkit"},"\ub9ac\ub355\uc2a4 \ud234\ud0b7(redux toolkit)"),(0,n.kt)("h3",{id:"\ub9ac\ub355\uc2a4-\ud234\ud0b7"},"\ub9ac\ub355\uc2a4 \ud234\ud0b7"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Redux \ud234\ud0b7\uc740 Redux \ub85c\uc9c1\uc744 \uc791\uc131\ud558\uae30 \uc704\ud55c \uacf5\uc2dd \uad8c\uc7a5 \uc811\uadfc \ubc29\uc2dd\uc785\ub2c8\ub2e4. Redux \ucf54\uc5b4\ub97c \ub458\ub7ec\uc2f8\uace0 \uc788\uc73c\uba70 Redux \uc571\uc744 \ube4c\ub4dc\ud558\ub294 \ub370 \ud544\uc218\uc801\uc774\ub77c\uace0 \uc0dd\uac01\ud558\ub294 \ud328\ud0a4\uc9c0\uc640 \uae30\ub2a5\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. "),(0,n.kt)("li",{parentName:"ul"},"Redux \ud234\ud0b7\uc740 \uc81c\uc548\ub41c \ubaa8\ubc94 \uc0ac\ub840\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uc5ec \ub300\ubd80\ubd84\uc758 Redux \uc791\uc5c5\uc744 \ub2e8\uc21c\ud654\ud558\uace0 \uc77c\ubc18\uc801\uc778 \uc2e4\uc218\ub97c \ubc29\uc9c0\ud558\uace0 Redux \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub354 \uc27d\uac8c \uc791\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://redux-toolkit.js.org/tutorials/quick-start"},"redux toolkit"))),(0,n.kt)("h4",{id:"reducer"},"REDUCER"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"\ub9ac\ub4c0\uc11c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc0c1\ud0dc\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacb0\uc815\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ub41c \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uadf8\ub4e4\uc740 \uc778\uc218\ub85c \uc870\uce58\ub97c \ucde8\ud558\uace0 store \ub0b4\ubd80\uc758 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.")),(0,n.kt)("h4",{id:"react-\ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c-redux-state-\ubc0f-actions-\uc0ac\uc6a9"},"React \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c Redux State \ubc0f Actions \uc0ac\uc6a9"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"useSelector : useSelector\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc800\uc7a5\uc18c\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc77d\uace0"),(0,n.kt)("li",{parentName:"ul"},"useDispatch : useDispatch\ub97c \uc0ac\uc6a9\ud558\uc5ec Action\uc744 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.")))}c.isMDXComponent=!0}}]);