1. Events in React 1
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
const span = React.createElement("span", null, "Hello I'm a span");
const btn = React.createElement("button", null, "Click me");
ReactDOM.render(btn, root);
</script>const의 이름은 HTML의 태그 이름과 반드시 일치할 필요가 없다.
그리고 괄호 안에는 HTML 태그의 이름이 들어가야 한다.
const btn = React.createElement("button", null, "Click me");그 다음으로 button을 render 해야 한다.
ReactDOM.render(btn, root);하지만 지금은 span을 render한 것을 button으로 바꿨는데, span과 button 두 개 모두 render 하고 싶으면 어떻게 해야 할까?
새로운 element를 생성한다.
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
const span = React.createElement("span", null, "Hello I'm a span");
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>span을 먼저, button을 그 다음으로 render 하고 싶으면 array[]를 두면 된다.
const container = React.createElement("div", null, [span, btn]);지금까지 기본적으로 2개의 conponent를 가지는 conponent를 생성한 것이다.
하지만 지금 우리가 하려고 한 것은 HTML의 id="btn"을 대체하는 것이다 -> 그리고 button 을 가져와서 -> addEventListener를 붙이고 -> listener function을 만드는 것이다.
하지만 이걸 다 하는 대신에 우리는 button에 property를 줄 수 있다.
const btn = React.createElement("button",
{onClick: () => console.log("im clicked")},
"Click me");button.addEventListener 대신에 onClick 이라고 적으면 된다. 그럼 button이 클릭될 때마다 호출될 function을 작성할 수 있다.
이 간단한 코드로 버튼을 만들 수 있고, 내부에는 content를 넣었고 바로 event listener까지 넣어주었다.
2. Events in React 2
span에 새로운 event listener을 만들어 보자.
const span = React.createElement("span",
{onMouserEnter: () => console.log("mouser enter")},
"Hello I'm a span");JS와 React는 event listener를 작성하는 방법이 다른데 JS는 "click", React는 on을 붙인다.
하지만 이 방법을 더 쉽게 할 수 있다. 다음 글을 확인해보세요.
