3-2. Event 핸들링 실습하기.

01. EventPractice.js파일을 만듭니다. (클래스형 컴포넌트)

// EventPractice.js
import React, { Component } from 'react';

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

export default EventPractice;

작성한 EventPractice 컴포넌트를 App.js에 연결합니다.

// App.js
import logo from './logo.svg';
import EventPractice from './EventPractice';

function App() {
  return (
    <>
      <EventPractice/>
    </>
  );
}

export default App;

02. onChange 이벤트 핸들링하기

EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와
해당 요소에 onChange이벤트를 설정하는 코드를 작성합니다.

다음 코드를 EventPractice 컴포넌트의 render 메서드에 작성하세요.

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

export default EventPractice;

여기서 input에 아무것이나 입력해 보세요.

‘안녕’을 입력해보면

이벤트 객체가 F12(콘솔)에 나타납니다.

여기서 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 객체입니다. 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML이벤트를 다룰 때와 똑같이 사용할 수 있습니다.

SyntheticEvent? / 네이티브 이벤트?

※ SyntheticEvent란?

React에서 Event의 처리를 위해 사용되는 객체입니다.즉, 네이티브 이벤트를 감싼다는 것은, SyntheticEvent를 사용하여 네이티브 이벤트를 한번에 받아오기 위함입니다.

SyntheticEvent를 사용하여 받아오는 이유

네이티브 이벤트를 그대로 사용하지 않고 SyntheticEvent를 사용하여 굳이 이벤트를 받아오는 이유는 네이티브 이벤트를 직접 다루는것보다 SyntheticEvent를 한번 거쳐서 처리하는것이 브라우저간의 호환성과 성능 최적화에 조금 더 이점이 있기 때문이라고 합니다.

※ 네이티브 이벤트란?

웹 브라우저 상에서 사용자가 발생시키는 마우스 이동, 클릭, 키보드 입력 등 모든 이벤트를 말합니다.

03. e.target.value를 통해 값만 출력하기

지금까지 작성한 EventPractice.js의 onChange코드를 수정해봅시다.

  
![](https://velog.velcdn.com/images/songhansol/post/c2745bea-9554-411d-a5f2-e5a3bc93c186/image.png)
  
//EventPractice.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;

값이 변경될때마다 바뀌는 값을 콘솔에 기록하게 됩니다.

04. state에 input값 담기

2챕터의 state에서 배운대로 state에 input 값을 담아봅시다.

// EventPractice.js
import React, { Component } from "react";

class EventPractice 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,
            });
            console.log(e.target.value);
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

만약 제대로 입력했다면 F12 콘솔에 값이 잘 출력될 것입니다.

05. 버튼을 누를 시 alert호출, comment값을 공백으로 설정하기

입력한 값이 state에 잘 들어갔는지

그리고 input에서 그 값을 제대로 반영하는지 확인하여 보겠습니다.

1. input아래에 button을 만들고
2. 클릭 이벤트가 발생시 현재 comment값(input의 value값)을 메세지 박스로 띄운 후
3. comment(message)값을 공백으로 설정

  import React, { Component } from "react";

class EventPractice 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,
            });
            console.log(e.target.value);
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: "" });
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

export default EventPractice;

알람이 제대로 작동하고, 이후 input의 value값이 제대로 초기화 됬나요?