리엑트는 HTML/JS처럼 유저가 애플리케이션의 인터페이스와 상호작용을 할때 함수를 호출하고 그에대한 액션을 발동한다. 이러한 상호작용은 이벤트를 발생시킨다 .
클릭 이벤트는 하나의 엘리먼트가 클릭 되었을 때 발동되며 onClick으로 정의된다. 이는 유저의 액션에 대해 작용하고 싶은 엘리먼트의 attribute로 정의 된다.
Vanila와 React의 이벤트 헨들링 차이.
1. 바닐리와는 다르게 리엑트는 camelCase를 사용한다(js-onclick, react-onClick)
2. HTML의 요소가 클릭되어 이벤트 헨들러가 함수를 호출한다면 다음과 같이 호출된다.
|
1
2
3
4
|
//vanila js
<button onclick="doSomething()">Do something</button>;
//react
<button onClick={doSomething}>Do something</button>;
|
cs |
위의 두 코드는 단순 문법 차이로 보일 수 있지만 사실 아주 큰 차이가 존재한다. JSX에서 직접적으로 함수를 호출하는 것은 함수의 반환값이 onClick attribute에서 사용된다는 의미 이다. 따라서 버튼을 클릭했을때 호출되는 함수를 넘기는게 아니다. 이는 오직 리렌더링 될때 한번만 호출된다. 따라서 해당 버튼에 대한 반복적인 클릭은 함수의 결과를 호출한다. 그때문에 상호작용이나 액션이 일어나지 않는다.
3. 리엑트의 onClick은 오직 하나의 함수만 받을 수 있는 반면에 vanila는 여러개의 함수를 반을 수 있다.
4. 리엑트의 이벤트들은 모두 bubbling이 일어 난다. 그에 반해 vanila의 onchange같은 경우는 bubbling이 발생하지 않는다
그때문에 엘리먼트나 컴포넌트가 컨테이너 안에 존재하고 컨테이너에 이벤트 헨들러를 달면 안에 존재하는 엘리먼트를 클릭했을 때 이벤트 버블링이 발생한다. 따라서 preventDefault()를 사용해야 한다.
Functional component에서의 event handler
함수형 프로그래밍에서 이벤트핸들러는 하나의 attribute로 엘리먼트 또는 컴포넌트에 전달 된다. 이 attritubte는 유저가 이 엘리먼트와 상호작용을 할때 어떤 일이 발생할지를 서술한 함수를 받는다.
다른 이벤트와 마찬가지로 유저가 여러면 엘리먼트를 클릭한다면 이 이벤트는 여러번 발동되고 함수도 여러번 호출된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import React from "react";
import "./styles.css";
export default function App() {
function greetUser() {
console.log("Hi there, user!");
}
return (
<div onClick={greetUser()}>
<p>Click this text to see the event bubbling</p>
<button onClick={greetUser}>Click me</button>
</div>
);
}
|
cs |
위 코드를 실행하면 버튼을 클릭하지 않았음에도 "Hi there, user"라는 메시지가 콘솔에 찍힌다. 이 로그는 onClick={greetUser()}에서 찍힌 부분이다. 여기서 버튼을 한번 클릭한다면 버튼태그에 있는 greetUser가 호출된다.
10번째 줄에서 greetUser()를 greetUser로 바꾼 후 버튼을 클릭하면 이벤트 버블링이 발생한다.
onClick 이벤트 핸들러에 인자 사용하기
화살표 함수를 사용하면 된다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React from "react";
import "./styles.css";
export default function App() {
function greetUser(name) {
console.log(`Hi there, ${name}`);
}
return (
<div>
<button onClick={() => greetUser("John")}>Click me</button>
</div>
);
}
|
cs |