front-end/react

[react 기초] 노마드 코더 강의 1 : 리엑트로 이벤트 만들기

MOOB 2022. 1. 16. 12:24

 

이 포스트는 노마드 코더의 <ReactJS로 영화 웹 서비스 만들기> 강의의 Events in React를 정리한 것입니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
  </div>
<!-- react cdn을 불러옴 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script>
    const root = document.getElementById("root") // find root
    const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world"); 
    const button = React.createElement("button", {
      onClick: ()=>{
        console.log("clicked")
      },
      style:{
        backgroundColor:"red"
      }
    }, "Click me");
    const div = React.createElement("div", null, [span, button])
    ReactDOM.render(div, root); // render span into root
  </script>
</body>
</html>

앨리먼트 생성하기

실제로는 잘 사용되지 않는 방법이지만 다음과 같이 새 앨리먼트를 생성할 수 있음. 보이는 것과 같이 id 또는 style 등의 프로퍼티 또는 텍스트를 넣어서 제작할 수 있다.

const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world");

뿐만 아니라 안에 이벤트를 넣어 생성하는 것도 가능하다.

const button = React.createElement("button", {
  onClick: ()=>{
    console.log("clicked")
  },
  style:{
    backgroundColor:"red"
  }
}, "Click me");

앞서 만든 span 과 button 을 div안에 넣도록 생성할 수 있다.

const div = React.createElement("div", null, [span, button])

마지막으로 다음 코드를 사용함으로서 만든 앨리먼트들을 ReactDom에 랜더링 할 수 있다.

ReactDOM.render(div, root); // render span into root
저작자표시