[React] 클래스 컴포넌트에서의 이벤트 핸들링

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

클래스 컴포넌트에서 이벤트 핸들링하기

import React, { useState } from "react";

class MyComponent extends React.Component {
  state = {
    message: '',
  }
  
  render() {
    return (
      <div>
        <input type="text" name="message" value={this.state.message} onChange={
          (e) => {
            this.setState({
              message: e.target.value,
            })
          }
        }></input>
      </div>
    );
  }
}

export default MyComponent;

 

e는 이벤트 객체로 이벤트에 대한 다양한 정보를 제공한다.

e.target을 해야 이벤트가 일어난 태그(input)에 접근할 수 있다. 

우리가 message에 설정하고 싶은 값은 사용자가 적은 값(input의 value) 이니까

setState로 설정해주면 된다.

 

 

여기서 왜 input의 value를 직접 정해줘야됐는지 궁금했다.

value 설정을 안해도, input에 값을 입력할 수 있지않나?

→ 맞다. 근데 여기선 state의 초기값이 공백이 아닐 수도 있기 때문에 이렇게 해준 것으로 보인다.

 

클래스 컴포넌트에서 임의 메서드로 이벤트 핸들링하기

import React, { useState } from "react";

class MyComponent extends React.Component {
  state = {
    message: '',
  }

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

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

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

export default MyComponent;

 

위와 같이 기존의 function을 사용하는 경우에는 바인딩 작업이 필요하다.

eu) 함수가 호출될 때 this는 호출부에 따라 결정되면서, 클래스의 임의 메서드가 특정 html 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져 버린다. 따라서 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 this와 메서드를 바인딩을 해야한다.

 

 

하지만, 여간 귀찮은 일이 아니다.

이럴 때는 화살표 함수 형태로 메서드를 정의해주면 바인딩 작업을 생략해도 된다.

 

import React from "react";

class MyComponent extends React.Component {
  state = {
    message: '',
  }

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

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

export default MyComponent;

 

 

결론

클래스형 컴포넌트에서 임의 메소드를 써서 이벤트 핸들링을 하고 싶다면, 화살표 함수를 쓰자.

호출할 때는 {this.methodName} 과 같이 함수 형태의 값을 전달하면 된다.

 

 

---