[React] CheckBox 사용해보기

안녕하세요. 오늘은 체크박스를 이용해보는 시간을 가져볼건데 체크박스의 상태에 따라 버튼 활성도 한번 해볼게요.

 

import './App.css';
import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
        setIsChecked(!isChecked);
    }
  return (
    <div className="App">
        <input type='checkbox' checked={isChecked} onChange={handleCheckboxChange}/>
        <button onClick={()=>{alert("Hello World")}} disabled={!isChecked}>출력하기</button>
    </div>
  );
}

export default App;

체크가 되어있다면 버튼은 활성화 되어있을것이고 반대의 경우 버튼이 안눌릴것입니다.

영상을 통해 확인해보세요.