[React] 이벤트 핸들링

EVENT = 특정 '사건'

 

버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건

HTML

<button onclick = "activateLasers()">
	Activate Lasers
</button>

HTML

• onclick이 소문자로 이루어져있음
• 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음

React

<button onClick = {activateLasers}>
	Activate Lasers
</button>

 

React

• onClick의 C가 HTML과 다르게 대문자로 나타냄
• 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달

 

Camel Case

 

파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함

리액트의 함수 핸들링에서 사용됨

 

---

Event handler = Event Listener

이벤트를 처리하는 함수

어떤 사건이 발생하면, 사건을 처리하는 역할

 

이벤트 핸들링 공식 문서

 

쉬운 예시(onClick 사용)

 

JS)

onClick = "클릭할 때 실행할 JS"

 

React)

onClick = {클릭할 때 실행할 JS}

onClick = { ()=>{실행할 내용}}

 

1. 👍🏻 누를 때마다 콘솔 창에 1 띄우기

<span onClick = {()=>console.log(1)}}> 👍🏻 </span>

 

2. 👍🏻누를 때마다 1 증가 시키기

import React, {useState} from 'react';

let[like, like_change] = useState(0);

<span onClick={()=>{like_change(like+1)}}>👍🏻{like}</span>

state를 사용하기 위해서는 import React, {useState} from 'react'; 를 꼭 추가해주기

 

let[like,like_change] = useState(0); 에서

like는 state이고, like_change는 state변경함수이다.

useState(0)에서의 0은 state의 초기값

 

 

😟주의사항

state는 그냥 변경하지 않고, state변경함수를 사용해서 state변경함수(state를 대체할 데이터)로 변경해주면됨