<div id="readability-page-1" class="page"><div><figure width="100%"><span data-url="https://blog.kakaocdn.net/dn/eWgQFH/btqIsLeBSDp/joKMrnsYTgfMKwOz5UK3N1/img.jpg" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/eWgQFH/btqIsLeBSDp/joKMrnsYTgfMKwOz5UK3N1/img.jpg" width="100%"></span></figure>
<blockquote>
<p>✌ 9월08일 (화) 우아한 테크러닝 3기 3회차 강의 정리</p>
</blockquote>

<ul>
<li>리액트 만들어보기</li>
<li>리액트의 기본적인 부분들과 리액트를 구현해보자! 😤<blockquote>
<p><strong>📌 리액트를 구현해보는 이유!</strong><br>개발자가 사용자입장에서만 사용하지 않았으면 좋겠다.<br>이렇게 구현해보면서 더 좋은 개발자가 되었으면 좋겠다.</p>
</blockquote>
</li>
</ul>
<h2>🚀 React를 만들기 전에..</h2>
<ul>
<li><p><code>list</code>와 같은 데이터를 기반으로 JavaScript를 사용할 땐 아래와 같이 <code>rootElement.innerHTML</code>사용하여 화면에 표시할 수 있다.</p>
<pre><code>// index.js
const list = [
  { title: "React에 대해 알아봅시다." },
  { title: "Redux에 대해 알아봅시다." },
  { title: "TypeScript에 대해 알아봅시다." }
];
const rootElement = document.getElementById("root");
function app() {
  rootElement.innerHTML = `
      &lt;ul&gt;
            ${list.map((item) =&gt; `&lt;li&gt;${item.title}&lt;/li&gt;`).join("")}
      &lt;/ul&gt;
  `;
}
app();</code></pre>
</li>
<li><p>위의 <code>app()</code>함수는 <code>list</code>를 바깥에서 직접 가져다 쓰기 때문에 좋지 못하다.</p>
</li>
<li><p>바깥의 영향을 안 받게 <strong>순수 함수</strong>로 만들어 준다.</p>
<pre><code>// 생략..
function app(items) {
  rootElement.innerHTML = `
      &lt;ul&gt;
            ${items.map((item) =&gt; `&lt;li&gt;${item.title}&lt;/li&gt;`).join("")}
      &lt;/ul&gt;
  `;
}
app(list);</code></pre>
<h3>🌈 React가 탄생한 이유</h3>
</li>
<li><p>위와 같이 <code>rootElement.innerHTML</code>의 DOM을 직접 사용하여 작성한다.</p>
</li>
<li><p>이럴때 데이터가 많아지고 UI도 많아지고, UI가 많아지다보니 어떨땐 A라는 UI를 사용자에게 보여주고, 어떨땐 B라는 UI를 사용자에게 보여주고, C라는 이미지를 보여주게 된다. 이런것을 <strong>라우팅</strong>이라고 한다.</p>
</li>
<li><p>데이터도 위와 같이 코드에 박혀 있는 것이 아니고 서버에 있다보니 API의 호출을 통해서 비동기적으로 필요한 상황에 적시적소 원하는 타이밍에 데이터를 가져온다. 이렇듯 <strong>끊임없이 변화한다.</strong></p>
</li>
<li><p>이렇게 변하다보니 한달 뒤에 또는 두달 세달 뒤에 코드를 고칠려고 할 때 생각이 잘 안난다...</p>
</li>
<li><p>빨리 생각이 날 수 있는 구조가 있는데 여기에 큰 원칙으로 좋은 아키텍처는 <strong>같은 것끼리 묶어주고, 다른 것끼리 분리하는 것이다.(대원칙)</strong></p>
</li>
<li><p>이 원칙의 가장 중요한 첫 번째 할 수 있는 일은 <strong>네이밍을 잘 지어주는 것으로 네이밍만 잘해줘도 70%는 해결된다.</strong></p>
</li>
<li><p>위 코드처럼 <code>Real DOM</code>을 가지고 HTML UI를 조작하는 것은 안전성이 매우 떨어진다.</p>
</li>
<li><p>그 이유는 <code>Real DOM</code>은 너무 Low Level API이기 때문이여서 추상화 수준이 높지 못하다.</p>
</li>
<li><p>이것으로 조작하다보면 필연적으로 <strong>복잡도가 올라가게 되는 것이다.</strong> 그 말은 즉, <strong>수정하기가 매우 까다롭다.</strong></p>
</li>
<li><p>이런 상황을 해결하기 위해 <code>react</code>와 같은 것들이 나오게 되었다!🤩</p>
</li>
<li><p>브라우저는 HTML같은 것을 DOM이라는 트리 구조의 데이터로 변환해서 관리한다.</p>
</li>
<li><p>이처럼 자바스크립트 자체로 직접 접근하는 것 또한 까다로우니까 <code>Virtual DOM</code>을 사용한  React가 나왔다.</p>
</li>
<li><p><strong>사실상 HTML 문자열을 브라우저가 DOM이라는 트리 구조의 객체 형태로 만드는 것이나 DOM을 <code>Virtual DOM</code>으로 만드는 것이다 결국 똑같은 컨셉이다.</strong></p>
</li>
</ul>
<h2>🚀 React의 기본 이해와 Virtual DOM</h2>
<ul>
<li><p>기본 구조</p>
<pre><code>import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
      &lt;div&gt;
          &lt;h1&gt;Hello?&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;React&lt;/li&gt;
              &lt;li&gt;Redux&lt;/li&gt;
              &lt;li&gt;MobX&lt;/li&gt;
              &lt;li&gt;Typescript&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  );
}
ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre></li>
<li><p>JSX문법이며 Babel이 변환해준다.</p>
</li>
<li><p>Babel의 <code>react plugin</code>이 리액트 테그를 변환해주는 것이다. 그렇기 때문에 <strong>실제로는 결국 그냥 함수 호출에 불과하다.</strong></p>
</li>
<li><p><code>ReactDOM</code>은 <code>render</code> 정적 메소드를 갖는데 2개의 인자를 받는다.</p>
</li>
<li><p>첫 번째 인자는 화면에 렌더링할 컴포넌트이며 두 번째 인자는 컴포넌트를 렌더링할 HTML 요소이다.</p>
<pre><code>// Babel에서 jsx를 javasript로 변환
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }
function App() {
    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Hello?"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "React"), /*#__PURE__*/_react.default.createElement("li", null, "Redux"), /*#__PURE__*/_react.default.createElement("li", null, "MobX"), /*#__PURE__*/_react.default.createElement("li", null, "Typescript")));
}
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(App, null), document.getElementById("root"));</code></pre><blockquote>
<p> react의 <code>createElement</code>는 Virtual DOM을 만들게 된다.<br> 자바스크립트 사이드에서는 <code>createElement</code>라는 함수를 이용해서 Virtual DOM이 만들어지고 리액트는 자신이 만든 것이라 잘 알기 때문에 Virtual DOM을 만든 다음에 그것을 그대로 Real DOM으로 변환해주는 것이다.<br>그리고 개발자들에게는 <code>createElement</code>를 안쓰기때문에 컴포넌트로 좀 더 쉽게 사용하기 위해서 JSX를 제공하는 것이다.</p>
</blockquote>
<pre><code>import React from "react";
import ReactDOM from "react-dom";
// StudyList 이름을 가질 수 있다.
function StudyList() {
  return (
      &lt;ul&gt;
          &lt;li&gt;React&lt;/li&gt;
          &lt;li&gt;Redux&lt;/li&gt;
          &lt;li&gt;MobX&lt;/li&gt;
          &lt;li&gt;Typescript&lt;/li&gt;
      &lt;/ul&gt;
  );
}
function App() {
  return (
      &lt;div&gt;
          &lt;h1&gt;Hello?&lt;/h1&gt;
          &lt;StudyList /&gt;
      &lt;/div&gt;
  );
}
ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre></li>
<li><p>위와 같이 분리를 해서 컴포넌트 이름을 지정해서 사용할 수 있다.</p>
</li>
<li><p><strong>이렇게 이름을 줄 수 있는 구조는 더 이상 MarkUp을 보고서는 우리가 어떤 데이터가 어디에 두었는지를 고민하지 않고 컴포턴트 이름만(잘 지어졌을 경우) 보고서 확인이 가능함으로써 읽기 쉬워지고, 읽기 쉬어짐에 따라 고치기도 쉬워진다.</strong></p>
</li>
<li><p>위의 StudyList 함수에서 반환하는 JSX 엘리먼트들을 Babel로 변환되면 아래와 같은 형태이다.</p>
<pre><code>function StudyList() {
  return /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "React"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "Redux"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "MobX"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "Typescript"));
}</code></pre></li>
<li><p>변환된 상태를 참고하여 객체로 바꾸어보면 아래의 <code>vdom</code>과 같은 형태이다.</p>
<pre><code>const vdom = {
  type: "ul",
  props: {},
  children: [
      { type: "li", props: { className: "item" }, children: "React" },
      { type: "li", props: { className: "item" }, children: "Redux" },
      { type: "li", props: { className: "item" }, children: "Typescript" },
      { type: "li", props: { className: "item" }, children: "MobX" },
  ],
};</code></pre></li>
<li><p><strong>이렇게 확인해보면 왜 React가 결국 맨 상위 단 하나의 최상위 부모 컨포넌트가 있을 수 밖에 없는지 알 수 있는 구조이다.</strong></p>
</li>
<li><p>이렇듯 react는 Virtual DOM이 단 하나인 이유이다.</p>
</li>
</ul>
<h2>🚀 React 만들어보기!</h2>
<ul>
<li><p>위의 JSX가 변환된 모습을 보면 <code>createElement</code>는 아래와 같은 형태로 이루어져있다.</p>
<pre><code>// props는 없으면 빈 객체, children는 여러 개의 배열
function createElement(type, props = {}, ...children) {
return { type, props, children };
}</code></pre></li>
<li><p>위에서 만들어본 <code>vdom</code>을 <code>createElement</code>를 이용하여 만들 수 있다.</p>
<pre><code>// 예시
const vdom = createElement("ul", {}, createElement("li", {}, "React"));</code></pre><figure width="100%"><span data-url="https://blog.kakaocdn.net/dn/wsVZY/btqIdrWKYqn/1wBfsvfa8KWiiBHW2p31sk/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/wsVZY/btqIdrWKYqn/1wBfsvfa8KWiiBHW2p31sk/img.png" width="100%"></span></figure>
</li>
<li><p><code>createElement</code>는 vdom 객체를 만드는 함수고 render할 때, <code>render</code> 객체는 계속 쫒아가면서 realdom으로 변환한다.</p>
</li>
<li><p>최종적으로 다 만들면 root 컴포넌트 컨테이너한테 <code>append child</code>를 하는 방식이다.</p>
</li>
<li><p>바벨의 옵션을 이용해서 맨 상단에 주석을 넣어준다.</p>
</li>
<li><p>이 <code>@jsx</code>의 지시어를 이용해서 내가 원하는 이름을 주면 <code>createElement</code>가 원하는 이름으로 변경이 된다.</p>
<pre><code>/* @jsx createElement */
function StudyList(props) {
  return (
      &lt;ul&gt;
          &lt;li className="item"&gt;React&lt;/li&gt;
          &lt;li className="item"&gt;Redux&lt;/li&gt;
          &lt;li className="item"&gt;MobX&lt;/li&gt;
          &lt;li className="item"&gt;Typescript&lt;/li&gt;
      &lt;/ul&gt;
  );
}</code></pre></li>
<li><p>이 말을 즉, 바벨만 가지고 Virtual DOM을 만들 메소드(트랜스파일될 메소드)를 임의로 바꿔서 내가 만든 다른 것으로 교체가 가능하다.</p>
</li>
<li><p>이 과정은 컴파일 타임이다.</p>
<pre><code>// createElement의 이름으로 변환되었다.
"use strict";
/* @jsx createElement */
function StudyList(props) {
return createElement("ul", null, createElement("li", {
  className: "item"
}, "React"), createElement("li", {
  className: "item"
}, "Redux"), createElement("li", {
  className: "item"
}, "MobX"), createElement("li", {
  className: "item"
}, "Typescript"));
}</code></pre></li>
<li><p><code>@jsx</code>지시어를 사용하면 js문법을 찾아서 자동으로 변환을 해준다.</p>
</li>
<li><p>이렇게 <code>createElement</code>로 변하게 되고 우리가 만든 <code>createElement</code>함수로 들어가게 된다.</p>
<pre><code>/* @jsx createElement */
function createElement(type, props = {}, ...children) {
return { type, props, children };
}
function StudyList(props) {
return (
  &lt;ul&gt;
    &lt;li className="item" label="haha"&gt; React &lt;/li&gt;
    &lt;li className="item"&gt;Redux&lt;/li&gt;
    &lt;li className="item"&gt;TypeScript&lt;/li&gt;
    &lt;li className="item"&gt;Mobx&lt;/li&gt;
  &lt;/ul&gt;
);
}
function App() {
return (
  &lt;div&gt;
    &lt;h1&gt;Hello?&lt;/h1&gt;
    &lt;StudyList item="abcd" id="hoho" /&gt;
  &lt;/div&gt;
);
}
//  변환되면 console.log(createElement(App, null));
console.log(&lt;App /&gt;); </code></pre></li>
<li><p>이렇게 <code>console.log(&lt;App /&gt;);</code> 해보게 되면 아래 사진처럼 <code>App</code>함수가 들어간다.<br></p><figure width="100%"><span data-url="https://blog.kakaocdn.net/dn/vBuaH/btqIdsnSBTp/KNk3KxkKEOO7KqxJ9pB640/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/vBuaH/btqIdsnSBTp/KNk3KxkKEOO7KqxJ9pB640/img.png" width="100%"></span></figure>
</li>
<li><p><code>type</code>의 타입을 비교하는 로직을 추가해준다.</p>
<pre><code>function createElement(type, props = {}, ...children) {
if (typeof type === "function") {
    // 호출해준다.
  return type.apply(null, [props, ...children]);
}
return { type, props, children };
}</code></pre></li>
</ul>
<h3>🌈 리액트에서 사용자 컴포넌트가 대문자로 시작하는 이유</h3>
<ul>
<li>변환된 App안의 태그들을 확인해보면 문자열로 들어가는 것을 확인할 수 있다.<pre><code>function app() {
return (
  &lt;div&gt;
    &lt;h1&gt;Hello?&lt;/h1&gt;
    &lt;StudyList item="abcd" id="hoho" /&gt;
  &lt;/div&gt;
);
}
// 변환
function app() {
return createElement("div", null, createElement("h1", null, "Hello?"), createElement(StudyList, {
  item: "abcd",
  id: "hoho"
}));
}</code></pre></li>
<li>하지만 대문자로 시작한 App은 함수 그 자체로 넣어버린다. (Type이 function)<pre><code>// 대문자일 때
console.log(&lt;App /&gt;);
// 변환
console.log(createElement(App, null));
// 소문자일 때
console.log(&lt;app /&gt;);
// 변환
console.log(createElement("app", null));</code></pre></li>
<li>이처럼 리액트에서는 사용자 컴포넌트는 무조건 대문자로 시작해서 사용해야 한다. </li>
</ul>
<ul>
<li><p><code>createElement</code>로 생성된 객체를 실제 DOM으로 구성하는 render 함수를 작성한다.</p>
</li>
<li><p><code>createElement</code>로 생성된 객체를 보면 같은 형태로 계속 이루어져있다.</p>
</li>
<li><p>그리고 마지막에는 전부 appendChild를 해준다.</p>
<pre><code>// 재귀함수
function renderElement(node) {
if (typeof node === "string") {
  return document.createTextNode(node);
}
const el = document.createElement(node.type);
node.children.map(renderElement).forEach((element) =&gt; {
  el.appendChild(element);
});
return el;
}
function render(vdom, container) {
container.appendChild(renderElement(vdom));
}</code></pre></li>
<li><p><code>props</code>를 넘겨받는 컴포넌트의 경우에도 같은 형식으로 적용할 수 있다.</p>
<pre><code>function Row(props) {
return &lt;li&gt;{props.label}&lt;/li&gt;;
}
function StudyList(props) {
return (
  &lt;ul&gt;
    &lt;Row label="하하하" /&gt;
    &lt;li className="item" label="haha"&gt;React&lt;/li&gt;
    &lt;li className="item"&gt;Redux&lt;/li&gt;
    &lt;li className="item"&gt;TypeScript&lt;/li&gt;
    &lt;li className="item"&gt;Mobx&lt;/li&gt;
  &lt;/ul&gt;
);
}</code></pre></li>
<li><p><code>render</code> 함수를 사용하여 real DOM의 HTML에 붙여 넣을 수 있다.</p>
<pre><code>render(&lt;App /&gt;, document.getElementById("root"));</code></pre></li>
</ul>
<p>📌 <strong>전체 소스는 <a href="https://github.com/saseungmin/woowa_tech_learning_react_typescript/blob/master/week_2_1/react.js">GitHub</a> 확인해주세요! 🙏</strong></p>
<h2>🚀 React의 클래스 컴포넌트와 함수 컴포넌트</h2>
<h3>🌈 클래스 컴포넌트</h3>
<ul>
<li>클래스 컴포넌트는 라이프사이클 API를 사용하여 state를 생성자에서 초기화할 수 있다.<pre><code>class Hello extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    count: 1
  };
}
componentDidMount() {
  this.setState({ count: this.state.count + 1 });
}
render() {
  return &lt;p&gt;안녕하세요!&lt;/p&gt;;
}
}</code></pre></li>
<li><a href="https://ko.reactjs.org/docs/components-and-props.html">react 공식문서</a> 확인하기 ❗❗</li>
</ul>
<h3>🌈 함수 컴포넌트(Hook)</h3>
<ul>
<li>함수 컴포넌트는 초창기에는 <strong>상태는 함수가 호출될 때 마다 생성되기 때문에</strong> 유지될 수 없었기 때문에 상태를 관리하지 못한다고 여겨져 사용하지 않았다.</li>
<li>아래처럼 안에 변수는 함수 내부의 상태처럼 여겨졌다.<pre><code>function App() {
  let x = 10;
  return (
      &lt;div&gt;
          &lt;h1&gt;상태&lt;/h1&gt;
          &lt;Hello /&gt;
      &lt;/div&gt;
  );
}</code></pre></li>
<li>하지만 함수 컴포넌트도 Hooks가 나온 뒤 상태 관리를 할 수 있게 되었다.<pre><code>function App() {
// 반환하는 값은 배열
const [counter, setCounter] = useState(1);
// const counter = result[0];
// const setCounter = result[2];
return (
  &lt;div&gt;
    &lt;h1 onClick={() =&gt; setCounter(counter + 1)}&gt;상태{counter}&lt;/h1&gt;
    &lt;Hello /&gt;
  &lt;/div&gt;
);
}</code></pre></li>
<li>h1 태그를 클릭하면 counter 상태가 1씩 증가한다.</li>
<li>hook은 항상 최상위(at the Top Level)에서만 Hook을 호출해야 해야한다. <a href="https://ko.reactjs.org/docs/hooks-rules.html">react Hooks 규칙</a> 참고</li>
<li>최상위가 아닌 부분에서 호출 될 경우 전역 배열에 원하지 않는 값을 반환하여 문제가 발생 할 경우가 생길 수 있다.</li>
<li><a href="https://ko.reactjs.org/docs/hooks-intro.html">공식 문서</a>를 참고하자! 😤</li>
</ul>
<h2>🚀 우아한 테크러닝 3기 3회차 후기</h2>
<blockquote>
<p>이번 시간은 리액트를 직접 만들어보았다. 😀<br>만들어보면서 계속 파보면서 여태까지 아무것도 모르고 리액트를 사용했다고 생각했다..<br>이번 계기로 왜? 라는 질문을 계속 스스로에게 해야할 거 같다.<br>그냥 표면적으로 보이는 것만 보지 말고 원리를 이해하도록 노력해야 할 거 같다.<br>3회차까지 들으면서 김민태 강사님의 열정과 정성이 느껴져서 너무 좋았다.(2회차는 10시 반까지.. 3회차도 7시부터 QnA 시간..)<br>내일이면 반을 했는데 끝나면 아쉬울거 같다. 열심히 듣자.😤</p>
</blockquote>

</div></div>

SaDevelog

Harang

✌ 9월08일 (화) 우아한 테크러닝 3기 3회차 강의 정리
  3회차 강의 목표
리액트 만들어보기
리액트의 기본적인 부분들과 리액트를 구현해보자!  
  리액트를 구현해보는 이유!
개발자가 사용자입장에서만 사용하지 않았으면 좋겠다.
이렇게 구현해보면서 더 좋은 개발자가 되었으면 좋겠다.
  React를 만들기 전에..
list와 같은 데이터를 기반으로 JavaScript를 사용할 땐 아래와 같이 rootElement.innerHTML사용하여 화면에 표시할 수 있다.
// index.js
const list = [
  { title: "React에 대해 알아봅시다." },
  { title: "Redux에 대해 알아봅시다." },
  { title: "TypeScript에 대해 알아봅시다." }
];
const rootElement = document.getElementById("root");
function app() {
  rootElement.innerHTML = `
      <ul>
            ${list.map((item) => `<li>${item.title}</li>`).join("")}
      </ul>
  `;
}
app();
위의 app()함수는 list를 바깥에서 직접 가져다 쓰기 때문에 좋지 못하다.
바깥의 영향을 안 받게 순수 함수로 만들어 준다.
// 생략..
function app(items) {
  rootElement.innerHTML = `
      <ul>
            ${items.map((item) => `<li>${item.title}</li>`).join("")}
      </ul>
  `;
}
app(list);
  React가 탄생한 이유
위와 같이 rootElement.innerHTML의 DOM을 직접 사용하여 작성한다.
이럴때 데이터가 많아지고 UI도 많아지고, UI가 많아지다보니 어떨땐 A라는 UI를 사용자에게 보여주고, 어떨땐 B라는 UI를 사용자에게 보여주고, C라는 이미지를 보여주게 된다. 이런것을 라우팅이라고 한다.
데이터도 위와 같이 코드에 박혀 있는 것이 아니고 서버에 있다보니 API의 호출을 통해서 비동기적으로 필요한 상황에 적시적소 원하는 타이밍에 데이터를 가져온다. 이렇듯 끊임없이 변화한다.
이렇게 변하다보니 한달 뒤에 또는 두달 세달 뒤에 코드를 고칠려고 할 때 생각이 잘 안난다...
빨리 생각이 날 수 있는 구조가 있는데 여기에 큰 원칙으로 좋은 아키텍처는 같은 것끼리 묶어주고, 다른 것끼리 분리하는 것이다.(대원칙)
이 원칙의 가장 중요한 첫 번째 할 수 있는 일은 네이밍을 잘 지어주는 것으로 네이밍만 잘해줘도 70%는 해결된다.
위 코드처럼 Real DOM을 가지고 HTML UI를 조작하는 것은 안전성이 매우 떨어진다.
그 이유는 Real DOM은 너무 Low Level API이기 때문이여서 추상화 수준이 높지 못하다.
이것으로 조작하다보면 필연적으로 복잡도가 올라가게 되는 것이다. 그 말은 즉, 수정하기가 매우 까다롭다.
이런 상황을 해결하기 위해 react와 같은 것들이 나오게 되었다! 
브라우저는 HTML같은 것을 DOM이라는 트리 구조의 데이터로 변환해서 관리한다.
이처럼 자바스크립트 자체로 직접 접근하는 것 또한 까다로우니까 Virtual DOM을 사용한  React가 나왔다.
사실상 HTML 문자열을 브라우저가 DOM이라는 트리 구조의 객체 형태로 만드는 것이나 DOM을 Virtual DOM으로 만드는 것이다 결국 똑같은 컨셉이다.
  React의 기본 이해와 Virtual DOM
기본 구조
import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
      <div>
          <h1>Hello?</h1>
          <ul>
              <li>React</li>
              <li>Redux</li>
              <li>MobX</li>
              <li>Typescript</li>
          </ul>
      </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
JSX문법이며 Babel이 변환해준다.
Babel의 react plugin이 리액트 테그를 변환해주는 것이다. 그렇기 때문에 실제로는 결국 그냥 함수 호출에 불과하다.
ReactDOM은 render 정적 메소드를 갖는데 2개의 인자를 받는다.
첫 번째 인자는 화면에 렌더링할 컴포넌트이며 두 번째 인자는 컴포넌트를 렌더링할 HTML 요소이다.
// Babel에서 jsx를 javasript로 변환
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function App() {
    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Hello?"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "React"), /*#__PURE__*/_react.default.createElement("li", null, "Redux"), /*#__PURE__*/_react.default.createElement("li", null, "MobX"), /*#__PURE__*/_react.default.createElement("li", null, "Typescript")));
}
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(App, null), document.getElementById("root"));
 react의 createElement는 Virtual DOM을 만들게 된다.
 자바스크립트 사이드에서는 createElement라는 함수를 이용해서 Virtual DOM이 만들어지고 리액트는 자신이 만든 것이라 잘 알기 때문에 Virtual DOM을 만든 다음에 그것을 그대로 Real DOM으로 변환해주는 것이다.
그리고 개발자들에게는 createElement를 안쓰기때문에 컴포넌트로 좀 더 쉽게 사용하기 위해서 JSX를 제공하는 것이다.
import React from "react";
import ReactDOM from "react-dom";
// StudyList 이름을 가질 수 있다.
function StudyList() {
  return (
      <ul>
          <li>React</li>
          <li>Redux</li>
          <li>MobX</li>
          <li>Typescript</li>
      </ul>
  );
}
function App() {
  return (
      <div>
          <h1>Hello?</h1>
          <StudyList />
      </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
위와 같이 분리를 해서 컴포넌트 이름을 지정해서 사용할 수 있다.
이렇게 이름을 줄 수 있는 구조는 더 이상 MarkUp을 보고서는 우리가 어떤 데이터가 어디에 두었는지를 고민하지 않고 컴포턴트 이름만(잘 지어졌을 경우) 보고서 확인이 가능함으로써 읽기 쉬워지고, 읽기 쉬어짐에 따라 고치기도 쉬워진다.
위의 StudyList 함수에서 반환하는 JSX 엘리먼트들을 Babel로 변환되면 아래와 같은 형태이다.
function StudyList() {
  return /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "React"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "Redux"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "MobX"), /*#__PURE__*/_react.default.createElement("li", {
    className: "item"
  }, "Typescript"));
}
변환된 상태를 참고하여 객체로 바꾸어보면 아래의 vdom과 같은 형태이다.
const vdom = {
  type: "ul",
  props: {},
  children: [
      { type: "li", props: { className: "item" }, children: "React" },
      { type: "li", props: { className: "item" }, children: "Redux" },
      { type: "li", props: { className: "item" }, children: "Typescript" },
      { type: "li", props: { className: "item" }, children: "MobX" },
  ],
};
이렇게 확인해보면 왜 React가 결국 맨 상위 단 하나의 최상위 부모 컨포넌트가 있을 수 밖에 없는지 알 수 있는 구조이다.
이렇듯 react는 Virtual DOM이 단 하나인 이유이다.
  React 만들어보기!
위의 JSX가 변환된 모습을 보면 createElement는 아래와 같은 형태로 이루어져있다.
// props는 없으면 빈 객체, children는 여러 개의 배열
function createElement(type, props = {}, ...children) {
return { type, props, children };
}
위에서 만들어본 vdom을 createElement를 이용하여 만들 수 있다.
// 예시
const vdom = createElement("ul", {}, createElement("li", {}, "React"));
createElement는 vdom 객체를 만드는 함수고 render할 때, render 객체는 계속 쫒아가면서 realdom으로 변환한다.
최종적으로 다 만들면 root 컴포넌트 컨테이너한테 append child를 하는 방식이다.
바벨의 옵션을 이용해서 맨 상단에 주석을 넣어준다.
이 @jsx의 지시어를 이용해서 내가 원하는 이름을 주면 createElement가 원하는 이름으로 변경이 된다.
/* @jsx createElement */
function StudyList(props) {
  return (
      <ul>
          <li className="item">React</li>
          <li className="item">Redux</li>
          <li className="item">MobX</li>
          <li className="item">Typescript</li>
      </ul>
  );
}
이 말을 즉, 바벨만 가지고 Virtual DOM을 만들 메소드(트랜스파일될 메소드)를 임의로 바꿔서 내가 만든 다른 것으로 교체가 가능하다.
이 과정은 컴파일 타임이다.
// createElement의 이름으로 변환되었다.
"use strict";
/* @jsx createElement */
function StudyList(props) {
return createElement("ul", null, createElement("li", {
  className: "item"
}, "React"), createElement("li", {
  className: "item"
}, "Redux"), createElement("li", {
  className: "item"
}, "MobX"), createElement("li", {
  className: "item"
}, "Typescript"));
}
@jsx지시어를 사용하면 js문법을 찾아서 자동으로 변환을 해준다.
이렇게 createElement로 변하게 되고 우리가 만든 createElement함수로 들어가게 된다.
/* @jsx createElement */
function createElement(type, props = {}, ...children) {
return { type, props, children };
}
function StudyList(props) {
return (
  <ul>
    <li className="item" label="haha"> React </li>
    <li className="item">Redux</li>
    <li className="item">TypeScript</li>
    <li className="item">Mobx</li>
  </ul>
);
}
function App() {
return (
  <div>
    <h1>Hello?</h1>
    <StudyList item="abcd" id="hoho" />
  </div>
);
}
//  변환되면 console.log(createElement(App, null));
console.log(<App />); 
이렇게 console.log(<App />); 해보게 되면 아래 사진처럼 App함수가 들어간다.
type의 타입을 비교하는 로직을 추가해준다.
function createElement(type, props = {}, ...children) {
if (typeof type === "function") {
    // 호출해준다.
  return type.apply(null, [props, ...children]);
}
return { type, props, children };
}
  리액트에서 사용자 컴포넌트가 대문자로 시작하는 이유
변환된 App안의 태그들을 확인해보면 문자열로 들어가는 것을 확인할 수 있다.
function app() {
return (
  <div>
    <h1>Hello?</h1>
    <StudyList item="abcd" id="hoho" />
  </div>
);
}
// 변환
function app() {
return createElement("div", null, createElement("h1", null, "Hello?"), createElement(StudyList, {
  item: "abcd",
  id: "hoho"
}));
}
하지만 대문자로 시작한 App은 함수 그 자체로 넣어버린다. (Type이 function)
// 대문자일 때
console.log(<App />);
// 변환
console.log(createElement(App, null));
// 소문자일 때
console.log(<app />);
// 변환
console.log(createElement("app", null));
이처럼 리액트에서는 사용자 컴포넌트는 무조건 대문자로 시작해서 사용해야 한다. 
createElement로 생성된 객체를 실제 DOM으로 구성하는 render 함수를 작성한다.
createElement로 생성된 객체를 보면 같은 형태로 계속 이루어져있다.
그리고 마지막에는 전부 appendChild를 해준다.
// 재귀함수
function renderElement(node) {
if (typeof node === "string") {
  return document.createTextNode(node);
}
const el = document.createElement(node.type);
node.children.map(renderElement).forEach((element) => {
  el.appendChild(element);
});
return el;
}
function render(vdom, container) {
container.appendChild(renderElement(vdom));
}
props를 넘겨받는 컴포넌트의 경우에도 같은 형식으로 적용할 수 있다.
function Row(props) {
return <li>{props.label}</li>;
}
function StudyList(props) {
return (
  <ul>
    <Row label="하하하" />
    <li className="item" label="haha">React</li>
    <li className="item">Redux</li>
    <li className="item">TypeScript</li>
    <li className="item">Mobx</li>
  </ul>
);
}
render 함수를 사용하여 real DOM의 HTML에 붙여 넣을 수 있다.
render(<App />, document.getElementById("root"));
  전체 소스는 GitHub 확인해주세요!  
  React의 클래스 컴포넌트와 함수 컴포넌트
  클래스 컴포넌트
클래스 컴포넌트는 라이프사이클 API를 사용하여 state를 생성자에서 초기화할 수 있다.
class Hello extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    count: 1
  };
}
componentDidMount() {
  this.setState({ count: this.state.count + 1 });
}
render() {
  return <p>안녕하세요!</p>;
}
}
react 공식문서 확인하기 ❗❗
  함수 컴포넌트(Hook)
함수 컴포넌트는 초창기에는 상태는 함수가 호출될 때 마다 생성되기 때문에 유지될 수 없었기 때문에 상태를 관리하지 못한다고 여겨져 사용하지 않았다.
아래처럼 안에 변수는 함수 내부의 상태처럼 여겨졌다.
function App() {
  let x = 10;
  return (
      <div>
          <h1>상태</h1>
          <Hello />
      </div>
  );
}
하지만 함수 컴포넌트도 Hooks가 나온 뒤 상태 관리를 할 수 있게 되었다.
function App() {
// 반환하는 값은 배열
const [counter, setCounter] = useState(1);
// const counter = result[0];
// const setCounter = result[2];
return (
  <div>
    <h1 onClick={() => setCounter(counter + 1)}>상태{counter}</h1>
    <Hello />
  </div>
);
}
h1 태그를 클릭하면 counter 상태가 1씩 증가한다.
hook은 항상 최상위(at the Top Level)에서만 Hook을 호출해야 해야한다. react Hooks 규칙 참고
최상위가 아닌 부분에서 호출 될 경우 전역 배열에 원하지 않는 값을 반환하여 문제가 발생 할 경우가 생길 수 있다.
공식 문서를 참고하자!  
  우아한 테크러닝 3기 3회차 후기
이번 시간은 리액트를 직접 만들어보았다.  
만들어보면서 계속 파보면서 여태까지 아무것도 모르고 리액트를 사용했다고 생각했다..
이번 계기로 왜? 라는 질문을 계속 스스로에게 해야할 거 같다.
그냥 표면적으로 보이는 것만 보지 말고 원리를 이해하도록 노력해야 할 거 같다.
3회차까지 들으면서 김민태 강사님의 열정과 정성이 느껴져서 너무 좋았다.(2회차는 10시 반까지.. 3회차도 7시부터 QnA 시간..)
내일이면 반을 했는데 끝나면 아쉬울거 같다. 열심히 듣자.

✔ 우아한 테크러닝 3기: React & TypeScript 3회차

댓글