[React JS] 리액트를 다루는 기술 - 이벤트 핸들링

 

이벤트

: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것

 

1. 리액트의 이벤트 시스템

 

< 이벤트 사용시 주의 사항 >

▶ 이벤트 이름은 카멜 표기법으로 작성

onClick, onKeyUp과 같이 카멜 표기법으로 이벤트 이름을 작성해야 한다.

 

▶ 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달

HTML에서는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트는 함수 형태의 객체를 전달한다.

 

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

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

예를 들어, <MyComponent onClick = {doSomething} />과 같이 코드를 작성하면 이름이 onClick인 props를 MyComponent에 전달하는 기능 뿐이다.

 

 

< 이벤트 종류 >

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• Wheel
• Animation etc.

 

 

2. 예제로 이벤트 핸들링 익히기

 

< 이벤트 핸들링 단계 >

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

 

< 컴포넌트 생성 및 불러오기 >

우선 이벤트 핸들링을 연습하기 앞서, 이벤트를 실행시킬 컴포넌트를 작성해야 한다.

컴포넌트를 생성하였으면, App.js에서 해당 컴포넌트를 불러와 렌더링 과정을 수행한다.

 

 

< onChange 이벤트 핸들링하기 >

<< onChange 이벤트 설정 >>

event 라는 컴포넌트에 input 요소를 렌더링하고 해당 요소에 onChange 이벤트를 설정하는 예제를 작성하고자 한다.

import { Componenet } from "react";

class Event extends Componenet{
    render(){
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type = "text"
                    name = "message"
                    placeholder="입력하세요"
                    onChange = {
                        (e) =>{
                            console.log(e);
                        }
                    } />
            </div>
        )
    }
}

export default Event;

위 코드 실행 결과 콘솔에는 e 객체가 기록될 것이다.

e 객체는 synthetic event로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다.

네이티브 이벤트와 인터페이스는 같기 때문에 JS에서 HTML 이벤트를 처리할 때와 같은 방법으로 사용하면 된다.

 

하지만, synthetic event는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되어 정보를 참조할 수 없다.

만약 비동기적으로 이벤트 객체를 참조해야 한다면, e.persist() 함수를 호출해야 한다.

 

 

<< state에 input 값 담기 >>

state를 input 값에 담을 수 있다.

먼저 state의 초깃값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트 할 수 있다.

그 후 input의 value 값을 state 에 있는 값으로 설정하는 등 아래 예제와 같이 state에 input를 사용하여 이벤트 핸들링을 할 수 있다.

import { Componenet } from "react";

class Event extends Componenet {
    state = {
        message: ""
    }

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="입력하세요"
          value = {this.state.message}
          onChange={(e) => {
            this.setState({
                message: e.target.value
            })
          }}
        />
      </div>
    );
  }
}

export default Event;

 

 

<< 버튼을 누를 때 comment 값을 공백으로 설정 >>

앞선 예제에서 입력한 값이 state에 잘 들어갔는지, input에서 그 값을 제대로 반영하는지 확인해야 한다.

import { Component } from "react";

class Event extends Component {
  state = {
    message: "",
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</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 Event;

위의 코드는 button에 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운 후 comment 값을 공백으로 설정한다.

그 후 alert를 사용하여 현재 message 값을 화면에 표시한다.

 

 

 

< 임의 메서드 만들기 >

이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달하는 것이 아닌, 함수를 미리 준비하여 전달하는 방법을 사용할 수 있다.

 

 

 

3. 함수 컴포넌트로 구현해보기