-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2020-04-01-etc-redux-md-d8a3914cf2ecd12be79c.js
2 lines (2 loc) · 15.3 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2020-04-01-etc-redux-md-d8a3914cf2ecd12be79c.js
1
2
"use strict";(self.webpackChunkkyoungah_dev_blog=self.webpackChunkkyoungah_dev_blog||[]).push([[231],{6945:function(n,e,t){t.r(e),t.d(e,{default:function(){return h}});var a=t(6540),s=t(8453);function l(n){const e=Object.assign({h2:"h2",p:"p",img:"img",span:"span",h3:"h3",ul:"ul",li:"li",blockquote:"blockquote",a:"a"},(0,s.R)(),n.components);return a.createElement(a.Fragment,null,a.createElement(e.h2,null,"Redux란?"),"\n",a.createElement(e.p,null,"Redux는 JavaScript App을 위한 상태관리 라이브러리 이다. 글로벌 상태 관리를 할 때 굉장히 효과적이다."),"\n",a.createElement(e.p,null,"주로 React에서 글로벌 상태 관리를 위해 많이 사용하나 React가 아닌 다른 JavaScript 라이브러리에서도 사용 가능하다."),"\n",a.createElement(e.img,{src:"../images/posts/etc-redux-1.png",alt:"Redux를 사용하지 않았을 때와 사용하였을 때의 비교"}),"\n",a.createElement(e.p,null,"예를 들어서 A 컴포넌트에 상태 변화가 일어났을 때 B 컴포넌트에도 바뀐 상태가 변경이 되어야 한다. Redux를 사용하지 않고 A 컴포넌트에서 App 컴포넌트까지 바뀐 상태를 전달해 준 후 App 컴포넌트에서 B 컴포넌트 까지 바뀐 상태를 props로 전달해줄 수는 있으나 엄청 번거롭고 귀찮은 작업이다."),"\n",a.createElement(e.p,null,"Redux는 애플리케이션의 최상위에 글로벌 Store를 생성하여 다른 모든 컴포넌트로 상태를 공급한다. 애플리케이션의 상태와 상태 변화 로직이 들어있는 Store를 통하여 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 전달할 수 있다."),"\n",a.createElement(e.h2,null,"Actions"),"\n",a.createElement(e.p,null,"Action은 Application에서 Store로 데이터를 보내는 데이터 묶음이다. JavaScript 객체로 표현된다.\nAction은 일어난 일만 명세할 뿐 상태가 어떻게 변하는지는 명세하지 않는다."),"\n",a.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// type</span>\n<span class="token keyword">const</span> <span class="token constant">ADD_TODO</span> <span class="token operator">=</span> <span class="token string">\'ADD_TODO\'</span>\n\n<span class="token comment">// action</span>\n<span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">ADD_TODO</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'Redux - Actions 정리\'</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",a.createElement(e.p,null,"Action 객체는 수행 중인 작업의 유형을 나타내는 type 속성이 필요하다. type은 대게 string 형식으로 정의한다. type을 제외한 그 외의 값들은 개발자 마음대로 넣어줄 수 있다."),"\n",a.createElement(e.h3,null,"Action Creators"),"\n",a.createElement(e.p,null,"Action Creators는 Action을 생성하는 함수이다. Parameter을 받아서 액션을 만들어 반환한다."),"\n",a.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">addTodo</span><span class="token punctuation">(</span><span class="token parameter">text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">ADD_TODO</span><span class="token punctuation">,</span>\n text<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",a.createElement(e.h2,null,"Reducers"),"\n",a.createElement(e.p,null,"Reducer는 Store로 보낸 Action에 응답하여 상태가 어떻게 변하는지를 정의한다."),"\n",a.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">reducer</span><span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> initialState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">case</span> <span class="token constant">ADD_TODO</span><span class="token operator">:</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>state<span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> action<span class="token punctuation">.</span>text<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">default</span><span class="token operator">:</span>\n <span class="token keyword">return</span> state<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",a.createElement(e.p,null,"Reducer는 이전 상태와 Action을 받아 새로운 상태를 반환하는 ",a.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">순수한 함수</code>'}})," 이다. Reducer를 순수하게 유지하는 것은 매우 중요하기 때문에 다음 사항들은 절대로 Reducer 안에서 하면 안된다."),"\n",a.createElement(e.ul,null,"\n",a.createElement(e.li,null,"argument의 변경이 일어나서는 안된다."),"\n",a.createElement(e.li,null,"API 호출이나 라우팅 변환 같은 사이드 이펙트를 일으키면 안된다."),"\n",a.createElement(e.li,null,"똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 값을 반환해야 한다.","\n",a.createElement(e.ul,null,"\n",a.createElement(e.li,null,"때문에 실행 떄마다 다른 결과 값을 반환하는 Date.now(), Math.random() 같은 순수하지못한 함수들은 reducer 안에서 호출하면 안된다."),"\n"),"\n"),"\n"),"\n",a.createElement(e.h2,null,"Store"),"\n",a.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">"./reducer"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",a.createElement(e.p,null,"Store은 Action과 Reducer를 함께 제공해주는 객체이다. Store 안에는 App의 현재 상태와 Reducer가 들어있고 추가적으로 몇가지 내장함수들이 있다."),"\n",a.createElement(e.p,null,"Store는 다음과 같은 일들을 한다."),"\n",a.createElement(e.ul,null,"\n",a.createElement(e.li,null,"애플리케이션의 상태를 저장한다."),"\n",a.createElement(e.li,null,"getState() 메소드로 상태에 접근할 수 있다."),"\n",a.createElement(e.li,null,"dispatch(action) 메소드로 상태를 업데이트 할 수 있다."),"\n",a.createElement(e.li,null,"subscribe(listener를) 메소드로 listener를 등록할 수 있다.","\n",a.createElement(e.ul,null,"\n",a.createElement(e.li,null,"subscribe(listener를) 메소드에서 반환된 메소드로 listener를 해제를 핸들링 할 수 있다."),"\n"),"\n"),"\n"),"\n",a.createElement(e.p,null,"Redux에서는 단 하나만의 Store를 가질 수 있다."),"\n",a.createElement(e.h2,null,"Redux를 꼭 써야할까?"),"\n",a.createElement(e.p,null,"옛날의 React 였다면 글로벌 상태 관리를 위해 Redux를 쓰는게 효과적이었지만 요즘은 프로젝트 규모가 작거나 단순히 글로벌 상태 관리만 하려면 굳이 Redux를 도입할 필요는 없는 것 같다."),"\n",a.createElement(e.p,null,"Context API도 있고 hooks도 있기 때문에 이들을 잘 조합하여 사용하면 Redux를 사용하지 않고도 글로벌 상태 관리를 할 수 있다. 이 블로그도 Context API + hooks를 사용하여 글로벌 상태 관리를 하고 있다."),"\n",a.createElement(e.p,null,"무작정 상태관리를 위해 Redux를 도입하기 보다는 정말로 Redux가 필요한지 잘 생각해보고 프로젝트에 도입하면 좋을 것 같다."),"\n",a.createElement(e.h2,null,"Reference"),"\n",a.createElement(e.blockquote,null,"\n",a.createElement(e.ul,null,"\n",a.createElement(e.li,null,a.createElement(e.a,{href:"https://redux.js.org/basics/basic-tutorial"},"Redux Basics")),"\n",a.createElement(e.li,null,a.createElement(e.a,{href:"https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt"},"Redux (1) 소개 및 개념정리")),"\n"),"\n"))}var o=function(n){void 0===n&&(n={});const{wrapper:e}=Object.assign({},(0,s.R)(),n.components);return e?a.createElement(e,n,a.createElement(l,n)):l(n)},c=t(2877),r=t(7736),p=t(407),u=t(7735),i=t(685),d=t(2248),m=t(8066),k=t(4848);function g(n){var e,t;let{data:a,children:l}=n;const{date:o,tags:g,title:h}=null!==(e=null==a||null===(t=a.mdx)||void 0===t?void 0:t.frontmatter)&&void 0!==e?e:{};return(0,k.jsx)(r.i,{children:(0,k.jsxs)(c.m,{className:m.q,children:[(0,k.jsx)(d.l,{className:m.V,title:h}),(0,k.jsx)(u.l,{date:o}),(0,k.jsx)(i.I,{tags:g}),(0,k.jsx)(p.E,{children:(0,k.jsx)(s.x,{children:l})})]})})}function h(n){return a.createElement(g,n,a.createElement(o,n))}},407:function(n,e,t){t.d(e,{E:function(){return o}});var a=t(4164),s="post-layout-content-module--post-layout-content-root--01754",l=t(4848);function o(n){let{children:e,className:t,...o}=n;return(0,l.jsx)("div",{className:(0,a.$)(s,t),...o,children:e})}},7735:function(n,e,t){t.d(e,{l:function(){return o}});var a=t(4164),s="post-layout-date-module--post-layout-date-root--f34d1",l=t(4848);function o(n){let{className:e,date:t,...o}=n;return(0,l.jsx)("span",{className:(0,a.$)(s,e),...o,children:t})}},685:function(n,e,t){t.d(e,{I:function(){return c}});var a=t(9143),s=t(4194),l="post-layout-module--post-layout-tags--837df",o=t(4848);function c(n){let{tags:e}=n;return(0,o.jsx)(a.Y,{className:l,children:e.map((n=>(0,o.jsx)(s.Link,{to:"/tags/"+n,children:(0,o.jsx)(a.Y.Tag,{tag:n})},n)))})}},2248:function(n,e,t){t.d(e,{l:function(){return o}});var a=t(4164),s="post-layout-title-module--post-layout-title-root--88374",l=t(4848);function o(n){let{className:e,title:t,...o}=n;return(0,l.jsx)("h1",{className:(0,a.$)(s,e),...o,children:t})}},9143:function(n,e,t){t.d(e,{Y:function(){return l}});var a=t(4164),s=t(4848);const l=Object.assign((function(n){let{children:e,className:t,...l}=n;return(0,s.jsx)("div",{className:(0,a.$)("tags-module--tags-root--e3461",t),...l,children:e})}),{Tag:function(n){let{className:e,tag:t,...l}=n;return(0,s.jsx)("span",{className:(0,a.$)("tag-module--tag-root--aae01",e),...l,children:t})}})},2877:function(n,e,t){t.d(e,{m:function(){return o}});var a=t(4164),s="container-module--container-root--3b208",l=t(4848);function o(n){let{children:e,className:t,...o}=n;return(0,l.jsx)("div",{className:(0,a.$)(s,t),...o,children:e})}},2629:function(n,e,t){t.d(e,{$:function(){return o}});var a=t(4164),s="basic-layout-module--basic-layout-root--a11e0",l=t(4848);function o(n){let{children:e,className:t,...o}=n;return(0,l.jsx)("div",{className:(0,a.$)(s,t),...o,children:e})}},7736:function(n,e,t){t.d(e,{i:function(){return x}});var a=t(4194),s=t(4164),l="header-module--about--32ac9",o="header-module--header-logo--5bbdc",c="header-module--header-navigation--24bcb",r="header-module--header-navigation-item--ba248",p="header-module--header-navigation-item-link--d6da9",u="header-module--header-navigation-list--3815c",i="header-module--header-root--01ceb",d="header-module--tags--eb332",m=t(4848);function k(){return(0,m.jsxs)("header",{className:i,children:[(0,m.jsx)(a.Link,{to:"/",children:(0,m.jsx)("img",{src:"/images/logo.png",srcSet:"/images/logo-small.png 200w, /images/logo.png 300w",sizes:"(max-width: 360px) 200px, 300px",alt:"dev.kyoungah.me",className:o})}),(0,m.jsx)("nav",{className:c,children:(0,m.jsxs)("ul",{className:u,children:[(0,m.jsx)("li",{className:r,children:(0,m.jsx)(a.Link,{to:"/tags",children:(0,m.jsx)("span",{"aria-label":"tags",className:(0,s.$)(p,d)})})}),(0,m.jsx)("li",{className:r,children:(0,m.jsx)("a",{href:"/about",rel:"noopener",target:"_blank",children:(0,m.jsx)("span",{"aria-label":"about",className:(0,s.$)(p,l)})})})]})})]})}var g="footer-module--footer-root--795ff";function h(){return(0,m.jsxs)("footer",{className:g,children:[(0,m.jsx)("span",{children:"Powered by Gatsby, Hosted by GitHub Pages."}),(0,m.jsxs)("span",{children:["©",(0,m.jsx)("a",{href:"https://github.com/partykyoung",rel:"noreferrer",target:"_blank",children:"KyoungAh"}),", All rights reserved."]})]})}var f=t(2629);function x(n){let{children:e}=n;return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(k,{}),(0,m.jsx)(f.$,{children:e}),(0,m.jsx)(h,{})]})}},8066:function(n,e,t){t.d(e,{V:function(){return s},q:function(){return a}});var a="post-layout-module--post-layout-container--f40b5",s="post-layout-module--post-layout-title--1c575"},8453:function(n,e,t){t.d(e,{R:function(){return o},x:function(){return c}});var a=t(6540);const s={},l=a.createContext(s);function o(n){const e=a.useContext(l);return a.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function c(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:o(n.components),a.createElement(l.Provider,{value:e},n.children)}},4164:function(n,e,t){function a(n){var e,t,s="";if("string"==typeof n||"number"==typeof n)s+=n;else if("object"==typeof n)if(Array.isArray(n)){var l=n.length;for(e=0;e<l;e++)n[e]&&(t=a(n[e]))&&(s&&(s+=" "),s+=t)}else for(t in n)n[t]&&(s&&(s+=" "),s+=t);return s}function s(){for(var n,e,t=0,s="",l=arguments.length;t<l;t++)(n=arguments[t])&&(e=a(n))&&(s&&(s+=" "),s+=e);return s}t.d(e,{$:function(){return s}})}}]);
//# sourceMappingURL=component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2020-04-01-etc-redux-md-d8a3914cf2ecd12be79c.js.map