[React] 이벤트 핸들링(Event Handling)

 

1. 이벤트 처리

- 컴퓨터 프로그래밍에서 이벤트는 사건이라는 의미를 가짐

 

1) DOM 이벤트 vs 리액트 이벤트

// DOM의 이벤트 처리
<button onclick="activate()">
	Activate
</button>

- 이벤트의 이름(ex. onclick)을 소문자로 표기

- 이벤트를 처리할 함수를 문자열로 전달

 

// 리액트에서 이벤트 처리
<button onClick={activate}>
	Activate
</button>

- 이벤트 이름을 카멜표기법으로 표기

- 이벤트를 처리할 함수 그대로 전달

 

 

2) 이벤트 핸들러(Event Handler)

- 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수

- 이벤트 리스너(Event Listener)라고도 함(이벤트가 발생하는 것을 계속 듣고 있다는 의미)

- 클래스 컴포넌트: 클래스의 함수로 정의하고 생성자에서 바인딩하여 사용, 클래스 필드 문법도 사용 가능

- 함수 컴포넌트: 함수 안에 함수로 정의하거나 arrow function을 사용해서 정의

 

 

 

2. Arguments 전달

 

1) Argument

- 함수에 전달할 데이터

- 파라미터 또는 매개변수라고 부르기도 함

 

2) 클래스 컴포넌트

- arrow function 사용하기

import React from "react";

// 클래스 필드 문법 사용하여 작성
class ConfirmButton2 extends React.Component {
    constructor(props) {
        super(props);

        // 확인(Confirm)여부를 저장하기 위해 state에 isConfirmed라는 변수를 하나 갖고 있고, 초기값은 false
        this.state = {
            // isConfirmed 라는 Boolean 변수
            isConfirmed: false,
        };
    }

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

    render() {
        return (
            // 버튼을 클릭하면 handleConfirm() 호출
            <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        );
    }
}

export default ConfirmButton2;

 

 

- Function.prototype.bind  사용하기

import React from "react";

// 클래스 컴포넌트로 작성
class ConfirmButton1 extends React.Component {
    constructor(props) {
        super(props);

        // 확인(Confirm)여부를 저장하기 위해 state에 isConfirmed라는 변수를 하나 갖고 있고, 초기값은 false
        this.state = {
            // isConfirmed 라는 Boolean 변수
            isConfirmed: false,
        };

         // callback에서 this를 사용하기 위해서 바인딩 필수
        this.handleConfirm = this.handleConfirm.bind(this);
    }

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

    render() {
        return (
            // 버튼을 클릭하면 handleConfirm() 호출
            <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        );
    }
}

export default ConfirmButton1;

 

 

3) 함수 컴포넌트

- 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용

import React, {useState} from "react";

// 함수 컴포넌트로 작성
function ConfirmButton3 (props) {
    const[isConfirmed, setIsConfirmed] = useState(false);

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


    return (
        // 버튼을 클릭하면 handleConfirm() 호출
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? "확인됨" : "확인하기"}
        </button>
    );

}

export default ConfirmButton3;