🔍 Event Handling
Event Handler : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수
즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수
이번에는 리액트에서 이벤트 핸들링하는 것을 알아보겠다.
우선 기존 HTML에서 DOM요소에 이벤트 핸들링하는 것을 살펴본 뒤
리액트에서 이벤트 핸들링하는 법을 살펴보겠다.
📋 HTML Event Handling
index.html
<!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" />
<title>Document</title>
</head>
<body>
<button onclick="sayhi('Jev')">Click</button>
<script>
function sayhi(name) {
console.log(`Hello , ${name}`);
}
</script>
</body>
</html>- 이벤트 핸들러 어트리뷰트 값으로 함수가 아닌 함수호출문 할당
- 이유는 함수에 인수를 전달하기 위해서이다.
- 함수호출문은 이벤트 핸들러의 몸체와 같다.
어트리뷰트값으로 값을 할 경우 함수에 인수를 넣기 위해 함수호출문을 할당하는 것을 허용한다.
(기존의 이벤트 핸들러라하면 함수 참조가 들어가는게 맞다.)
그렇다면 html과 비슷하게 작성하는 JSX에서는 이벤트 핸들러를 어떻게 등록하는지 살펴보자.
💎 React Event Handling
Test.js
import React from "react";
const Test = (props) => {
return (
<div>
<h1>Test</h1>
<button
onClick={() => {
console.log("Hello,Jev!");
}}
>
Click
</button>
</div>
);
};
export default Test;- HTML에서와 달리 React에서는 이벤트 핸들러(함수)를 등록하는 방식이다.
- 이벤트명을 카멜 표기법으로 작성한다.
onclick => onClick
(중간 분리되는 단어의 앞글자를 대문자로 작성하는 형태)
짧고 일회용적인 코드라면 JSX내부에 작성하지만 재사용성이 크고 코드가 길다면 따로 함수를 만들어 가져다 쓴다.
import React from "react";
const Test = (props) => {
function sayhi() {
console.log("Hello,Jev");
}
return (
<div>
<h1>Test</h1>
<button onClick={sayhi}>Click</button>
</div>
);
};
export default Test;
이처럼 기존 HTML과 약간의 문법의 차이는 있지만 비슷하여 사용하기 편리하다.
FE DEVELOPER