4장. 이벤트 핸들링

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.

예를 들 면 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다.

Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 

 

1. 이벤트를 사용할 때 주의 사항

1. 이벤트 이르은 카멜 표기법으로 작성한다.

예를 들면 HTML의 onclick은 리액트에서 onClick으로 작성해햐 한다. 또 onkeyup은 onKeyUp으로 작성한다.

 

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

HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣지만, 리액트에서는 함수 형태의 객체를 전달한다. 화살표 함수 문법으로 함수를 만들어 전달해도 된다. 렌더링 부분 외부에 미리 만들어서 전달해도 된다.

 

3. DOM 요소에만 이벤트를 설정할 수 있다.

즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.

예를 들어 다음과 같이 MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아닌 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐이다.

<MyComponent onClick={doSomethind}/>

따라서 컴포넌트에 자체적으로 이벤트를 설정할 수 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수 있다.

<div onClick={this.props.onClick}>
	{ /* (...) * / }
</div>

2. 이벤트 종류

Clipboard 

Compositon

Keyboard

Focus

Form

Mouse

Selection

Touch

UI

Wheel

Media

Image

Animation

Transition

등등 이보다 더 많다.

 

3. 이벤트 핸드링 단계

컴포넌트 생성 및 불러오기

-> onChange 이벤트 핸들링하기

-> 임의 메서드 만들기

-> input 여러개 다루기

-> onKeyPress 이벤트 핸들링하기

 

4. 컴포넌트 생성

import { Component } from 'react';

class EventPractice extends Component {
render() {
return (
	<div>
    	<h1>이벤트 연습</h1>
     <div>
 );
 }
 }
 export default EventPractice;

5. App.js에서 EventPractice 렌더링

import EventPractice from './EventPractice';

const App = () => {
return <EventPractice/>;
};

export default App;

6. input 여러개 다루기

import { Component } from "react";

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: ''
    });
  }

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          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>
    );
  }
}

 

7.onKeyPress 이벤트 핸들링

import { 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: ''
    });
  }

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

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          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>
    );
  }
}

8. 함수 컴포넌트 구현

import { useState } from "react";

const EventPractice = () => {
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  const onChangeUsername = e => setUsername(e.target.value);
  const onChangeMassage = e => setMessage(e.target.value);
  const onClick = () => {
    alert(username + ': ' + message);
    setUsername('');
    setMessage('');
  };
  const onKeyPress = e => {
    if (e.key === 'Enter') {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChangeUsername}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChangeMassage}
        onkeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

9. 함수 컴포넌트 - 객체로 넣어서 구현

import { useState } from "react";

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

10. 정리

클래스형으로 구현했던 것은 함수 컴포넌트로도 충분히 구현이 가능하다. 함수 컴포넌트에서 여러 개의 인풋 상태를 관리하기 위해 useState에서 form 객체를 사용함. 이는 useReducer와 커스텀 Hooks를 사용하면 작업이 좀 더 편함