다양한 스타일의 버튼

웹 서비스를 개발할 때 다양한 스타일의 버튼을 자주 사용한다.
예를 들면, 아래의 스타일 단추 따위.

그렇다면 이번 이야기는 여러 가지 스타일을 가진 버튼 구성 요소의 실현에서 구성 요소에 전달되는 Props 동적 변경의 실현을 소개한다.

개발 환경

개발 중React과TypeScript에서 진행됩니다.또한 CSS 사용 정보styled-components.

React: 16.8.1

typescript: 3.3.1

styled-components: 4.1.3

실시

구현 정보

관리 스타일style.ts

Button 어셈블리 로직index.tsx

에서 설명한 대로 해당 매개변수의 값을 수정합니다.

1. 스타일 관리를 하는 스타일.ts

컨텐트

// style.ts
import { css } from 'styled-components';

type ButtonStyle = 'default' | 'primary' | 'secondary' | 'danger';

export interface StyleProps {
  buttonstyle?: ButtonStyle;
}

function getStyle(style: ButtonStyle = 'default') {
  switch (style) {
    case 'default':
      return css`
        background-color: none;
        color: #000000;

        &:hover {
          background-color: #b7b7b7;
        }
      `;
    case 'primary':
      return css`
        background-color: #5baded;
        color: #ffffff;

        &:hover {
          background-color: #498abe;
        }
      `;
    case 'secondary':
      return css`
        background-color: #828282;
        color: #ffffff;

        &:hover {
          background-color: #686868;
        }
      `;
    case 'danger':
      return css`
        background-color: #ed5b5b;
        color: #ffffff;

        &:hover {
          background-color: #be4949;
        }
      `;
    default:
      return null;
  }
}

export const ButtonStyle = css`
  display: inline-block;
  font-size: 14px;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  border: 0px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  ${(props: StyleProps) => getStyle(props.buttonstyle)};
`;

해설

이번에는 Buttonbuttonstyle에 전달된props 값에 따라 사용하는 스타일을 동적으로 변경할 수 있습니다.
먼저 buttonstyle 에서 ButtonStyle 유형으로 정의됩니다.여기서 허용되는 Button 스타일을 나타내는 문자열을 설정할 수 있습니다.

type ButtonStyle = 'default' | 'primary' | 'secondary' | 'danger';

export interface StyleProps {
  buttonstyle?: ButtonStyle;
}

그리고 getStyle()에서 buttonstyle에 해당하는 css를 되돌려줍니다.

function getStyle(style: ButtonStyle = 'default') {
  switch (style) {
    case 'default':
      return css`
        background-color: none;
        color: #000000;

        &:hover {
          background-color: #b7b7b7;
        }
      `;
    case 'primary':
      return css`
        background-color: #5baded;
        color: #ffffff;

        &:hover {
          background-color: #498abe;
        }
      `;
   (...以下省略...)

마지막으로 앞에서 설명한 ButtonProps 및 getStyle() 정의를 사용하여 buttonstyle CSS를 되돌려줍니다. 이 CSS는 ButtonStyle 에 따라 동적으로 변경할 수 있습니다.

export const ButtonStyle = css`
  display: inline-block;
  font-size: 14px;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  border: 0px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  ${(props: StyleProps) => getStyle(props.buttonstyle)};
`;

2. Button 구성 요소 논리가 있는 index.tsx

컨텐트

// index.tsx
import * as React from 'react';
import styled from 'styled-components';
import { ButtonStyle, StyleProps } from './style';

const StyledButton = styled.button`
  ${ButtonStyle};
`;

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & StyleProps;

const Button: React.FC<Props> = props => {
  return <StyledButton {...props} />;
};

export default Button;

해설

방금 설명한 style.ts 내용을 사용하여 Button의 스타일을 정의했습니다.
먼저 style.ts에서 가져온 ButtonStyle 을 사용하여 지정한 스타일의 button을 만듭니다.

const StyledButton = styled.button`
  ${ButtonStyle};
`;

다음은 Button 구성 요소에 전달할 Props의 유형 정의입니다.여기에는 일반적인 button의 Props 외에 지정StyleProps도 있습니다.

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & StyleProps;

이렇게 하면 다음과 같이 지정된 스타일의 Propsbuttonstyle를 Button 구성 요소에 전달할 수 있습니다.

<Button onClick={handleClick} buttonstyle="primary">PrimaryButton</Button>

마지막으로 StyledButton 및 Props 를 사용하여 스타일의 Button 어셈블리를 작성하면 됩니다.

const Button: React.FC<Props> = props => {
  return <StyledButton {...props} />;
};

export default Button;

실제 사용

import * as React from 'react';
import { Button } from '@/components/atoms/Button';

const App: React.FunctionComponent = () => {
  const handleClick = () => {
    console.log('===Clicked!====');
  };

  return (
    <ul>
      <li>
        <Button onClick={handleClick} buttonstyle="primary">
          Primary
        </Button>
      </li>
      <li>
        <Button onClick={handleClick} buttonstyle="secondary">
          Secondary
        </Button>
      </li>
      <li>
        <Button onClick={handleClick} buttonstyle="danger">
          Danger
        </Button>
      </li>
      <li>
        <Button onClick={handleClick}>Default</Button>
      </li>
    </ul>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

감상

이번에 가장 많이 배운 것은 동적으로 스타일을 바꾸는 Props의 정의 방법입니다(아래 부분).

type ButtonStyle = 'default' | 'primary' | 'secondary' | 'danger';

여기에 허용된 값에 대한 유형 정의를 통해 개발 시 태국의 오류 디스플레이와 편집기의 보충 기능을 활용할 수 있습니다.
이 유형을 string 유형으로 정의하면props에서 문자열을 자유롭게 입력할 수 있기 때문에 일부러 형식을 가져오는 장점을 누릴 수 없습니다(처음에 이렇게 설치되었는데 댓글에서 지적한 땀)
그래서 이번 설치는 "또다시, TypeScript에 대한 유형 정의가 성장할 수 있을까"하는 순간입니다.