#3 React Event Handling

Event

웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 합니다.

예를들어 DOM 요소를 클릭하면 onClick 이벤트를 정의해 상호작용을 하게 됩니다.

 

리액트 이벤트 시스템 주의사항

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트 설정할 수 있다
   • 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 단지 props를 전달해 줄 뿐.

 

클래스 컴포넌트의 이벤트 핸들링

- state와 메서드 활용

 

1. 이벤트 발생시 생성되는 e객체를 이용한 이벤트 핸들링

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' '
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          placeholde="input"
          value={this.state.message}
          onChange={e => {
            this.setState({ message: e.target.value });
          }}
        ></input>
        <br />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: ' ' });
          }}
        >
          reset
        </button>
      </div>
    );
  }
}

export default EventPractice;

 

 

2. 이벤트에 실행할 자바스크립트 코드 대신 함수 형태의 값 전달

=> 클래스에 메서드를 만들어 이벤트 리스너에 바인딩

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' '
  };

  handleChange = e => {
    this.setState({ message: e.target.value });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({ message: ' ' });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          placeholde="input"
          value={this.state.message}
          onChange={this.handleChange}
        ></input>
        <br />
        <button onClick={this.handleClick}>reset</button>
      </div>
    );
  }
}

export default EventPractice;

 

3. input 여러개 다루기 

=> e.target.name의 "값"을 키로 가지는 객체를 생성

=> ref = 'key' ;  { [ref] : 'value' } ref의 값을 key로 하는 객체 생성  { 'key' : 'value' }

=> 하나의 이벤트 핸들링 메서드로 여러 키값을 가지는 객체 생성가능

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' ',
    username: ' '
  };

  // ref = 'key' ;  { [ref] : 'value' } ref의 값을 key로 하는 객체 생성  { 'key' : 'value' }
  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleClick = e => {
    alert(this.state.username + ' : ' + this.state.message);
    this.setState({ message: ' ' });
    this.setState({ username: ' ' });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="username"
          placeholder="username"
          value={this.state.username}
          onChange={this.handleChange}
        ></input>
        <br />
        <input
          type="text"
          name="message"
          placeholde="message"
          value={this.state.message}
          onChange={this.handleChange}
        ></input>
        <br />
        <button onClick={this.handleClick}>reset</button>
        <hr />
      </div>
    );
  }
}

export default EventPractice;

 

함수형 컴포넌트의 이벤트 핸들링

- useState 활용

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: ' ',
    message: ' '
  });

  const { username, message } = form;

  const handleChange = e => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value
    };
    setForm(nextForm);
  };

  const handleClick = e => {
    alert(username + ' : ' + message);
    setForm({
      username: ' ',
      message: ' '
    });
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        value={username}
        onChange={handleChange}
      ></input>
      <br />
      <input
        type="text"
        name="message"
        value={message}
        onChange={handleChange}
      ></input>
      <br />
      <button onClick={handleClick}>reset</button>
    </div>
  );
};

export default EventPractice;