React JS 기초 02

엥 이거 진짜 내 마음이라서 주워온 짤

 

✨ React JS로 버튼 만들기

이전 React JS 기초 01 정리에서는 Javascript로 count 버튼을 만들었다면, 이번엔 드디어 React JS로~~

 

 

① ui 그리기

<div id="root"></div>

const root = document.getElementById("root");
const h3 = React.createElement("h3", null , "Hello, Im a span");
const btn = React.createElement("button", null, "click me");

// **span과 button을 둘다 render하고 싶다면?
const container = React.createElement("div", null, [h3, btn]);

ReactDOM.render(container, root);

📌 const 변수 선언을 할 때 변수의 이름과 HTML 태그의 이름이 반드시 일치 할 필요 없음

📌 React.createElement(html의 태그, 속성, 콘텐츠)가 차례로 위치

      속성은  class, id, style, 함수 등이 위치할 수 있음

 

 

div태그가 render 되었고, 그 안에 h3와 button이 있음을 확인

 

② 코드 추가하기

const root = document.getElementById("root");
  const h3 = React.createElement(
    "h3",
    {
      onMouseEnter: () => console.log("mouse enter"),
    },
    "Hello, Im a span"
  );
  const btn = React.createElement(
    "button", 
    {
      onClick: () => console.log("i'm clicked"),
      style: {
        backgroundColor: "tomato",
      }
    },
    "click me"
  );

  // span과 button을 둘다 render하고 싶다면? array로 불러온다
  const container = React.createElement("div", null, [h3, btn]);

  ReactDOM.render(container, root);

위의 코드를 작성했을 때, 그려지는 화면

해당 ui의 개발자도구

✔ createElement를 통해서 HTML태그를 선택하고, event를 등록할 수 있음.
✔ onMouseEnter 확인
✔ onClick 확인

 

💡 잠깐, import한 script src에 대한 설명

• <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  React JS를 import :  React JS가 element를 생성하고 event listener를 더하는 것을 도와줌
  React JS가  interactive하게 만들어줌
• <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  React-dom을 import : React element들을 가져다가 HTML로 바꿔줌

 

 

📌 React 개발자로서, createElement를 쓸 일은 사실 없음...