[React] Toggle Component

Toggle

두 가지 상태만을 가지고 있는 스위치

의사코드

1. 토글을 표시할 상자와 상태를 표시할 아이콘 생성
2. 해당 토글에 클릭 이벤트 전달
3. 토글의 상태를 변경할 true/false 값을 가진 useState 생성
4. 클릭이 일어날 때마다 useState의 boolean 값을 변경

• transition 효과 추가하기

코드

export const Toggle = () => {
  const [isOn, setisOn] = useState(false);
  const toggleHandler = () => {
    setisOn((prev) => !prev);
  };

  return (
    <>
      <div
        onClick={toggleHandler}
      >
        <div className={`toggle-container ${isOn ? 'checked' : ''}`} />
        <div className={`toggle-circle ${isOn ? 'checked' : ''}`} />
      </div>
    </>
  );
};

// toggle 관련 CSS
  .toggle-container {
    width: 50px;
    height: 24px;
    border-radius: 30px;
    background-color: #8b8b8b;
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
    transition: 0.5s;
  }
  .toggle--checked {
    background-color: lightblue;
    transition: 0.5s;
  }

  .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.5s;
  }
  .checked {
    left: 27px;
    transition: 0.5s;
  }