[React] Toggle Component 애니메이션 구현

 

리엑트에서 기본적으로 토글 버튼은 두가지 상태를 가지는 버튼이라고 생각하면 된다.

이는 삼항연산자나 조건문을 가지고 '토글' 상태를 반대로 변경 시키며 구현할 수 있고,

여기에 애니메이션 효과를 추가하여 우리가 아는 토글 버튼의 모양으로 만들 수 있다.

 

인라인 스타일 형식에서는 해당 애니메이션을 구현하기어렵고,

true/false 의 boolean 값으로 두가지 상태를 가지게 구성하여

현재 상태에 따라 스타일을 다르게 주어 생성할 수 있다.

또한, 해당 토글 버튼을 컴포넌트로 만들어 필요할 때마다 불러내어 사용 가능하다.

 

• false

• true

 

토글 버튼 React code

import React, { useState } from "react";
import { ToggleContainer } from "./ToggleButton.styles";

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

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

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

export default ToggleButton;

 

토글 버튼 스타일 코드

import styled from "styled-components";

export const ToggleContainer = styled.div`
  position: relative;
  cursor: pointer;

  > .toggle-container {
    width: 50px;
    height: 29px;
    border-radius: 20px;
    background-color: #7d8fb3;
  }
  > .toggle--checked {
    background-color: #3361ff;
    transition: 0.5s;
  }

  > .toggle-circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgb(255, 254, 255);
    transition: 0.5s;
  }
  > .toggle--checked {
    left: 23px;
    transition: 0.5s;
  }
`;