버튼을 만들고 버튼에서 일어나는 event를 어떻게 감지하는지 알아볼 것이다.
<!DOCTYPE html>
<html lang="en">
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse Enter"),
},
"Hello, I'm span"
);
//↓↓↓↓이 전의 예제 4가지 절차를 4줄 안에 끝냈다.!!!!
const btn = React.createElement(
"button",
{
onClick: () => console.log("i'm clicked"),
},
"click me"
);
//↑↑↑↑ 이것이 React의 힘이다. React JS는 바로 interactivity를 위하여 제작된 것이다.
//addEventListener를 반복하는 것 대신에 property 에서 event를 등록할 수 있게 된 것이다.
const container = React.createElement("div", null, [h3, btn]);
//span과 btn을 render하기.
ReactDOM.render(container, root);
</script>
</html>다음 강의에서는 element를 생성하는 방식을 더 쉽게 바꿀 것이다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다