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

✌ 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 시간..)
내일이면 반을 했는데 끝나면 아쉬울거 같다. 열심히 듣자.😤