[react] switch toggle 버튼

react switch toggle 버튼

 

구현 화면

 

구현 영상

react 코드

• 기존의 알림 값이 true/false인지를 api로 가져오기
• 버튼 클릭시마다 input의 checked, onChange 속성을 이용해 구현
• css는 tailwind style을 적용

import React, { useEffect, useState, useRef } from "react"

const Alarm = () => {
  const [pushStatus, setPushStatus] = useState(null)

  useEffect(() => {
      api.get(`xxx`)
        .then(res => { setPushStatus(res.data.pushOn) }) //기존 알림 설정값 받아오기
        .catch(err => console.log(err))
    }
  }, [])

  const onChangeToggle = (e) => {
    setPushStatus(!pushStatus) //toggle 기능
    let params = { userId: userInfo.userId, pushOn: e.target.checked }
    api.post("xxx", params)
      .then(res => {
        if (res.data.ok) {
          if (e.target.checked) { //checked시 알람 발송(기본값)
         	alert('푸쉬 알람 설정이 저장되었습니다.')
          } else {//unchecked시 알람 미발송
            alert('푸쉬 알람 미발송 처리 되었습니다.')
          }
        }
      })
      .catch(err => console.log(err))
  }

  return (
    <div className='flex gap-1 items-center'>
   		<div className="relative inline-block w-12 mr-2 align-middle">
    	 	<input type="checkbox" name="toggle" id="toggle" onChange={onChangeToggle} checked={pushStatus} className={pushStatus ? ' right-0 duration-200 ease-in absolute block w-7 h-7 rounded-full bg-yellow-point border-4 outline-none appearance-none cursor-pointer': ' left-0 bg-white absolute block w-7 h-7 rounded-full border-4 appearance-none cursor-pointer' } />
     		<label htmlFor='toggle' className="block overflow-hidden h-7 rounded-full bg-gray-300 cursor-pointer"></label>
   		</div>
   		<p>{pushStatus ? '설정' : '미설정'}</p>
 	</div>
  );
};

export default Alarm;