TWIL 2021-4 (5)

jh22j9·2021년 5월 21일

랜덤 코드 생성하기

문자와 숫자를 포함하는 랜덤 코드 생성하기

const tempCode = Math.random()
  .toString(36)
  .substr(2, 5);

CRA 없이 리액트 컴포넌트 만들기 - 1

웹팩 이해를 위해 CRA 없이 리액트 컴포넌트 만들어보기
🔗 웹 게임을 만들며 배우는 React
🔗 CDN 링크

컴포넌트 만들기

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const e = React.createElement;

      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
        }
        render() {
          return e("button", null, "Like"); // <button>Like<button>
        }
      }
    </script>
    <script>
      ReactDOM.render(e(LikeButton), document.querySelector("#root"));
      // result : <div id="root"><button>Like<button></div>
    </script>
  </body>
</html>

`state`, `props`

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const e = React.createElement;
      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            liked: false,
          };
        }
        render() {
          // e(type, props, children)
          return e(
            "button",
            {
              onClick: () => {
                this.setState({ liked: true });
              },
              type: "submit",
            },
            this.state.liked ? "Liked" : "Like"
          ); // <buttonclicked") type="submit"}>Like<button>
        }
      }
    </script>
    <script>
      ReactDOM.render(e(LikeButton), document.querySelector("#root"));
    </script>
  </body>
</html>

`JSX`, `Babel`

위 코드를 JSX 문법을 사용하여 간단하게 바꿀 수 있다. JSX를 적용하려면 Babel이 필요하다.

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            liked: false,
          };
        }
        render() {
          return (
            // JSX (JS + XML)
            <button
              type="submit"
              onClick={() => {
                this.setState({ liked: true });
              }}
            >
              {this.state.liked ? "Liked" : "Like"}
            </button>
          );
        }
      }
    </script>
    <script type="text/babel">
      ReactDOM.render(<LikeButton />, document.querySelector("#root"));
    </script>
  </body>
</html>

🔗 JSX 빠르게 시도해보기

리액트에서 바벨의 역할은 정확히 무엇일까?

바벨(babel)

Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

JSX and React
Babel can convert JSX syntax! Check out our React preset to get started.

🔗 What is Babel?

바벨의 주 기능은 ES6 문법으로 작성된 자바스크립트 코드를 여러 브라우저 및 환경에 호환되는 이전 버전의 자바스크립트 코드로 변환하는 것이라고 이해된다.

리액트에 쓰이는 이유는 바벨에 JSX를 자바스크립트로 변환하는 기능도 있기 때문이다.

왜 변환해야 할까? 브라우저는 자바스크립트 객체만 읽을 수 있어서이다. JSX는 JS + HTML 형태의 유사 문법이므로 브라우저가 직접 읽지 못한다.

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

🔗 Why can’t browsers read JSX?