안녕하세요.
이 곳은 제가 프론트엔드 분야를 난생 처음 접하고, 혼자 주절주절하는 공간입니다.
오늘 알아볼 내용은 React 3편입니다.
React event
바닐라 JS의 이벤트는 addEventListener를 활용했는데요.
리액트는 어떤 방식일까요?
span 태그를 만들때와 시작은 동일합니다.
const 아무이름 = React.createElement("태그명", {}, {})그럼 button 태그를 만들어볼게요.
<!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">
<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>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const root = document.getElementById("root")
const btn = React.createElement("button", null, "Cleck Me")
ReactDOM.render(btn, root)
</script>
</body>
</html>ReactDOM.render() 부분의 컴포넌트에는 btn이, 컨테이너는 root가 입력되어 있습니다.
즉 HTML의 root div에 버튼을 넣어주겠다는 얘기인거죠.
가만보면 createElement 값 중에 null이 들어가있어요.
스타일이나 아이디, 클래스 등 여타 정보들이 필요 없을 경우에는 null값을 적어줄 수 있습니다.
그런데 이전에 작성했던 span 생성코드가 없어졌어요.
만약 동시에 span태그와 button 태그를 생성하고싶다면 어떻게 해야할까요?
먼저 생각해볼 수 있는 방법은 div를 하나 더 만들어주고, 3번째 변수로 span과 btn을 할당한 후에 render시키는 방법이에요.
<!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">
<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>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const root = document.getElementById("root")
const span = React.createElement("span", null, "Total Clicks: 0" )
const btn = React.createElement("button", null, "Cleck Me")
const container = React.createElement("div", null, [span, btn])
ReactDOM.render(container, root)
</script>
</body>
</html>
div 태그가 생성되고, 그 안에 span과 btn이 생성된 모습입니다.
그럼 이제 버튼에 이벤트를 달아줘볼게요.
위에 btn으로 정의한 부분의 두번째 프로퍼티에 입력해주면 끝입니다.
const btn = React.createElement(
"button",
{ onClick: () => console.log("Clicked") },
"Cleck Me"
)버튼이 클릭될 때 콘솔에 찍히는걸 보면 제대로 작동되는지 확인이 가능할거에요.
이전에 바닐라 JS로 작성한 코드와 비교해볼까요?
<!-- VANILA -->
<!-- HTML -->
<button id="btn">Click Me</button>
// JS
const button = document.getElementById("btn")
function handleClick () {
counter = counter + 1
span.innerText = `Total Clicks: ${counter}`
}
button.addEventListener("click", handleClick)// React JS
const btn = React.createElement(
"button",
{ onClick: () => console.log("Clicked") },
"Cleck Me"
)비교해보니 코드의 양이 현저하게 줄어들었어요.
무려 한 줄의 코드로 element를 생성, content 입력, JS로 이벤트 설정까지 모두 가능합니다!
그럼 span 태그에도 이벤트를 등록해볼게요.
const span = React.createElement(
"span",
{ onMousEnter: () => console.log("Mouse Enter") },
"Total Clicks: 0"
)
역시나 작동하네요.
