React, 클릭 이벤트 처리하기

ConfirmButton.jsx

import React, { useState } from "react";

function ConfirmButton() {

    const [isConfirmed, setIsConfirmed] = useState(false); // 버튼이 확인되었는지 여부를 관리하는 상태값

    const toggleConfirm = () => { // 버튼 클릭 시 상태를 변경하는 함수
        setIsConfirmed(!isConfirmed); // 이전 상태를 반전
    };

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

export default ConfirmButton;

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PlayGround from "./chapter_00/PlayGround";

import ConfirmButton from "./chapter_08/ConfirmButton";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <ConfirmButton />
    </React.StrictMode>
);

reportWebVitals();

// https://github.com/soaple/first-met-react-practice-v18/tree/master/src

 

결과

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src