(실습) Event

함수 컴포넌트로 이벤트 처리인데, arrow function이 너무 익숙하지 않아 알아보기 힘들었다.

ConfirmBurtton.jsx

import React, {useState} from "react";
// useState 사용

function ConfirmButton(props) {
    const [isConfirmed, setIsConfirmed] = useState(false);
    // useState의 초기값 false

    const handleConfirm = () => {
        setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
        // 들어온 값을 반대로 바꿔줌 false -> true 
    };

    return(
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? '확인됨' : '확인하기'}
            // 처음엔 false, 이벤트를 통해 값 변경 
            // 확인하기 -> 확인됨 
        </button>
    )

}

export default ConfirmButton;

클릭 후