이벤트(event)
사용자가 웹 브라우저에서 DOM 요소들과 상호 작용 하는 것
ex) 버튼에 마우스 커서 올렸을 때 onmouseover
클릭하면 onclick
Form 요소가 값이 바뀔 때 onchange 등
HTML의 이벤트 VS React의 이벤트
✔ HTML의 이벤트
이벤트를 실행하면 " "사이에 있는 자바스크립트를 실행하도록 코드를 작성
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“>
<meta name=“viewport“ content=“width=device-width“>
<title>JS Bin</title>
</head>
<body>
<button onclick=“alert(‘executed‘)“>
Click Me
</button>
</body>
</html>✔ 결과
✔ React의 이벤트
비슷한 구조를 가지고 있음. 하지만 주의해야 할 몇가지 사항이 있다.
<button onClick={()=>{
this.setState({
number: this.state.number+1})
}}>더하기</button>❗ 주의 사항 ❗
1) 이벤트 이름을 카멜 표기법을 작성한다.
ex) onclick은 onClick으로 작성
ex) onkeyup은 onKeyUp으로 작성
2) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만,
리액트에서는 함수 형태의 객체를 전달
(화살표 함수 문법으로 함수 만들어 전달 또는 렌더링 부분 외부에 미리 만들어서 전달)
3) DOM 요소에만 이벤트를 설정할 수 있다.
즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음.
예를 들면
<MyComponent onClick={doSomething}/>MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐
하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수 있음.
<div onClick={this.props.onClick}>
{ /* (…) */ }
</div>