[코낭] 4.1 리액트의 이벤트 시스템 / 4.2 예제로 이벤트 핸들링 익히기

최정윤·2023년 5월 1일

코낭

목록 보기

14/41

🍞 4. 이벤트 핸들링

사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트라고 한다.
버튼에 마우스 커서를 올리는 이벤트 : onmouseover
클릭 이벤트 : onclick
form 요소 값이 바뀔 때 이벤트 : onchange

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
    </head>
    <body>
        <button onclick="alert('executed')">
            Click Me
        </button>
    </body>
</html>

버튼을 누르면 alert 함수를 사용하여 메시지 박스를 띄운다.

🥐 4.1 리액트의 이벤트 시스템

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

1. 이벤트 이름은 카멜 표기법으로 작성한다.

HTML: onclick, onkeyup
리액트: onClick, onKeyUp

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

HTML: 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣는다.
리액트: 이벤트를 설정할 때 함수형태의 객체를 전달한다.

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

div, button, input, form, span 등의 DOM요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트에는 이벤트 자체 설정 불가능

4.1.2 이벤트 종류

Clipboard
Composition
Keyboard
Focus
Form
Mouse
Selection
Touch
UI
Wheel
Media
Image
Animation
Transition

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

4.2.1 컴포넌트 생성 및 불러오기

4.2.1.1 컴포넌트 생성

클래스형 컴포넌트로 작성하여 기능을 구현해보자.

▶ EventPractice.js

import { Component } from 'react';

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

export default EventPractice;

4.2.1.2 App.js에서 EventPractice 렌더링

▶ App.js

import EventPractice from './EventPractice';

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

export default App;

4.2.2 onChange 이벤트 핸들링하기

4.2.2.1 onChange 이벤트 설정

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

▶ EventPractice.js

import { 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;

위에서 콘솔에 기록되는 e객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤를 감싸는 객체이다.
네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때 똑같이 사용하면 된다.
SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다.

▶ EventPractice.js의 onChange부분 수정

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

위와 같이 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해 주어야 한다.
onChange 이벤트가 발생할 때, 앞으로 변할 인풋 값인 e.target.value를 콘솔에 기록하면 값이 바뀔 때마다 바뀌는 값을 콘솔에 기록한다.

4.2.2.2 state에 input 값 담기

state에 input 값을 담아보자.
state 초깃값 설정 후, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state 업데이트

▶ EventPractice.js

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

export default EventPractice;

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

입력한 값이 state에 잘 들어갔는지, 인풋에서 그 값을 제대로 반영하는지 검증해보자.
input 요소 코드 아래쪽에 button을 하나 만들고, 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운 후 comment 값을 공백으로 설정.
▶ EventPractice.js

import { 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
                            })
                        }
                    }
                />
                <button onClick={
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message: ''
                        });
                    }
                }>확인</button>
            </div>
        );
    }
}

export default EventPractice;