[React.js] React Web Games - Ancient React & JSX

Knowledge/React.js

by winCow 2021. 7. 8. 09:55

1. Ancient React

<html>
  <head>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></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() {
          return e(
            "button",
            {
              onClick: () => {
                this.setState({ liked: true });
              },
              type: "submit",
            },
            this.state.liked === true ? "Liked" : "Like"
          );
        }
      }
    </script>
    <script>
      ReactDOM.render(e(LikeButton), document.querySelector("#root"));
    </script>
  </body>
</html>

Create-react-app을 사용하지 않고, 초기 형태로 react app을 만들면 위와 같다. 일반적인 HTML의 script 태그를 이용해, head 부분에서 react와 react-dom을 import하고, body 부분에서 id가 root인 div 태그를 만든다. 이후 컴포넌트를 정의하고 정의한 컴포넌트를 웹에 렌더링할 script 태그를 각각 만든다. 컴포넌트를 정의할 때 React의 createElement가 사용되고, 이를 렌더링할 때 reactDOM이 사용된다.

<div id='root'><button onclick="() => { console.log('clicked') }" type="submit">Like</button></div>

즉, reactDOM은 위와 같이, 정의된 리액트 컴포넌트의 render 함수의 실행 결과(React.createElement('Button', null, 'Like'))를 document.querySelector을 통해 해당 id 안에 삽입하는 역할을 한다.

      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            liked: false,
          };
        }
        render() {
          return e(
            "button",
            {
              onClick: () => {
                this.setState({ liked: true });
              },
              type: "submit",
            },
            this.state.liked === true ? "Liked" : "Like"
          );
        }
      }

리액트 컴포넌트는 구체적으로 위와 같이 정의했다. constructor에는 super(props)를 반드시 전달해야 하고, 컴포넌트에서 바뀔 여지가 있는 부분을 state로 정의한다.

render 함수는 e, 즉 React.createElement() 함수에 태그, 속성, 내용을 매개변수로 전달한 값을 리턴한다.

태그는 button, 속성은 onClick과 type을 전달한다. onClick의 내용으로, this.state.liked의 값을 true로 바꿔 주도록 setState 메소드를 입력하는데, 이것이 적용되어 버튼이 클릭되면 실제로 this.state.liked의 값이 true가 된다. liked의 상황이 바뀌게 되면, 세 번째 매개변수로 전달한 내용이 바뀌게 되는데, this.state.liked의 상태를 체크하여 true인 경우 Liked를, false인 경우 Like를 반환하게 될 것이다.

2. JSX

고대 리액트는 위와 같은 방식으로 작성이 되었다. 그러나 이제는 JSX를 사용하게 됨으로써 가독성을 높일 수 있게 되었다. 위의 코드를 JSX에 따라 작성하면 다음과 같다.

<html>
  <head>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></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 (
            <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는 JavaScript + XML을 의미한다. 자바스크립트에서 HTML(XML) 태그를 사용할 수 있도록 하는 문법이며, 이를 사용하기 위해서 Babel을 설정한다.head 부분에서 script로 바벨을 불러온 뒤, body 부분의 script 태그에 type="text/babel"을 추가하면 된다.

JSX를 사용하면 우선 React.createElement를 직접 정의하지 않아도 된다. 바로 리액트 컴포넌트를 정의할 수 있게 되며, HTML 태그를 사용하여 정의할 수 있게 된다. 또한, ReactDOM 역시 React.createElement함수 대신 <LikeButton> 컴포넌트를 전달할 수 있게 된다.

'Knowledge > React.js' 카테고리의 다른 글

[React.js] React Web Games - Multiplication Game (Functional Component) (0)	2021.07.19
[React.js] React Web Games - Multiplication Game (0)	2021.07.08
[React.js] react-movie-app (0)	2021.06.29
[React.js] LifeCycle (0)	2021.06.18
[React.js] PropTypes (0)	2021.06.17