리액트 useState로 체크박스 컨트롤 하기

 

리액트로 체크박스 체크시에 다크모드, 언체크시에 라이트모드로 변경되는 코드 입니다.

 

import React, { useState } from "react";

import "./styles.css";

import Dark from "./Dark";

import Light from "./Light"; 

 

export default function App() {

  const [isDark, setDark] = useState(false);

 

  const onChange = ({ target }) => {

    target.checked ? setDark(true) : setDark(false);

  }; 

 

  return (

    <div className="App">

      <div className="check-mode">

        <input type="checkbox" onClick={onChange}></input>

        다크모드

      </div>

      {isDark === true ? '다크모드' : '라이트모드'} // 이렇게 구현 하시면 됩니다. useState로 구분이 가능 합니다.

    </div>

  );

}