React JS로 버튼 클릭 횟수를 알려주는 앱 만들기(harder way)

이전 시간에 이어서

3. button 생성 후 화면에 렌더링하기

span 때랑 똑같이 진행하면 된다.

<script>
  . . . . . 
  // const 변수명 = React.createElement("html tag명", properties, content)
  const btn = React.createElement("button", null, "Click me");    

  // btn(button)을 root 안에 render 해달라고 요청 (span을 btn으로 수정)
  ReactDOM.render(btn, root);
</script>

4. span과 button을 모두 화면에 렌더링하기

<script>
  . . . . .
  // div를 생성하여 children으로 span과 btn을 차례로 넣음. (content 인자로 [span, btn] array를 넣어주었음.)
  const container = React.createElement("div", null, [span, btn]);

  // container(div)를 root 안에 render 해달라고 요청
  ReactDOM.render(container, root);
</script>

- 결과로 root DOM node(<div id="root"></div>)의 자식으로 span과 button이 차례로 들어간다.

* span의 html tag를 "h3"로 수정하면 글자와 버튼 사이 줄바꿈이 가능하다.

5. h3와 button에 event listener 주기 (property 수정)

<script>
  . . . . .
  const h3 = React.createElement(
      "h3", 
      { 
        onMouseEnter: () => console.log("mouse enter"),     // 주목!
      }, 
      "Hello, I'm a span.");

  const btn = React.createElement(
    "button", 
    {
      onClick: () => console.log("im clicked."),     // 주목!
      style: {
        backgroundColor: "tomato",
      },
    }, 
    "Click me"
  );
</script>

- h3의 property로 onMouseEnter를, btn의 property로 Onclick을 부여해 주었다.

- property에 이벤트명 앞에 on을 붙여 camelCase로 작성하면 event listener와 같은 효과를 낼 수 있다.

- onMouseEnter와 onClick 옆에 버튼 클릭 시 실행할 함수를 정의해 주었다.

- HTML 작성 시 id나 class를 부여하고, JS에서 querySelector 등을 이용해 HTML element를 가져오고, addEventListener를 이용해 이벤트를 부여하는 많은 과정을 위 코드를 통해 같은 효과를 낼 수 있다.

* onMouseEnter는 마우스 커서가 해당 tag 영역으로 들어올 시 함수를 실행시킨다.

오늘의 코드

<!--버튼을 몇 번 클릭했는지 세는 어플이다.-->
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!--아래 두 줄의 코드는 리액트를 실행시키는 코드이다. 작성하면 console창에 react라고 작성했을 때 결과를 불러올 수 있어야 한다.-->
  <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("mouse enter"), 
      }, 
      "Hello, I'm a span.");
    const btn = React.createElement(
      "button", 
      {
        onClick: () => console.log("im clicked."),
        style: {
          backgroundColor: "tomato",
        },
      }, 
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co