UI 컴포넌트 리액트로 구현하기 - Toggle

Toggle

요구사항

• Toggle Switch 버튼을 클릭하면 배경색을 변경한다.
• Toggle Switch 버튼을 클릭하면 아이콘을 이동시킨다.
• 아이콘 이동은 애니메이션 효과로 자연스럽게 연결한다.

---

새로 배운 내용

📌 transition

트렌지션은 시작 요소를 끝 요소로 변경할 때의 사이 효과를 줄 수 있는 속성이다.
따라서 아예 없는 속성(DOM이 존재하지 않는 속성)은 transition을 줄 수 없다. 즉 조건부 렌더링으로 태그를 생성하는 경우에는 transiton을 적용하기 위한 다른 방법을 찾아야 한다.

• opacity 0 → 1,
• height 0 → 100px 등...

📌 styled-component props로 조건부 렌더링하기

styled-component 리턴 시 props를 주면 조건부로 스타일링을 할 수 있다. 정해진 문법은 아래와 같다.

• props를 줄때 굳이 props={props} 하지 않아도된다. 그냥
• 근데 컴포넌트에서 props를 받을 때는, props.props로 꺼내와야한다.
  ${(props) => props.props}는 고정 문법이다.

// props 주기 
<Button1 skyblue>Button1</Button1>

// 컴포넌트에서 조건부로 속성값 주기
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

---

작성 코드 - React

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

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

  > .toggle-container {
    width: 80px;
    height: 40px;
    border-radius: 30px;
    background-color: rgb(245, 234, 234);
    &.toggle--checked{
      background-color: rgb(241, 103, 103);
    }
  }

  > .toggle-circle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.5s;
    &.toggle--checked{
      background-color: white;
      left: 44px;
    }
  }
`;

const Desc = styled.div`
  text-align: center;
  padding-top: 16px;
  font-weight: bold;
  color: rgb(245, 234, 234);
  ${(props) =>
    props.isOn && css`
    color: rgb(241, 103, 103);
    transition: all 0.3s;
  `
  }
`;

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

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


  return (
    <>
      <ToggleContainer
        onClick={toggleHandler}
      >
        <>
          <div className={`toggle-container ${isOn ? "toggle--checked" : ""}`} />
          <div className={`toggle-circle ${isOn ? "toggle--checked" : ""}`} />
        </>
      </ToggleContainer>
      <Desc isOn>
        {isOn ? 'Toggle Switch ON' : 'Toggle Switch OFF'}
      </Desc>
    </>
  );
};

작성 코드 - storybook

import React from 'react';
import '../variables.css';
import { Toggle } from '../components/BareMinimumRequirements/Toggle';

export default {
  title: 'Example/Toggle',
  component: Toggle
};

const Template = (args) => <Toggle {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Toggle'
};