728x90
4. 이벤트 핸들링
- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.
<body>
<button onClick="alert('executed')">
Click Me
</button>
</body>
- HTML에서는 이처럼 이벤트를 실행하면 " " 사이에 있는 자바스크립트를 실행하도록 코드를 작성한다.
4.1 리액트의 이벤트 시스템
1️⃣ 이벤트를 사용할 때 주의 사항
👌 이벤트 이름은 카멜 표기법으로 작성한다.
👌 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
- HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다.
👌 DOM 요소에만 이벤트를 설정할 수 있다.
- div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
<MyComponent onClick = {doSomething}/>
- 위처럼 MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에 전달해줄 뿐이다.
<div onClick={this.props.onClick}>
{/*...*/}
</div>
- 컴포넌트에 자체적으로 이벤트를 설정할 수는 없지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.
4.2 예제로 이벤트 핸들링 익히기
1️⃣ input 여러 개 다루기
- 객체 안에서 key를 [ ] 로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.
const object = {
[name]: "value"
}
#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)
728x90