Tech/ReactJS

[ReactJS 기초] VanillaJS와 ReactJS 비교

닝닝깅 2022. 5. 17. 23:21

버튼을 만들고 클릭하면 클릭 횟수를 세어주는 간단한 기능을 두 가지 방법을 사용해서 만들어보자

기존 VanillaJS 사용

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <span>Total clicks: 0</span>
    <button id="btn">Click me</button>
  </body>
  <script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter = counter + 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>
</html>

 

ReactJS로 element를 생성하여 사용

리액트JS를 좀 더 본질적으로 이해하기 위해서 현업에서는 사용하지 않는 어려운 방식을 우선 사용해보자.

리액트JS를 사용하기 위해서는 react와 react-dom을 import한 뒤 실행시켜야 한다.

react는 js의 라이브러리이고 react-dom은 모든 react element를 HTML body에 둘 수 있도록 해주는 패키지다.

 

우리는 react로 element를 생성하고 생성한 element를 react-dom을 통해 렌더링시킬 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "sexy-span",
        style: { color: "red" },
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello im a span"
    );
    const btn = React.createElement(
      "button",
      { onclick: () => console.log("clicked") },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

바닐라js는 HTML을 먼저 만들고 JS로 가져와서 HTML을 수정하는 방식이었다면

리액트js는 JS에서 먼저 만들고 나중에 HTML에 뿌리는 방식이다. 유저에게 보여지는 내용을 쉽게 컨트롤 할 수 있다.

 

ReactJS의 JSX를 사용

JSX는 js 확장 문법이다.

JSX로 앞서 사용했던 createElement( ) 대신 좀 더 간단한 방법으로 element를 만들 수 있다.

 

브라우저에 JSX가 호환될 수 있게 하려면 Babel을 설치한다. 

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello Im a title
      </h3>
    );
    const Button = () => (
      <button
        onClick={() => console.log("im clicked")}
        style={{ backgroudColor: "tomato" }}
      >
        Click me
      </button>
    );
    const container = (
    	<div> 
            <Title/> 
            <Button/>
        </div>
    );
    
    ReactDOM.render(container, root);
  </script>
</html>

JSX는 어플리케이션을 작은 컴포넌트 단위로 나눠 관리를 편리하게 한다. 컴포넌트를 만들 땐 반드시 대문자로 시작해야 한다.

Title 과 Button을 컴포넌트화시키고 container에 렌더링한다.