리액트 입문기 - 이벤트 핸들링

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

리액트의 이벤트 시스템은 웹브라우저의 HTML이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.

이벤트 핸들링 예제 순서

1. 컴포넌트 생성 및 불러오기
2. 이벤트 핸들링 하기
3. 임의 메서드 만들기
4. input여러개 다루기
5. onkeyPress 이벤트 핸들링 하기

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

* onchange이벤트 추가한 js

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;

만약 비동기적으로 객체를 참조할 일이 있다면 e.persis()함수를 호출합니다.

* state에 값담기

import React, { Component } from "react";
class EventPractice extends Component {
  state = {
    message: '',
  };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요."
          onChange={(e) => {
            this.setState({ message: e.target.value});
            console.log(this.state.message);
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: "" });
          }}

          확인
        </button>
      </div>
    );
  }
}
export default EventPractice;

위와 같이 코드를 작성할 경우 가독성이 좋지 않은 문제가 발생합니다. 상황에 따라 다르긴 하지만 코드가 복잡해지는 경우 state에 들어갈 이벤트를 함수로 만들 수 있습니다.

* 함수로 만드는 이벤트 핸들링

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleClick = this.handleClick.bind(this);
  }
  handleChange = (e) =>{
      this.setState({
          message: e.target.value 
      });
  }
  handleClick = () =>{
    alert(this.state.message);  
    this.setState({
        message: ''   
    });
  }

constructor안에 추가할 함수를 선언합니다. bind를 하는 이유는 this를 컴포넌트 자신으로 가리키기 위해서 입니다.

함수로 생성한 이벤트는 this.이벤트함수 의 형태로 불러옵니다.

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

const name = 'variantKey';
const object = {
	[ name ] : 'value'
}
{
	//결과물
    'variantKey' : 'value'
}

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

import React, { useState } from 'react';
const EventPracticeFunc = () => {
    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>이벤트 연습</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 EventPracticeFunc;

참고문서
리액트를 다루는 기술