카테고리 없음

[ReactJS] 왜 React JS를 쓰는가? (3) : React JS는 Interactivty 을 위해서 제작된 것이다.- react js vs vanilla js

mswait 2022. 3. 3. 23:22

React JS는 Interactivty 을 위해서 제작된 것이다.

본격적으로 Javascript로 HTML을 조작해 보자.

이렇게 div 안에 span 과 button 을 두개다 넣어주는 작업을 Javascript로 하려면 어떻게 해야할까?

배열로 이둘을 createElement()의 세번째 인자에 넣어주면 된다.

(Javascript로 document로 가져온 element에 다른 element를 추가해 줄때에는 appendChild() 를 해주었다.)

object로 주어진 element의 프로퍼티 안에서는 id 나 class 값, style 값들을 변경하는 것 말고도 eventListener을 추가해 줄 수 가 있다. 바로 {onClick : () => console.log("I'm clicked")}

 

React를 이용해

1. button을 만드는데

2. content도 담고,

3. 바로 eventListener도 연결하고

코드 한줄로 vanilla js 였다면 4줄은 됐을 코드를 줄였다.

span이 크기가 작아 h3 태그로 변경해 주었고 h3 태그에도 이벤트리스너를 추가해 주었다.

 

vanilla js 와 비교하면 차이점이 있다.

 

바닐라 js 에는 click 과 같이 이벤트를 적어주었는데

 

React JS 에는 on~ 으로 이벤트리스너를 써줘야 한다.

onClick :

onMouseEnter : 

 

우리가 해야하는 일은 

React.createElement()를 하고

HTML 태그를 입력하고

EventListener를 등록하고

Contents를 적어주면 된다.

 

하나의 State 문으로 이렇게나 많은 일들을 간단하게 처리할 수 있다.

이게 ReactJS의 힘이다.

 

이제 보다 이해가 잘될 것이다. 

React JS는 Interactivty(간편한 이벤트리스너 처리) 을 위해서 제작된 것이다.

ReactJS 를 만든 팀은,

모든 interactive 한 application을 만드는 사람들이 하는 작업들이 모두 event 를 listen하는 것임을 알았던 것이다.

그래서 addEventListener를 계속해서 사용하는 대신에 property에 event를 등록할 수 있도록 한 것이다.

 

 

 

 

또한 이렇게 프로퍼티에 on~~으로 넣어준 이벤트 리스너는 HTML 상에서 표시가 되지 않는다. 다른 id 나 class와 다르게 말이다.

 

*지금 React 에서 Element를 생성하는 방식은 실제로 쓰이진 않는다.

보다 더 간편한 방법이 있다.

 

 

ReactJS

<!DOCTYPE html>
<html>
  <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",
      { onMouseEnter: () => console.log("entered!") },
      "Hello, I'm span"
    );
    const btn = React.createElement(
      "button",
      { id: "btn", onClick: () => console.log("i'm clicked") },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);

    ReactDOM.render(container, root);
  </script>
</html>

Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <body>
    <span>Total clicks: 0</span>
    <button id="btn">+</button>
  </body>
  <script>
    const button = document.querySelector("#btn");
    const span = document.querySelector("span");

    let counter = 0;

    function handleClick() {
      counter++;
      span.innerText = `Total clicks: ${counter}`;
    }

    button.addEventListener("click", handleClick);
  </script>
</html>

https://nomadcoders.co/react-for-beginners/lectures/3261

 

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co