이벤트 핸들링

 

이벤트 핸들링 주의 사항

1. 이벤트 이름은 카멜 표기법 작성

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달함.

3. DOM 요소에만 이벤트를 설정 가능
=> 만약 직접 만든 컴포넌트에 설정할 경우 이벤트가 아닌 props로 값 전달됨.

 

이벤트 종류

Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus,
Media, Form, Image, Mouse, Animation, Selection, Transition

 

이벤트 핸들링 매뉴얼

https://reactjs.org/docs/handling-events.html

Handling Events – React

 

 

클래스형 컴포넌트 예제

// 클래스형 컴포넌트로 구현한 EventPractice

import React, { Component } from 'react';
class EventPractice extends Component {
  state = {
    username: '',
    message: ''
  };
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  handleClick = () => {
    alert(this.state.username + ': ' + this.state.message);
    this.setState({
      username: '',
      message: ''
    });
  };
  handleKeyPress = e => {
    if (e.key === 'Enter') {
      this.handleClick();
    }
  };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="유저명"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}
export default EventPractice;

 

함수형 컴포넌트 예제

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
  const { username, message } = form;
  const onChange = e => {
    setTimeout(() => console.log(e), 500);
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사 한 뒤
      [e.target.name]: e.target.value // 원하는 값을 덮어씌우기
    };
    setForm(nextForm);
  };
  const onClick = () => {
    alert(username + ': ' + message);
    setForm({
      username: '',
      message: ''
    });
  };
  const onKeyPress = e => {
    if (e.key === 'Enter') {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="유저명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice;

 

 

참고.

리액트를 다루는 기술 - 김민준 지음, 길벗 출판