[React] Event 정의와 Handling

Event가 발생을 하고 이를 처리하는 것을 Event를 Handling 한다고 표현

Event : 사건
ex) button click etc..

DOM 과 React의 Event 차이

Event handler (Event listener) 둘이 동일한 표현

button click handling의 예제

// import React from "react";

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

//         this.state={
//             isConfirmed: false,
//         };

//         // this.handleConfirm = this.handleConfirm.bind(this); -- 1차
//     }

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

//     handleConfirm = () => { // -- 1차의 내용을 arrow function을 사용하여 변경함
//         this.setState((prevState) => ({
//             isConfirmed: !prevState.isConfirmed,
//         }));
//     }

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

// export default ConfirmButton;

import React, { useState } from "react";

function ConfirmButton(props){
    const [isConfirmed, setIsConfirmed] = useState(false); // isConfirmed == state의 변수, setIsConfirmed == state를 갱신할 수 있는 함수, useState의 초기 값은 false

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

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

export default ConfirmButton;