Vanilla JS와 React JS 비교하기

jini.choi·2022년 5월 20일

React

목록 보기

20/21

Vanilla JS로 작성 시

<!DOCTYPE html>
<html>

<body>
    <span id="TotalClick">Total Clicks: 0</span>
    <button id="btn">Click me</button>
</body>
<script>
    let counter = 0;
    const button = document.querySelector("#btn");
    const TotalClick = document.querySelector("#TotalClick");

    function handleClick(){
        counter = counter + 1;
        TotalClick.innerText = `Total Clicks: ${counter}`
    }
        
    button.addEventListener("click", handleClick);
</script>
</html>

HTML을 만든다.
Javascript로 가져온다.
event를 감지한다.
데이터를 업데이트 한다.
HTML을 업데이트 한다.

계속 이런 방식으로 작업하다가는 작업양이 많아질 경우 계속 가져와서 계속 event listener를 달고 handleClick만들고 handleSecondClick 만들고 handle, handle, handle, handle.....를 계속 만들어야 할것이다.

React JS

React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는 것
밑에 내용은 어려운 방법 실제 업무에서는 더 쉬운 방법사용
어려운 방법을 이해를 해야 쉬운것도 잘 활용할 수 있음
React를 import했기 때문에 createElementfunction을 가진 React object에 접근 가능
React JS: 엔진과 같음 interactive한 UI를 만들 수 있게 함
react-dom: React element를 HTML에 두는 역할
ReactDOM.render(): React element를 가지고 HTML로 만들어 배치하는 것(user에게 보여준다)
ReactDOM.render(span, span이 가야할 위치)
그래서 보통 body에 id=“root” 만들어서 span을 root안에 두라고 함

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>
</body>
<!-- react import -->
<!-- React JS: 엔진과 같음 interactive한 UI를 만들 수 있게 함 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- react-dom: React element를 HTML에 두는 역할 -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
    const root = document.getElementById("root");
    const span = React.createElement("span", {id: "cool-span", style: {color:"red"}}, "Hello");
    // property는 class name, id도 가능 style도 가능
    ReactDOM.render(span, root);
    //React.render(HTML로 만들 element, reactDOM에게 어디에 span을 둘것 인지)
</script>
</html>

vanilla JS- event

const h3 = document.querySelector("h3#title");

    function MouseEnter(){
        console.log("MouseEnter");
    }
        
h3.addEventListener("MouseEnter", MouseEnter);

React JS - event(어려운 방법)

const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseEnter: () => console.log("MouseEnter"),
      },
      "Hello"
);

어려운 방법으로 React JS 구축 시

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- React JS: 엔진과 같음 interactive한 UI를 만들 수 있게 함 -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- react-dom: React element를 HTML에 두는 역할 -->
  <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: "title",
        onMouseEnter: () => console.log("MouseEnter"),
      },
      "Hello"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("clicked"),
        style: { backgroundColor: "tomato" },
      },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
    //React.render(HTML로 만들 element, reactDOM에게 어디에 span을 둘것 인지)
  </script>
</html>