component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-02-reactjs-first-reactjs-md-9054f3901dfab8bab29f.js

"use strict";(self.webpackChunkkyoungah_dev_blog=self.webpackChunkkyoungah_dev_blog||[]).push([[658],{2825:function(e,n,t){t.r(n),t.d(n,{default:function(){return g}});var l=t(6540),a=t(8453);function r(e){const n=Object.assign({h2:"h2",p:"p",h3:"h3",ol:"ol",li:"li",ul:"ul",blockquote:"blockquote",a:"a"},(0,a.R)(),e.components);return l.createElement(l.Fragment,null,l.createElement(n.h2,null,"React?"),"\n",l.createElement(n.p,null,"페이스북에서 개발한 오픈소스 JavaScript Library."),"\n",l.createElement(n.h2,null,"React 특징"),"\n",l.createElement(n.h3,null,"Only View"),"\n",l.createElement(n.p,null,"React는 오직 View만 신경쓰고 담당하는 Library 이다."),"\n",l.createElement(n.h3,null,"JSX"),"\n",l.createElement(n.p,null,"React는 컴포넌트를 화면에 어떻게 보일지를 정의할 때 JSX를 사용한다. JSX는 JavaScript XML의 약자이다.\nJSX를 사용하지 않아도 되지만 사용하는게 훨씬 편하다."),"\n",l.createElement(n.h3,null,"Virtual DOM"),"\n",l.createElement(n.p,null,"Virtual DOM 을 사용하여 상태의 변함에 따라 선택적으로 유저 인터페이스를 렌더링 한다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해준다."),"\n",l.createElement(n.p,null,"DOM은 문서 객체 모델(Document Object Model)의 약자이다. HTML과 XML 문서를 위한 API 이며 문서의 구조화된 표현을 제공한다."),"\n",l.createElement(n.p,null,"Virtual DOM은 실제 DOM의 빠른 인 메모리의 형태이며 JavaScript와 DOM이 반응을 하는것 처럼 다룰 수 있게 하는 추상적 개념이다. 동작과정은 아래의 순서와 같다."),"\n",l.createElement(n.ol,null,"\n",l.createElement(n.li,null,"데이터 모델 상태가 변경될 때 마다 Virtual DOM과 React는 Virtual DOM 표현에 맞게 UI를 다시 렌더링한다."),"\n"),"\n",l.createElement(n.ul,null,"\n",l.createElement(n.li,null,"컴포넌트가 초기 렌더링을 할 때 render 함수를 사용하는데 이 함수는 View의 생김새, 작동하는 방법 같은 정보를 지닌 객체를 반환한다.\n렌더링이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 지정해놓은 DOM 요소 안에 주입한다.\n컴포넌트가 데이터를 업데이트 했을 때 새로운 데이터를 가지고 render 함수를 또 호출한다."),"\n"),"\n",l.createElement(n.ol,{start:"2"},"\n",l.createElement(n.li,null,"React는 두 개의 Virtual DOM 사이의 차이점, 즉 실제 DOM이 변경되어야 하는 부분을 연산한다."),"\n"),"\n",l.createElement(n.ul,null,"\n",l.createElement(n.li,null,"render 함수가 반환한 결과와 이전 render 함수가 만들었던 정보를 최소한의 연산으로 비교한다."),"\n"),"\n",l.createElement(n.ol,{start:"3"},"\n",l.createElement(n.li,null,"React는 실제 DOM에서 변경 되어야 하는 부분만 새로 실제 DOM에 적용한다."),"\n"),"\n",l.createElement(n.p,null,"두 Virtual DOM 표현의 차이점을 찾고 실제 DOM에 업데이트 된 패치만 다시 랜더링하는 과정은 빠르며 실제로 다시 그려져야 하는 부분이 무엇인지 고민할 필요가 없다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고 더욱 쉽게 업데이트에 접근할 수 있다."),"\n",l.createElement(n.h3,null,"Component"),"\n",l.createElement(n.p,null,"Component는 UI를 재사용할 수 있는 독립적인 단위 라고 볼 수있다.\nUI는 컴포넌트를 이용해 제작하며 원하는 방법으로 이러한 컴포넌트를 조합할 수 있다. 실제로 애플리케이션을 개발할 때는 커스텀 컴포넌트를 제작하게 된다."),"\n",l.createElement(n.h3,null,"단방향 데이터 흐름"),"\n",l.createElement(n.p,null,"부모 컴포넌트에서 자식 컴포넌트로 흐르는 단방향 데이터 흐름을 지향한다."),"\n",l.createElement(n.h2,null,"마무리"),"\n",l.createElement(n.p,null,"회사에서 이때까지 혼자서 프론트앤드를 담당하다가 신입이 들어오면서 모르는게 있으면 가르쳐 주고 같이 협업하게 되었다. 과연 내가 누구에게 가르쳐주고 도와줄만큼 React를 잘알고 있나 싶어서 리마인드 하는식으로 다시 한번 되짚고 넘어가보고자 한다.\n열심히 공부해야지."),"\n",l.createElement(n.h2,null,"Reference"),"\n",l.createElement(n.blockquote,null,"\n",l.createElement(n.ul,null,"\n",l.createElement(n.li,null,l.createElement(n.a,{href:"http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791160505238&orderClick=LAG&Kc="},"리액트를 다루는 기술")),"\n"),"\n"))}var o=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.R)(),e.components);return n?l.createElement(n,e,l.createElement(r,e)):r(e)},c=t(2877),u=t(7736),s=t(407),i=t(7735),d=t(685),m=t(2248),h=t(8066),f=t(4848);function p(e){var n,t;let{data:l,children:r}=e;const{date:o,tags:p,title:g}=null!==(n=null==l||null===(t=l.mdx)||void 0===t?void 0:t.frontmatter)&&void 0!==n?n:{};return(0,f.jsx)(u.i,{children:(0,f.jsxs)(c.m,{className:h.q,children:[(0,f.jsx)(m.l,{className:h.V,title:g}),(0,f.jsx)(i.l,{date:o}),(0,f.jsx)(d.I,{tags:p}),(0,f.jsx)(s.E,{children:(0,f.jsx)(a.x,{children:r})})]})})}function g(e){return l.createElement(p,e,l.createElement(o,e))}},407:function(e,n,t){t.d(n,{E:function(){return o}});var l=t(4164),a="post-layout-content-module--post-layout-content-root--01754",r=t(4848);function o(e){let{children:n,className:t,...o}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,t),...o,children:n})}},7735:function(e,n,t){t.d(n,{l:function(){return o}});var l=t(4164),a="post-layout-date-module--post-layout-date-root--f34d1",r=t(4848);function o(e){let{className:n,date:t,...o}=e;return(0,r.jsx)("span",{className:(0,l.$)(a,n),...o,children:t})}},685:function(e,n,t){t.d(n,{I:function(){return c}});var l=t(9143),a=t(4194),r="post-layout-module--post-layout-tags--837df",o=t(4848);function c(e){let{tags:n}=e;return(0,o.jsx)(l.Y,{className:r,children:n.map((e=>(0,o.jsx)(a.Link,{to:"/tags/"+e,children:(0,o.jsx)(l.Y.Tag,{tag:e})},e)))})}},2248:function(e,n,t){t.d(n,{l:function(){return o}});var l=t(4164),a="post-layout-title-module--post-layout-title-root--88374",r=t(4848);function o(e){let{className:n,title:t,...o}=e;return(0,r.jsx)("h1",{className:(0,l.$)(a,n),...o,children:t})}},9143:function(e,n,t){t.d(n,{Y:function(){return r}});var l=t(4164),a=t(4848);const r=Object.assign((function(e){let{children:n,className:t,...r}=e;return(0,a.jsx)("div",{className:(0,l.$)("tags-module--tags-root--e3461",t),...r,children:n})}),{Tag:function(e){let{className:n,tag:t,...r}=e;return(0,a.jsx)("span",{className:(0,l.$)("tag-module--tag-root--aae01",n),...r,children:t})}})},2877:function(e,n,t){t.d(n,{m:function(){return o}});var l=t(4164),a="container-module--container-root--3b208",r=t(4848);function o(e){let{children:n,className:t,...o}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,t),...o,children:n})}},2629:function(e,n,t){t.d(n,{$:function(){return o}});var l=t(4164),a="basic-layout-module--basic-layout-root--a11e0",r=t(4848);function o(e){let{children:n,className:t,...o}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,t),...o,children:n})}},7736:function(e,n,t){t.d(n,{i:function(){return b}});var l=t(4194),a=t(4164),r="header-module--about--32ac9",o="header-module--header-logo--5bbdc",c="header-module--header-navigation--24bcb",u="header-module--header-navigation-item--ba248",s="header-module--header-navigation-item-link--d6da9",i="header-module--header-navigation-list--3815c",d="header-module--header-root--01ceb",m="header-module--tags--eb332",h=t(4848);function f(){return(0,h.jsxs)("header",{className:d,children:[(0,h.jsx)(l.Link,{to:"/",children:(0,h.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,h.jsx)("nav",{className:c,children:(0,h.jsxs)("ul",{className:i,children:[(0,h.jsx)("li",{className:u,children:(0,h.jsx)(l.Link,{to:"/tags",children:(0,h.jsx)("span",{"aria-label":"tags",className:(0,a.$)(s,m)})})}),(0,h.jsx)("li",{className:u,children:(0,h.jsx)("a",{href:"/about",rel:"noopener",target:"_blank",children:(0,h.jsx)("span",{"aria-label":"about",className:(0,a.$)(s,r)})})})]})})]})}var p="footer-module--footer-root--795ff";function g(){return(0,h.jsxs)("footer",{className:p,children:[(0,h.jsx)("span",{children:"Powered by Gatsby, Hosted by GitHub Pages."}),(0,h.jsxs)("span",{children:["©",(0,h.jsx)("a",{href:"https://github.com/partykyoung",rel:"noreferrer",target:"_blank",children:"KyoungAh"}),", All rights reserved."]})]})}var x=t(2629);function b(e){let{children:n}=e;return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{}),(0,h.jsx)(x.$,{children:n}),(0,h.jsx)(g,{})]})}},8066:function(e,n,t){t.d(n,{V:function(){return a},q:function(){return l}});var l="post-layout-module--post-layout-container--f40b5",a="post-layout-module--post-layout-title--1c575"},8453:function(e,n,t){t.d(n,{R:function(){return o},x:function(){return c}});var l=t(6540);const a={},r=l.createContext(a);function o(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),l.createElement(r.Provider,{value:n},e.children)}},4164:function(e,n,t){function l(e){var n,t,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var r=e.length;for(n=0;n<r;n++)e[n]&&(t=l(e[n]))&&(a&&(a+=" "),a+=t)}else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var e,n,t=0,a="",r=arguments.length;t<r;t++)(e=arguments[t])&&(n=l(e))&&(a&&(a+=" "),a+=n);return a}t.d(n,{$:function(){return a}})}}]);
//# sourceMappingURL=component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-02-reactjs-first-reactjs-md-9054f3901dfab8bab29f.js.map