• 목차

4.1 리액트의 이벤트 시스템

• 리액트의 이벤트 시스템은 HTML 이벤트와 사용법이 꽤 비슷해

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

1. 이벤트 이름은 카멜 표기법으로 작성해야해
   • 예를 들어서 onclick → onClick으로
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달해야해
   • HTML: onclick="alert('example')" / 리액트: onClick={() ⇒ alert('example')}
3. DOM 요소에만 이벤트를 설정할 수 있어
   • div등의 요소에만 이벤트 설정이 가능해
   • 우리가 만든 컴포넌트(예를 들어 MyComponent 같은)에는 이벤트 설정이 불가능해
     • onClick값을 설정한다고 하면 클릭 했을 때 onClick 이벤트를 실행하는게 아니라 그냥 onClick이라는 이름의 props를 설정해주는거야

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

컴포넌트 생성 및 불러오기

• EventPractice.js 파일을 만들고
• App.js 에서 EventPractice 컴포넌트를 불러와 렌더링하자

import React, { Component } from "react";

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

export default EventPractice;

onChange 이벤트 핸들링하기

• EventPractice 컴포넌트에 Input 요소를 넣고 해당 inputdp onChange 이벤트를 설정해보자

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;

• 인풋에 텍스트를 입력하고 콘솔창을 확인해보면 값이 바뀌때마다 바뀐값이 콘솔에 기록돼!

state에 input 값 담기

1. constructor에서 state 초깃값을 설정하고
2. 이벤트 핸들링 함수 내부에서 this.setState 메서드로 state를 업데이트 해줘
3. 그 다음 input의 value 값을 state에 있는 값으로 설정해주면 돼