이벤트 핸들링

사용자가 웹 브라우저에서 DOM element 와 상호작용하는 것을 이벤트라고 한다.

리액트 이벤트 시스템

리액트의 이벤트는 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하다.

주의 사항

1. 이벤트 이름은 카멜 표기법으로 표기
2. 이벤트를 실행할 자바스크립트 코드를 전달X, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트를 설정할 수 있다.

이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection

onChange 이벤트

import React, { Component } from 'react';

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해주세요"
          onChange={(e) => {
            console.log(e.target.value);
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

state에 값 저장

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: '',
  };
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해주세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

버튼을 누르면 state초기화

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: '',
  };
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해주세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({
              message: '',
            });
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

export default EventPractice;

custom event 만들기

import React, { Component } from 'react';

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

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

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

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해주세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

여러개의 input 다루기

import React, { Component } from 'react';

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

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

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

  render() {
    return (
      <div>
        <h1>
          {this.state.username} {this.state.message}
        </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}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다

onKeyPress 이벤트

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({
      message: '',
      username: '',
    });
  };

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.handleClick();
    }
  };

  render() {
    return (
      <div>
        <h1>
          {this.state.username} {this.state.message}
        </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;

enter 키를 누르면 버튼을 누른 것과 동일한 동작을 하게 된다.

함수형 컴포넌트 이벤트

위 내용을 함수형 컴포넌트로 변경하면 다음과 같다

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: '',
  });
  const { username, message } = form;
  const onChange = (e) => {
    const nextForm = {
      ...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>
        {username} {message}
      </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;