[React] useState를 사용하여 토글 버튼 구현하는 방법 Button toggle on off

Intro

안녕하세요. 이번 시간에는 react 리액트에서 토글 버튼을 구현하는 방법에 대해 알아보겠습니다. 

How to solve the problem

저는 토글 버튼을 구현하기 위해서 useState hook을 사용하였습니다.

useState hook is used to initialize with initial value and function which changes its value on click event handler.

 

우선 처음 토글버튼의 on/off 상태를 나타내는 state를 만들어줍니다. 

const [isOff, setIsOff] = useState(true);

 

이후 버튼을 클릭할 때마다, 해당 state를 사용해줍니다. on/off 상태에 따라 css class도 다르게 적용해줄 수 있겠죠?

  <button onClick={() => setIsOff(!isOff)}>{ isOff ? 'ON' : 'OFF' }</button>

 

아래는 전체 소스입니다. 참고해주세요 :)

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const ToggleButtonOnOff = () => {
  const [isOff, setIsOff] = useState(true);

  return (
    <button onClick={() => setIsOff(!isOff)}>{ isOff ? 'ON' : 'OFF' }</button>
  );
}

ReactDOM.render(
  <ToggleButtonOnOff />,
  document.getElementById('root')
);