[React] Toggle

이번 토글 구현은
🥲 CSS가 복병이었다!
position을 이해했다고 생각했는데, 완전 반대로 알고있었다는...
🥰 이번에 처음으로 transition도 써봤당 ㅋ.ㅋ 뿌-듯

1. useState, styled 임포트

import { useState } from "react";
import styled from "styled-components";

2. 상태변경함수 작성(isOn)

  const toggleHandler = () => {
    setisOn(!isOn);
  };

3. 함수를 컨테이너에 붙이기

<ToggleContainer onClick = {toggleHandler}>

4. 삼항연산식으로 랜더링 함수 변경하기

 <div
  className=
   {isOn ? "toggle-container toggle--checked" :toggle-container"} />
 <div 
  className=
   {isOn ? "toggle-circle circle--checked" : "toggle-circle"} />

5. 상태에 따라 CSS 변경

   > .toggle-container {
    width: 60px;
    height: 25px;
    border-radius: 30px;
    background-color: lightgray;
    transition: all 1s;
    &.toggle--checked {
      background-color: skyblue;
    }
  }
  > .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    transition: all 1s;
    &.circle--checked {
      left: 36px;
    }
  }

6. 토클 써클자리를 잡기 위해서는
   토클 컨테이너를 기준으로 자리를 잡아야 함
   -> position:absolute 속성을 사용해서 부모 요소를 배치 기준으로 삼는다!

전체코드

import { useState } from "react";
import styled from "styled-components";

const ToggleContainer = styled.div`
  position: relative;
  left: 47%;
  margin-top: 8rem;

  > .toggle-container {
    width: 60px;
    height: 25px;
    border-radius: 30px;
    background-color: lightgray;
    transition: all 1s;

    &.toggle--checked {
      background-color: skyblue;
    }
  }

  > .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    transition: all 1s;

    &.circle--checked {
      left: 36px;
    }
  }
`;

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

  const toggleHandler = () => {
    setisOn(!isOn);
  };

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