-
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-2018-09-28-reactjs-props-md-a00f70ace3ecd9848004.js
2 lines (2 loc) · 27.1 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-09-28-reactjs-props-md-a00f70ace3ecd9848004.js
1
2
"use strict";(self.webpackChunkkyoungah_dev_blog=self.webpackChunkkyoungah_dev_blog||[]).push([[270],{4411:function(n,s,a){a.r(s),a.d(s,{default:function(){return y}});var t=a(6540),p=a(8453);function e(n){const s=Object.assign({h2:"h2",p:"p",a:"a",h4:"h4",span:"span",img:"img",h3:"h3",strong:"strong",blockquote:"blockquote",ul:"ul",li:"li"},(0,p.R)(),n.components);return t.createElement(t.Fragment,null,t.createElement(s.h2,null,"props"),"\n",t.createElement(s.p,null,"props는 Component 속성을 설정할 때 사용하는 요소이다. Component는 props를 받고 props의 값에 따라 다르게 렌더링 하거나 작동할 수 있다.\nPropTypes 속성의 종류는 ",t.createElement(s.a,{href:"https://reactjs.org/docs/typechecking-with-proptypes.html"},"React 공식 문서"),"에서 확인할 수 있다."),"\n",t.createElement(s.h4,null,"부모 컴포넌트"),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> Child <span class="token keyword">from</span> <span class="token string">"./Child"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token operator"><</span>Child singer<span class="token operator">=</span><span class="token string">"Nell"</span> song<span class="token operator">=</span><span class="token string">"Home"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Parent<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,"props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있다."),"\n",t.createElement(s.h4,null,"자식 컴포넌트"),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// 자식 컴포넌트</span>\n<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> singer<span class="token punctuation">,</span> song <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>div<span class="token operator">></span>\n 지금 듣고 있는 노래는 <span class="token punctuation">{</span>singer<span class="token punctuation">}</span>의 <span class="token punctuation">{</span>song<span class="token punctuation">}</span>입니다<span class="token punctuation">.</span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Child<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,"props에 접근할 때는 this 키워드를 사용하여 접근한다."),"\n",t.createElement(s.img,{src:"/images/posts/reactjs-props-1.png",alt:"실행결과"}),"\n",t.createElement(s.p,null,"부모 Component에서 자식 Component로 전달되며 받아온 props는 수정할 수 없다."),"\n",t.createElement(s.img,{src:"/images/posts/reactjs-props-2.png",alt:"Object.isFrozen 메소드로 동결되어 있는것을 확인할 수 있다. props값을 바꾸려고 하면 에러가 난다."}),"\n",t.createElement(s.h3,null,"propTypes"),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">"prop-types"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token comment">// ... 생략</span>\n<span class="token punctuation">}</span>\n\nChild<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span> <span class="token comment">// 필수적으로 존재해야 한다.</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Child<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,"컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때는 propTypes를 사용한다. propTypes를 지정하려면 ",t.createElement(s.strong,null,"prop-types")," 모듈이 필요하다.\n필수 props를 지정하고 싶을 땐 propTypes를 설정할 때 isRequired를 사용하면 된다."),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token operator"><</span>Child singer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">123</span><span class="token punctuation">}</span> song<span class="token operator">=</span><span class="token string">"Home"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",t.createElement(s.img,{src:"/images/posts/reactjs-props-3.png",alt:"잘못된 타입으로 props를 넘겨줘 보았다."}),"\n",t.createElement(s.p,null,"props의 타입을 propTypes에서 설정한 타입과 다른 타입으로 넘겨주면 렌더링은 되나 개발자 도구에 오류 메시지가 출력된다."),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token operator"><</span>Child singer<span class="token operator">=</span><span class="token string">"Nell"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,t.createElement(s.img,{src:"/frontend/reactjs-props-4.png",alt:"필수 props를 제외해 보았다."}),"\n필수 props가 빠졌을 때도 렌더링은 되나 개발자 도구에 오류 메시지가 출력된다."),"\n",t.createElement(s.h3,null,"defaultProps"),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">"prop-types"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token comment">// ... 생략</span>\n<span class="token punctuation">}</span>\n\nChild<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\nChild<span class="token punctuation">.</span>defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> <span class="token string">"Hoobastank"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> <span class="token string">"Without A Fight"</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Child<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,"defaultProps를 사용해서 prop의 기본 값을 설정할 수 있다. defaultProps는 prop-types 모듈이 필요 없다."),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token operator"><</span>Child <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,t.createElement(s.img,{src:"/images/posts/reactjs-props-5.png",alt:"defaultProps 적용"}),"\nprops를 지정해주지 않으면 defaultProps에 있는 기본 값이 적용된다."),"\n",t.createElement(s.h3,null,"transform-class-properties"),"\n",t.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">"prop-types"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n <span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> <span class="token string">"Hoobastank"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> <span class="token string">"Without A Fight"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> singer<span class="token punctuation">,</span> song <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>div<span class="token operator">></span>\n 지금 듣고 있는 노래는 <span class="token punctuation">{</span>singer<span class="token punctuation">}</span>의 <span class="token punctuation">{</span>song<span class="token punctuation">}</span>입니다<span class="token punctuation">.</span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Child<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.p,null,"propTypes, defaulProps를 클래스 내부에서 정의할 수도 있다. 이 문법을 사용하려면 transform-class-properties babel 플러그인이 필요한데 create-react-app으로 생성한 프로젝트는 기본적으로 적용되어 있기 때문에 따로 설정할 필요가 없다."),"\n",t.createElement(s.h3,null,"typescript"),"\n",t.createElement(s.p,null,"typeScript를 사용하여 props에 타입을 줘보자."),"\n",t.createElement(s.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 operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">interface</span> <span class="token class-name">ChildProps</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> string<span class="token punctuation">;</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> string<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">interface</span> <span class="token class-name">ChildState</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token operator"><</span>ChildProps<span class="token punctuation">,</span> ChildState<span class="token operator">></span> <span class="token punctuation">{</span>\n <span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">singer</span><span class="token operator">:</span> <span class="token string">"Hoobastank"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">song</span><span class="token operator">:</span> <span class="token string">"Without A Fight"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> singer<span class="token punctuation">,</span> song <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>div<span class="token operator">></span>\n 지금 듣고 있는 노래는 <span class="token punctuation">{</span>singer<span class="token punctuation">}</span>의 <span class="token punctuation">{</span>song<span class="token punctuation">}</span>입니다<span class="token punctuation">.</span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> Child<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(s.img,{src:"/images/posts/reactjs-props-6.png",alt:"잘못된 타입을 지정했더니 렌더링 조차 되지 않고 오류를 출력한다."}),"\n",t.createElement(s.h2,null,"Reference"),"\n",t.createElement(s.blockquote,null,"\n",t.createElement(s.ul,null,"\n",t.createElement(s.li,null,t.createElement(s.a,{href:"http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791160505238&orderClick=LAG&Kc="},"리액트를 다루는 기술")),"\n"),"\n"))}var o=function(n){void 0===n&&(n={});const{wrapper:s}=Object.assign({},(0,p.R)(),n.components);return s?t.createElement(s,n,t.createElement(e,n)):e(n)},c=a(2877),l=a(7736),r=a(407),u=a(7735),i=a(685),k=a(2248),d=a(8066),g=a(4848);function m(n){var s,a;let{data:t,children:e}=n;const{date:o,tags:m,title:y}=null!==(s=null==t||null===(a=t.mdx)||void 0===a?void 0:a.frontmatter)&&void 0!==s?s:{};return(0,g.jsx)(l.i,{children:(0,g.jsxs)(c.m,{className:d.q,children:[(0,g.jsx)(k.l,{className:d.V,title:y}),(0,g.jsx)(u.l,{date:o}),(0,g.jsx)(i.I,{tags:m}),(0,g.jsx)(r.E,{children:(0,g.jsx)(p.x,{children:e})})]})})}function y(n){return t.createElement(m,n,t.createElement(o,n))}},407:function(n,s,a){a.d(s,{E:function(){return o}});var t=a(4164),p="post-layout-content-module--post-layout-content-root--01754",e=a(4848);function o(n){let{children:s,className:a,...o}=n;return(0,e.jsx)("div",{className:(0,t.$)(p,a),...o,children:s})}},7735:function(n,s,a){a.d(s,{l:function(){return o}});var t=a(4164),p="post-layout-date-module--post-layout-date-root--f34d1",e=a(4848);function o(n){let{className:s,date:a,...o}=n;return(0,e.jsx)("span",{className:(0,t.$)(p,s),...o,children:a})}},685:function(n,s,a){a.d(s,{I:function(){return c}});var t=a(9143),p=a(4194),e="post-layout-module--post-layout-tags--837df",o=a(4848);function c(n){let{tags:s}=n;return(0,o.jsx)(t.Y,{className:e,children:s.map((n=>(0,o.jsx)(p.Link,{to:"/tags/"+n,children:(0,o.jsx)(t.Y.Tag,{tag:n})},n)))})}},2248:function(n,s,a){a.d(s,{l:function(){return o}});var t=a(4164),p="post-layout-title-module--post-layout-title-root--88374",e=a(4848);function o(n){let{className:s,title:a,...o}=n;return(0,e.jsx)("h1",{className:(0,t.$)(p,s),...o,children:a})}},9143:function(n,s,a){a.d(s,{Y:function(){return e}});var t=a(4164),p=a(4848);const e=Object.assign((function(n){let{children:s,className:a,...e}=n;return(0,p.jsx)("div",{className:(0,t.$)("tags-module--tags-root--e3461",a),...e,children:s})}),{Tag:function(n){let{className:s,tag:a,...e}=n;return(0,p.jsx)("span",{className:(0,t.$)("tag-module--tag-root--aae01",s),...e,children:a})}})},2877:function(n,s,a){a.d(s,{m:function(){return o}});var t=a(4164),p="container-module--container-root--3b208",e=a(4848);function o(n){let{children:s,className:a,...o}=n;return(0,e.jsx)("div",{className:(0,t.$)(p,a),...o,children:s})}},2629:function(n,s,a){a.d(s,{$:function(){return o}});var t=a(4164),p="basic-layout-module--basic-layout-root--a11e0",e=a(4848);function o(n){let{children:s,className:a,...o}=n;return(0,e.jsx)("div",{className:(0,t.$)(p,a),...o,children:s})}},7736:function(n,s,a){a.d(s,{i:function(){return f}});var t=a(4194),p=a(4164),e="header-module--about--32ac9",o="header-module--header-logo--5bbdc",c="header-module--header-navigation--24bcb",l="header-module--header-navigation-item--ba248",r="header-module--header-navigation-item-link--d6da9",u="header-module--header-navigation-list--3815c",i="header-module--header-root--01ceb",k="header-module--tags--eb332",d=a(4848);function g(){return(0,d.jsxs)("header",{className:i,children:[(0,d.jsx)(t.Link,{to:"/",children:(0,d.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,d.jsx)("nav",{className:c,children:(0,d.jsxs)("ul",{className:u,children:[(0,d.jsx)("li",{className:l,children:(0,d.jsx)(t.Link,{to:"/tags",children:(0,d.jsx)("span",{"aria-label":"tags",className:(0,p.$)(r,k)})})}),(0,d.jsx)("li",{className:l,children:(0,d.jsx)("a",{href:"/about",rel:"noopener",target:"_blank",children:(0,d.jsx)("span",{"aria-label":"about",className:(0,p.$)(r,e)})})})]})})]})}var m="footer-module--footer-root--795ff";function y(){return(0,d.jsxs)("footer",{className:m,children:[(0,d.jsx)("span",{children:"Powered by Gatsby, Hosted by GitHub Pages."}),(0,d.jsxs)("span",{children:["©",(0,d.jsx)("a",{href:"https://github.com/partykyoung",rel:"noreferrer",target:"_blank",children:"KyoungAh"}),", All rights reserved."]})]})}var h=a(2629);function f(n){let{children:s}=n;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(g,{}),(0,d.jsx)(h.$,{children:s}),(0,d.jsx)(y,{})]})}},8066:function(n,s,a){a.d(s,{V:function(){return p},q:function(){return t}});var t="post-layout-module--post-layout-container--f40b5",p="post-layout-module--post-layout-title--1c575"},8453:function(n,s,a){a.d(s,{R:function(){return o},x:function(){return c}});var t=a(6540);const p={},e=t.createContext(p);function o(n){const s=t.useContext(e);return t.useMemo((function(){return"function"==typeof n?n(s):{...s,...n}}),[s,n])}function c(n){let s;return s=n.disableParentContext?"function"==typeof n.components?n.components(p):n.components||p:o(n.components),t.createElement(e.Provider,{value:s},n.children)}},4164:function(n,s,a){function t(n){var s,a,p="";if("string"==typeof n||"number"==typeof n)p+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(s=0;s<e;s++)n[s]&&(a=t(n[s]))&&(p&&(p+=" "),p+=a)}else for(a in n)n[a]&&(p&&(p+=" "),p+=a);return p}function p(){for(var n,s,a=0,p="",e=arguments.length;a<e;a++)(n=arguments[a])&&(s=t(n))&&(p&&(p+=" "),p+=s);return p}a.d(s,{$:function(){return p}})}}]);
//# sourceMappingURL=component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-09-28-reactjs-props-md-a00f70ace3ecd9848004.js.map