[ReactJS] Handling Events

Events

웹사이트에는 다양한 이벤트들이 존재한다. 이벤트를 처리하는 것을 '이벤트를 핸들링한다'라고 표현한다.

<button onclick = "activate()" />
<button onClick = {activate} />

아래가 React에서 사용하는 방식, 위는 Real DOM에서 사용하는 방식이다. 이렇게 함수를 전달하는 방식과 표기법이 다른 것을 알 수 있다.

Event Handler

class Toggle extends React.Component {
    constructor(props) {
        super(props);

        this.state = {isToggleOn: true};
        
        // callback에서 'this'를 사용하기 위해서는 바인딩을 필수적으로 해줘야 함
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? '켜짐' : '꺼짐'}
            </button>
        )
    }
}

함수 컴포넌트에서의 Event Handling

import { useState } from "react";

function Toggle(props) {
    const [isToggleOn, setIsToggleOn] = useState(true);
	
    // 방법 1. 함수 안에 함수로 정의
    function handleClick() {
        setIsToggleOn((isToggleOn) => !isToggleOn);
    }
	
    // 방법 2. arrow function을 사용하여 정의
    const handleClick = () => {
        setIsToggleOn((isToggleOn) => !isToggleOn);
    }

    return (
        <button onClick={handleClick}>
            {isToggleOn ? "On" : "Off"}
        </button>
    )
}

Arguments

함수에 전달할 내용이라고 생각하면 되는데, Event Handler에 전달할 데이터라는 의미가 된다. Parameter와 같은 의미인 것 같다.

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

함수 컴포넌트에서의 Arguments 전달

function MyButton(props) {
    const handleDelete = (id, event) => {
        console.log(id, event.target);
    };

    return (
        <button onClick={(event) => handleDelete(1, event)}>
            삭제하기
        </button>
    )
}

---

< Source />

ConfirmButton.jsx (Class Component Ver)

import React from "react";

class ConfirmButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isConfirmed: false,
        }

        this.handledConfirm = this.handledConfirm.bind(this);
    }

    handledConfirm() {
        this.setState((prevState) => ({
            isConfirmed: !prevState.isConfirmed,
        }));
    import React from "react";

class ConfirmButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isConfirmed: false,
        }

        // this.handledConfirm = this.handledConfirm.bind(this);
    }

    // handledConfirm() {
    //     this.setState((prevState) => ({
    //         isConfirmed: !prevState.isConfirmed,
    //     }));
    // }

    handledConfirm = () => {
        this.setState((prevState) => ({
             isConfirmed: !prevState.isConfirmed,
        }));
    }

    render() {
        return (
            <button
                onClick={this.handledConfirm}
                disabled={this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        )
    }
}

export default ConfirmButton;

    render() {
        return (
            <button
                onClick={this.handledConfirm}
                disabled={this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        )
    }
}

export default ConfirmButton;

ConfirmButton.jsx (Function Component Ver)

import React, { useState } from "react";

function ConfirmButton(props) {
    const [isConfirmed, setIsConfirmed] = useState(false);

    const handleConfirm = () => {
        setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
    }

    return (
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? "확인됨" : "확인하기"}
        </button>
    )
}

export default ConfirmButton;

※ 본 게시글은 소플님의 강의 영상을 참고하여 작성되었습니다. 개인적인 공부 목적으로 사용하고 있고, 문제 시 비공개 전환하도록 하겠습니다.