component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-09-28-reactjs-props-md-a00f70ace3ecd9848004.js.map

{"version":3,"file":"component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-09-28-reactjs-props-md-a00f70ace3ecd9848004.js","mappings":"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","sources":["webpack://kyoungah-dev-blog/./posts/2018-09-28-reactjs-props.md","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout.content.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout-content.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout-tags.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/index.ts","webpack://kyoungah-dev-blog/./src/entities/tags/tags.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/tags.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.ui.tsx","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.module.css","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/header/header.module.css","webpack://kyoungah-dev-blog/./src/widgets/header/header.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.module.css","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/default-layout/default-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.module.css","webpack://kyoungah-dev-blog/./node_modules/@mdx-js/react/lib/index.js","webpack://kyoungah-dev-blog/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["/*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/\nimport {useMDXComponents as _provideComponents} from \"@mdx-js/react\";\nimport React from \"react\";\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    p: \"p\",\n    a: \"a\",\n    h4: \"h4\",\n    span: \"span\",\n    img: \"img\",\n    h3: \"h3\",\n    strong: \"strong\",\n    blockquote: \"blockquote\",\n    ul: \"ul\",\n    li: \"li\"\n  }, _provideComponents(), props.components);\n  return React.createElement(React.Fragment, null, React.createElement(_components.h2, null, \"props\"), \"\\n\", React.createElement(_components.p, null, \"props는 Component 속성을 설정할 때 사용하는 요소이다. Component는 props를 받고 props의 값에 따라 다르게 렌더링 하거나 작동할 수 있다.\\nPropTypes 속성의 종류는 \", React.createElement(_components.a, {\n    href: \"https://reactjs.org/docs/typechecking-with-proptypes.html\"\n  }, \"React 공식 문서\"), \"에서 확인할 수 있다.\"), \"\\n\", React.createElement(_components.h4, null, \"부모 컴포넌트\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.p, null, \"props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있다.\"), \"\\n\", React.createElement(_components.h4, null, \"자식 컴포넌트\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.p, null, \"props에 접근할 때는 this 키워드를 사용하여 접근한다.\"), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/reactjs-props-1.png\",\n    alt: \"실행결과\"\n  }), \"\\n\", React.createElement(_components.p, null, \"부모 Component에서 자식 Component로 전달되며 받아온 props는 수정할 수 없다.\"), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/reactjs-props-2.png\",\n    alt: \"Object.isFrozen 메소드로 동결되어 있는것을 확인할 수 있다. props값을 바꾸려고 하면 에러가 난다.\"\n  }), \"\\n\", React.createElement(_components.h3, null, \"propTypes\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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    }\n  }), \"\\n\", React.createElement(_components.p, null, \"컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때는 propTypes를 사용한다. propTypes를 지정하려면 \", React.createElement(_components.strong, null, \"prop-types\"), \" 모듈이 필요하다.\\n필수 props를 지정하고 싶을 땐 propTypes를 설정할 때 isRequired를 사용하면 된다.\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/reactjs-props-3.png\",\n    alt: \"잘못된 타입으로 props를 넘겨줘 보았다.\"\n  }), \"\\n\", React.createElement(_components.p, null, \"props의 타입을 propTypes에서 설정한 타입과 다른 타입으로 넘겨주면 렌더링은 되나 개발자 도구에 오류 메시지가 출력된다.\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.img, {\n    src: \"/frontend/reactjs-props-4.png\",\n    alt: \"필수 props를 제외해 보았다.\"\n  }), \"\\n필수 props가 빠졌을 때도 렌더링은 되나 개발자 도구에 오류 메시지가 출력된다.\"), \"\\n\", React.createElement(_components.h3, null, \"defaultProps\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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    }\n  }), \"\\n\", React.createElement(_components.p, null, \"defaultProps를 사용해서 prop의 기본 값을 설정할 수 있다. defaultProps는 prop-types 모듈이 필요 없다.\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.img, {\n    src: \"/images/posts/reactjs-props-5.png\",\n    alt: \"defaultProps 적용\"\n  }), \"\\nprops를 지정해주지 않으면 defaultProps에 있는 기본 값이 적용된다.\"), \"\\n\", React.createElement(_components.h3, null, \"transform-class-properties\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.p, null, \"propTypes, defaulProps를 클래스 내부에서 정의할 수도 있다. 이 문법을 사용하려면 transform-class-properties babel 플러그인이 필요한데 create-react-app으로 생성한 프로젝트는 기본적으로 적용되어 있기 때문에 따로 설정할 필요가 없다.\"), \"\\n\", React.createElement(_components.h3, null, \"typescript\"), \"\\n\", React.createElement(_components.p, null, \"typeScript를 사용하여 props에 타입을 줘보자.\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __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\\\">&lt;</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\\\">&lt;</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\\\">&lt;</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    }\n  }), \"\\n\", React.createElement(_components.img, {\n    src: \"/images/posts/reactjs-props-6.png\",\n    alt: \"잘못된 타입을 지정했더니 렌더링 조차 되지 않고 오류를 출력한다.\"\n  }), \"\\n\", React.createElement(_components.h2, null, \"Reference\"), \"\\n\", React.createElement(_components.blockquote, null, \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n    href: \"http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791160505238&orderClick=LAG&Kc=\"\n  }, \"리액트를 다루는 기술\")), \"\\n\"), \"\\n\"));\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? React.createElement(MDXLayout, props, React.createElement(_createMdxContent, props)) : _createMdxContent(props);\n}\nexport default MDXContent;\n","import React from \"react\";\nimport GATSBY_COMPILED_MDX from \"/Users/yookyoung.park/Workspace/kyoungah-dev-blog/posts/2018-09-28-reactjs-props.md\";\nimport {MDXProvider} from '@mdx-js/react';\nimport {Container} from '@/shared/uis/container';\nimport {DefaultLayout} from '@/widgets/default-layout';\nimport {PostLayoutContent} from './components/post-layout-content';\nimport {PostLayoutDate} from './components/post-layout-date';\nimport {PostLayoutTags} from './components/post-layout-tags';\nimport {PostLayoutTitle} from './components/post-layout-title';\nimport {postLayoutContainer, postLayoutTitle} from './post-layout.module.css';\nimport {jsx as _jsx} from \"react/jsx-runtime\";\nimport {jsxs as _jsxs} from \"react/jsx-runtime\";\nfunction PostLayout(_ref) {\n  var _data$mdx$frontmatter, _data$mdx;\n  let {data, children} = _ref;\n  const {date, tags, title} = (_data$mdx$frontmatter = data === null || data === void 0 ? void 0 : (_data$mdx = data.mdx) === null || _data$mdx === void 0 ? void 0 : _data$mdx.frontmatter) !== null && _data$mdx$frontmatter !== void 0 ? _data$mdx$frontmatter : {};\n  return _jsx(DefaultLayout, {\n    children: _jsxs(Container, {\n      className: postLayoutContainer,\n      children: [_jsx(PostLayoutTitle, {\n        className: postLayoutTitle,\n        title: title\n      }), _jsx(PostLayoutDate, {\n        date: date\n      }), _jsx(PostLayoutTags, {\n        tags: tags\n      }), _jsx(PostLayoutContent, {\n        children: _jsx(MDXProvider, {\n          children: children\n        })\n      })]\n    })\n  });\n}\nconst query = \"1347208223\";\nPostLayout\nexport default function GatsbyMDXWrapper(props) {\n  return React.createElement(PostLayout, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContentRoot = \"post-layout-content-module--post-layout-content-root--01754\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type PropsWithChildren } from \"react\";\n\nimport { postLayoutContentRoot } from \"./post-layout.content.module.css\";\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction PostLayoutContent({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(postLayoutContentRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { PostLayoutContent };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutDateRoot = \"post-layout-date-module--post-layout-date-root--f34d1\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes } from \"react\";\n\nimport { postLayoutDateRoot } from \"./post-layout-date.module.css\";\n\ntype Props = { date: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutDate({ className, date, ...props }: Props) {\n  return (\n    <span className={clsx(postLayoutDateRoot, className)} {...props}>\n      {date}\n    </span>\n  );\n}\n\nexport { PostLayoutDate };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTags = \"post-layout-module--post-layout-tags--837df\";","import { Tags } from \"@/entities/tags\";\nimport { Link } from \"gatsby\";\n\nimport { postLayoutTags } from \"./post-layout.module.css\";\n\ntype Props = { tags: string[] };\n\nfunction PostLayoutTags({ tags }: Props) {\n  return (\n    <Tags className={postLayoutTags}>\n      {tags.map((tag) => (\n        <Link key={tag} to={`/tags/${tag}`}>\n          <Tags.Tag tag={tag} />\n        </Link>\n      ))}\n    </Tags>\n  );\n}\n\nexport { PostLayoutTags };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTitleRoot = \"post-layout-title-module--post-layout-title-root--88374\";","import { clsx } from \"clsx\";\nimport { postLayoutTitleRoot } from \"./post-layout-title.module.css\";\nimport { HTMLAttributes } from \"react\";\n\ntype Props = { title: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutTitle({ className, title, ...props }: Props) {\n  return (\n    <h1 className={clsx(postLayoutTitleRoot, className)} {...props}>\n      {title}\n    </h1>\n  );\n}\n\nexport { PostLayoutTitle };\n","import { Tag } from '@/shared/uis/tag';\nimport { Tags } from './tags.ui';\n\nconst ComposedTags = Object.assign(Tags, {\n  Tag,\n});\n\nexport { ComposedTags as Tags };\n","import { PropsWithChildren, type HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nimport { tagsRoot } from './tags.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction Tags({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(tagsRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Tags };\n","// extracted by mini-css-extract-plugin\nexport var show = \"tags-module--show--7704b\";\nexport var tagsRoot = \"tags-module--tags-root--e3461\";","import { clsx } from 'clsx';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { tagRoot } from './tag.module.css';\n\ntype Props = {\n  tag: ReactNode;\n} & HTMLAttributes<HTMLSpanElement>;\n\nfunction Tag({ className, tag, ...props }: Props) {\n  return (\n    <span className={clsx(tagRoot, className)} {...props}>\n      {tag}\n    </span>\n  );\n}\n\nexport type { Props as TagProps };\nexport { Tag };\n","// extracted by mini-css-extract-plugin\nexport var tagRoot = \"tag-module--tag-root--aae01\";","// extracted by mini-css-extract-plugin\nexport var containerRoot = \"container-module--container-root--3b208\";","import { clsx } from 'clsx';\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\nimport { containerRoot } from './container.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLSpanElement>;\n\nfunction Container({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(containerRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Container };\n","// extracted by mini-css-extract-plugin\nexport var basicLayoutRoot = \"basic-layout-module--basic-layout-root--a11e0\";","import { clsx } from 'clsx';\nimport { type HTMLAttributes, type PropsWithChildren } from 'react';\n\nimport { basicLayoutRoot } from './basic-layout.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction BasicLayout({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(basicLayoutRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { BasicLayout };\n","// extracted by mini-css-extract-plugin\nexport var about = \"header-module--about--32ac9\";\nexport var headerLogo = \"header-module--header-logo--5bbdc\";\nexport var headerNavigation = \"header-module--header-navigation--24bcb\";\nexport var headerNavigationItem = \"header-module--header-navigation-item--ba248\";\nexport var headerNavigationItemLink = \"header-module--header-navigation-item-link--d6da9\";\nexport var headerNavigationList = \"header-module--header-navigation-list--3815c\";\nexport var headerRoot = \"header-module--header-root--01ceb\";\nexport var tags = \"header-module--tags--eb332\";","import { Link } from 'gatsby';\nimport { clsx } from 'clsx';\n\nimport {\n  about,\n  headerRoot,\n  headerLogo,\n  headerNavigation,\n  headerNavigationList,\n  headerNavigationItem,\n  headerNavigationItemLink,\n  tags,\n} from './header.module.css';\n\nfunction Header() {\n  return (\n    <header className={headerRoot}>\n      <Link to=\"/\">\n        <img\n          src=\"/images/logo.png\"\n          srcSet={`/images/logo-small.png 200w, /images/logo.png 300w`}\n          sizes=\"(max-width: 360px) 200px, 300px\"\n          alt=\"dev.kyoungah.me\"\n          className={headerLogo}\n        />\n      </Link>\n      <nav className={headerNavigation}>\n        <ul className={headerNavigationList}>\n          <li className={headerNavigationItem}>\n            <Link to=\"/tags\">\n              <span\n                aria-label=\"tags\"\n                className={clsx(headerNavigationItemLink, tags)}\n              />\n            </Link>\n          </li>\n          <li className={headerNavigationItem}>\n            <a href=\"/about\" rel=\"noopener\" target=\"_blank\">\n              <span\n                aria-label=\"about\"\n                className={clsx(headerNavigationItemLink, about)}\n              />\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n  );\n}\n\nexport { Header };\n","// extracted by mini-css-extract-plugin\nexport var footerRoot = \"footer-module--footer-root--795ff\";","import { footerRoot } from './footer.module.css';\n\nfunction Footer() {\n  return (\n    <footer className={footerRoot}>\n      <span>Powered by Gatsby, Hosted by GitHub Pages.</span>\n      <span>\n        ©\n        <a\n          href=\"https://github.com/partykyoung\"\n          rel=\"noreferrer\"\n          target=\"_blank\">\n          KyoungAh\n        </a>\n        , All rights reserved.\n      </span>\n    </footer>\n  );\n}\n\nexport { Footer };\n","import type { PropsWithChildren } from \"react\";\n\nimport { Header } from \"../header\";\nimport { Footer } from \"../footer\";\nimport { BasicLayout } from \"../basic-layout\";\n\nfunction DefaultLayout({ children }: PropsWithChildren) {\n  return (\n    <>\n      <Header />\n      <BasicLayout>{children}</BasicLayout>\n      <Footer />\n    </>\n  );\n}\n\nexport { DefaultLayout };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContainer = \"post-layout-module--post-layout-container--f40b5\";\nexport var postLayoutTitle = \"post-layout-module--post-layout-title--1c575\";","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n *   Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n *   Current components from the context.\n * @returns {MDXComponents}\n *   Additional components.\n *\n * @typedef Props\n *   Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n *   Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n *   Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n *   Current components.\n */\nexport function useMDXComponents(components) {\n  const contextComponents = React.useContext(MDXContext)\n\n  // Memoize to avoid unnecessary top-level context changes\n  return React.useMemo(\n    function () {\n      // Custom merge via a function prop\n      if (typeof components === 'function') {\n        return components(contextComponents)\n      }\n\n      return {...contextComponents, ...components}\n    },\n    [contextComponents, components]\n  )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n *   Properties.\n * @returns {JSX.Element}\n *   Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n  /** @type {Readonly<MDXComponents>} */\n  let allComponents\n\n  if (properties.disableParentContext) {\n    allComponents =\n      typeof properties.components === 'function'\n        ? properties.components(emptyComponents)\n        : properties.components || emptyComponents\n  } else {\n    allComponents = useMDXComponents(properties.components)\n  }\n\n  return React.createElement(\n    MDXContext.Provider,\n    {value: allComponents},\n    properties.children\n  )\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["_createMdxContent","props","_components","Object","assign","h2","p","a","h4","span","img","h3","strong","blockquote","ul","li","_provideComponents","components","React","href","dangerouslySetInnerHTML","__html","src","alt","wrapper","MDXLayout","PostLayout","_ref","_data$mdx$frontmatter","_data$mdx","data","children","date","tags","title","mdx","frontmatter","_jsx","DefaultLayout","_jsxs","Container","className","postLayoutContainer","PostLayoutTitle","postLayoutTitle","PostLayoutDate","PostLayoutTags","PostLayoutContent","MDXProvider","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","postLayoutContentRoot","clsx","postLayoutDateRoot","postLayoutTags","Tags","map","tag","Link","to","Tag","postLayoutTitleRoot","ComposedTags","containerRoot","basicLayoutRoot","BasicLayout","about","headerLogo","headerNavigation","headerNavigationItem","headerNavigationItemLink","headerNavigationList","headerRoot","Header","srcSet","sizes","rel","target","footerRoot","Footer","_Fragment","emptyComponents","MDXContext","useMDXComponents","contextComponents","properties","allComponents","disableParentContext","Provider","value","r","e","t","f","n","Array","isArray","o","length","arguments"],"sourceRoot":""}