이벤트 핸들링

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

(HTML의 onchange등을 사용했다면 익숙할 것이다)

 

리액트의 이벤트 시스템도 HTML의 이벤트와 동일하다.

다만 몇 가지 주의사항이 있다.

 

이벤트를 사용할 때의 주의사항은 다음과 같다.

 

1. 이벤트 이름은 카멜 표기법으로 작성한다. (예: onclick을 onClick으로 작성하기)

2.이벤트에 실행할 자바스크립트의 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. 

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

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

예를 들어 <MyComponent onClick={doSomething}/> 이라는 컴포넌트에 onClick값을 설정한다면, doSomething을 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에 전달해 줄 뿐이다.

컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다. 

 

---

//새 컴포넌트 생성

 

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;

//App.js

 

import React from "react";

import EventPractice from "./EventPractice";

 

const App = () => {

  return <EventPractice />;

};

 

export default App;

 

이벤트 객체가 콘솔에 나타나는 것을 볼 수 있다.

콘솔에 기록되는 e객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 

네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다.

SyntheticEvent 및 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 엉ㅄ다. 

0.5초 뒤에 e객체를 참조하면 e 객체 내부의 모든 값이 비워지게 된다.

 

비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist()함수를 호출해 주어야 한다.

 

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;

 

값이 바뀔 때 마다 기록되는 것을 볼 수 있다.