Styled Components로 Toggle 만들기

 

*  React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 
*  Styled Components를 활용해 Toggle 커스텀 컴포넌트를 구현 

 

Toggle Component

 

완성 예시

 

 

Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다.
예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치를 Toggle Switch라고 할 수 있다. 

 

필요한 컴포넌트

ToggleContainer (div) : Toggle을 구현하는데 필요한 컴포넌트를 감싸주는 컨테이너 

• div ClassName "toggle-container" : Toggle 바깥쪽 테두리 
• div ClassName "toggle-circle" : Toggle 안쪽 원 도형 (Toggle Switch)

Desc (div) : Toggle 상태를 나타내는 텍스트를 담은 컨테이너

 

state

Toggle 컴포넌트는 아래와 같은 state가 존재한다.

• isOn state :토글 버튼의 on/off 여부를 확인 

토글 버튼 제어를 위한 핸들러 함수 toggleHandler를 Toggle 안쪽 원 도형과, 바깥쪽 테두리에 넣어준다.

• 즉, 토글의 원 또는 바깥쪽을 클릭할 때마다, 원이 좌우로 움직인다.
• toggleHandler 함수 :
  • ToggleContainer 클릭 시 발생되는 change 이벤트 핸들러 
  • 클릭할 때마다 상태가 Boolean 값으로 변경 

 

조건부 스타일링 & 렌더링

조건부 스타일링을 활용해 Toggle Switch가 ON인 상태일 경우에만 toggle--checked 클래스를 두 요소 모두에 추가한다.

• 기본 CSS에서는 템플릿 리터럴과 삼항 연산자를 활용해 조건부 스타일링을 적용할 수 있다. 
• <div className={`toggle-container ${isOn ? "toggle--checked" : ""}`} />

조건부 렌더링을 활용해

• Toggle Switch가 ON인 상태일 경우에 Desc 컴포넌트 내부의 텍스트를 'Toggle Switch ON'으로
• Toggle Switch가 OFF인 상태일 경우에는 'Toggle Switch OFF'로 변경한다.

 

구현 코드 

 

Toggle UI Component 코드

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

const ToggleContainer = styled.div`
  position: relative;
  margin-top: 8rem;
  left: 47%;
  width: 300px;
  cursor: pointer;

  > .toggle-container {
    width: 50px;
    height: 24px;
    border-radius: 30px;
    background-color: #8b8b8b;
    transition: 0.5s;

    &.toggle--checked {       // .toggle--checked 클래스가 활성화 되었을 경우의 CSS
      background-color: blue; // .toggle-container 안에 넣어서 & 기호 써도 됨.
    }
  }

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

  }
  
  > .toggle--checked {     // .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현
    left: 27px;            // Togglecontainer 안에서 > 기호 써도 됨.
  }
`;

// 설명 부분 CSS
const Desc = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
`;

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

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

return (
    <>
      <ToggleContainer>
        <!-- 조건부 스타일링 활용 -->
        <div onClick={toggleHandler} className={`toggle-container ${isOn ? "toggle--checked" : null}`} />
        <div onClick={toggleHandler} className={`toggle-circle ${isOn ? "toggle--checked" : null}`} />
      </ToggleContainer>
      
      <!-- 조건부 렌더링 활용 -->
      {isOn ? <Desc> Switch On! </Desc> : <Desc> Switch Off!</Desc>}
      <!-- 아래와 같이 써도 된다. -->
      <!-- <Desc> { isOn ? 'Switch On!' : 'Switch Off!' } </Desc> -->
    </>
  );
};

 

포인트

 

🟣 transition

 

토글스위치가 부드럽게 옮겨지는 애니메이션 효과를 주기 위해서는 CSS의 transition 속성을 활용할 수 있다. 

 

transition의 속성

• transition-property: color, transform, all 등..  // 어떤 속성에 transition을 적용할 것인지 지정
• transition-duration: 0.2 // transition에 걸리는 시간  
• transition-duration: ease-in-out //  transition의 속도 패턴
• transition-delay: 2s // transition 요청을 받은 후, 실제로 실행되기 까지 기다려야 하는 시간의 양

transition의 단축 속성

• transition: all 0.4s ease-in-out 1s
• 순서대로 property, duration, timing-function, delay
• 바뀌는 모든 요소를 / 0.4초 동안 / ease-in-out 방식으로 / 1초 뒤에 실행하겠다.