TIL | #8 React | 이벤트 처리하기(EventPractice)

trevor1107·2021년 3월 30일

2021-03-30(화)

클래스 컴포넌트, 함수형 컴포넌트의 이벤트 처리

이벤트 처리하기

// EventPractice.js

import React, { Component } from 'react';

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

export default EventPractice;

input의 값에 state.message를 넣어주는데, 변경될 때 마다 setState함수로 현재 이벤트의 값으로 데이터를 변경하고있다. React에서는 변경되는 부분만을 찾아서 수정해준다.

bind() 바인딩 함수

메소드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공된다.

// EventPractice.js

//--------------- 임의 메서드 ---------------- //
// 아래는 함수를 미리 준비해서 전달한다.

import React, { Component } from 'react';

export class EventPractice extends Component {
    state = {
        username: '',
        message: '',
    };
    // 함수가 호출될 때 this는 호출부에 따라 결정되므로
    // 클래스의 임의 메서드가 특정 HTML요소의 이벤트로
    // 등록되는 과정에서 메서드와 this의 관계가 끊어진다.
    // 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트
    // 자신으로 제대로 가리키기 위해서는 메서드를 this와
    // 바인딩 하는 작업이 필요하다.

    // 1. 생성자(메서드 바인딩은 생성자에서 하는것이 일반적이다.)
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleChange(e) {
        this.setState({ message: e.target.value });
    }
    handleClick(e) {
        alert(this.state.message);
        this.setState({ message: '' });
    }

render() {
    return (
        <div>
            <h1>이벤트</h1>
            <input
                type="text"
                name="message"
                placeholder="아무거나"
                value={this.state.message}
                onChange={this.handleChange}
            />
            <button onClick={this.handleClick}>확인</button>
        </div>
    );
}

// --------------------------------------------------------- //
// 생성자를 사용하지 않는 방법으로는 화살표 함수를 사용하면된다.
handleChange = (e) => {
     this.setState({ message: e.target.value });
};
handleClick = (e) => {
     alert(this.state.message);
     this.setState({ message: '' });
};

Input 여러개 사용하는 방법

// EventPractice.js

// --- Input 여러개 사용하는 방법 --- //
    handleChange = (e) => {
        this.setState({
            // 객체 안에서 key를 []로 감싸면 그 안에 넣은 값이
            // 객체의 key 값으로 참조된다.
            [e.target.name]: e.target.value,
        });
    };
    handleClick = (e) => {
        alert(this.state.username + ':' + this.state.message);
        this.setState({ message: '', username: '' });
    };
    handleKeyPress = (e) => {
        console.log(e.key);
        if (e.key === 'Enter') {
            this.handleClick(e);
        }
    };

    render() {
        return (
            <div>
                <h1>이벤트</h1>
                <input
                    type="text"
                    name="username"
                    placeholder="유저이름"
                    value={this.state.username}
                    onChange={this.handleChange}
                />

                <input
                    type="text"
                    name="message"
                    placeholder="아무거나"
                    value={this.state.message}
                    onChange={this.handleChange}
                    onKeyPress={this.handleKeyPress}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

함수형 컴포넌트

// EventPractice.js

import React, { useState } from 'react';

const EventPractice = () => {
    const [form, setForm] = useState({
        username: '',
        message: '',
    });
    const { username, message } = form;
    const onChange = (e) => {
        const nextForm = {
            ...form, //기존의 form내용을 복사
            [e.target.name]: e.target.value, // 원하는 값을 덮어 씌운다
        };
        setForm(nextForm);
    };
    const onClick = () => {
        alert(username + ':' + message);
        setForm({
            username: '',
            message: '',
        });
    };
    const onKeyPress = (e) => {
        if (e.key === 'Enter') {
            onClick();
        }
    };
    return (
        <div>
            <h1>이벤트</h1>
            <input
                type="text"
                name="username"
                placeholder="유저이름"
                value={username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무거나"
                value={message}
                onChange={onChange}
                onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>확인</button>
        </div>
    );
};
export default EventPractice;