728x90
참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby
1. React로 이벤트 달기
<!DOCTYPE html>
<head>
<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>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{onMouseEnter: () => console.log("im mouse")},
"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>👉🏻일단 전체 코드!
<button id="btn">Click me</button>
<script>
const button = document.getElementById("btn");
button.addEventListener("click", handleClick);
</script>const btn = React.createElement("button", {onClick: () => console.log("im clicked"), style: {backgroundColor: "tomato",}}, "Click me!");👉🏻빨간 배경의 클릭하면 콘솔에 "im clicked"가 출력되는 버튼을 만들었다. 이 코드는 위의 JS 3줄을 사용해야 하는 코드를 한 줄로 줄일 수 있는 React의 장점을 보여준다.
const container = React.createElement("div", null, [h3, btn]);👉🏻createElement의 세 번째 인자에 HTML 요소를 넣어주면 해당 요소를 포함해서 요소가 생성된다.
728x90
'그 땐 Front했지 > 그 땐 React했지' 카테고리의 다른 글
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 6. JSX part Two (0) | 2022.05.15 |
|---|---|
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 5. JSX (0) | 2022.05.15 |
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 2. Our First React Element (0) | 2022.05.14 |
| [생활코딩/React] 2022개정판 | 10. delete (0) | 2022.05.06 |
| [생활코딩/React] 2022개정판 | 9. update (0) | 2022.05.06 |
