목차

1. 리액트 이벤트 시스템 주의사항
2. class 컴포넌트에서 이벤트 핸들링
3. input 여러 개 다루기

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

1. 이벤트 이름은 카멜 표기법으로 작성한다.
   ex) HTML의 onClick은 리액트에서 onClick으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다.
3. DOM요소에만 이벤트를 설정할 수 있다.
   직접 만든 컴포넌트에는 이벤트를 삽입할 수 없다.

리액트에서 지원하는 이벤트의 종류

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

2. class 컴포넌트에서 이벤트 핸들링

앞서 리액트 이벤트 시스템의 주의사항에서 이벤트에 함수 형태의 객체의 값을 전달해야 한다고 하였다.

따라서 이번에는 함수를 미리 만들어 놓고 이벤트를 렌더링하는 과정에서 해당 함수를 갖고 오는 식으로 구현을 해보도록 하겠습니다. (가독성 면에서 good)

예제)

import React, { Component } from "react";

class EventPractice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

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

export default EventPractice;

위의 bind를 사용하는 이유는 handleChange란 함수에서는 this에서는 state가 존재하지 않아 그 상위 컨택스트인 EventPractice의 this를 선언하기 위해 다음과 같이 선언해주었습니다.

this.handleChange = this.handleChange.bind(this);

만약 bind사용이 어렵다면 arrow function을 사용함으로써 이를 쉽게 해결할 수 있을 것입니다.

3. input 여러 개 다루기

예제)

import React, { Component } from "react";

class EventPractice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "",
      username: ""
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <>
        <input
          type="text"
          name="message"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <div>{this.state.message}</div>
      </>
    );
  }
}

export default EventPractice;

여기서 우리는 input에 설정한 name값을 이용하여

	this.setState({ [e.target.name]: e.target.value });

위와 같은 구문을 통해서 message값과 username의 값을 각각 수정하였다.

설명

const name = 'key'
const obj = {
  [name]: 'value'
}

console.log(obj) // 결과 : {'key' : 'value'}

즉, 저렇게 key값에 놓여질 자리에 배열을 선언하게 되면 어떤 값이던 key값으로 넣을 수 있다.

이렇게 한다면 하나의 로직을 수행하는 여러 개의 input이 있다면 하나의 함수만으로도 모든 input에 대한 이벤트 처리를 할 수 있다.