[React] 이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. - React 문서

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

1. 이벤트 이름은 카멜 표기법으로 작성합니다.
   예) onclick -> onClick
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달합니다.
3. DOM 요소에만 이벤트를 설정할 수 있습니다. (컴포넌트에 자체적으로 이벤트를 설정할 수 없습니다.

이벤트 처리 예제

EventPractice 컴포넌트 생성 & App.js 렌더링

import React, { Component } from "react";

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

export default EventPractice;

import EventPractice from "./EventPractice";

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

export default App;

onCange 이벤트 설정

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);
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

onChange 설정의 'e'

 onChange={(e) => {
            console.log(e);
          }}

여기서 e 객체는 SyntheticEvent 로 웹 브라우저의 네이티브 이벤트를 감싸는 객체입니다. 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 됩니다.

onChange 코드 수정

값이 바뀔 때마다 바뀌는 값을 콘솔에 기록하는걸 확인할 수 있습니다.

 onChange={(e) => {
            console.log(e.target.value);
          }}

state에 input 값 담기 & alert를 사용해서 확인

import React, { Component } from "react";

class EventPractice extends Component {
  
  // state 초기값 설정
  state = {
    message: ""
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message} //input value를 state 값으로 받아오기
          onChange={(e) => {
            this.setState({
              message: e.target.value
            });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({
              message: "" //값 초기화 (공백)
            });
          }}
        >
          확인해보기
        </button>
      </div>
    );
  }
}

export default EventPractice;