[React] 스타일드 컴포넌트(styled-component)로 공통 컴포넌트 버튼 테마 분리하기 (with. 타입스크립트)

 

테마를 분리해보자.... 해내고나니 뿌듯하다... ^_ ^ㅋ

 

다만 리팩토링이 필요하다.

1. type으로 선언했는데 interface와 구분이 잘 되지 않는다. 좀 더 알아본 뒤 변경해야 할 것 같다.

2. 좀 더 공통화 할 수 있는 부분이 있을 것 같다.

3. 기본값도 유니온을 사용해서 type으로 만들 수 있을 듯?!

 

 

 

 

---

 

 

 

 

📄 CommonButton.tsx

import styled, { css } from 'styled-components'

// ...

function CommonButton(props: ButtonProps) {
  return (
    <Button size={props.size} theme={props.theme}>
      {props.label}
    </Button>
  )
}

export default CommonButton

 

ButtonProps는 이렇게 지정해주었다.

/**
 * **label**: 버튼 텍스트
 *
 * **theme**: primary(default), secondary
 *
 * **size**: large(default), medium, small
 * */
interface ButtonProps {
  label?: string
  theme: string
  size: string
}

 

 

 

---

 

 

 

1. 타입을 지정한다.

type Size = {
  [key: string]: {
    padding: string
    fontSize: string
  }
}

type Theme = {
  [key: string]: {
    backgroundColor: string
    color: string
    borderColor?: string
  }
}

 

 

2. 각 프로퍼티를 지정한다.

const sizes: Size = {
  large: {
    padding: '10px 15px',
    fontSize: '15px',
  },
  medium: {
    padding: '15px 20px',
    fontSize: '17px',
  },
  small: {
    padding: '20px 25px',
    fontSize: '20px',
  },
}

const themes: Theme = {
  primary: {
    backgroundColor: '#fff',
    color: '#202020',
  },
  secondary: {
    backgroundColor: '#346ba4',
    color: '#fff',
    borderColor: 'none',
  },
}

 

 

3. 변수를 만들고 선언한 뒤 스타일을 적용한다.

const sizeStyles = css<ButtonProps>`
  ${({ size }) => css`
    padding: ${sizes[size].padding};
    font-size: ${sizes[size].fontSize};
  `}
`

const themeStyles = css<ButtonProps>`
  ${({ theme }) => css`
    background-color: ${themes[theme].backgroundColor};
    color: ${themes[theme].color};
  `}
`

const Button = styled.button`
  /* 기본값 */
  border-radius: 6px;
  border: 1px solid #346ba4;
  font-weight: 700;

  /* size */
  ${sizeStyles}

  /* theme */
  ${themeStyles}
`

 

 

4. 기본값을 지정해준다.

CommonButton.defaultProps = {
  theme: 'primary',
  size: 'medium',
}

 

 

5. 호출부에서는 이렇게 호출한다.

<!-- 첫번째 button -->
<CommonButton
    size="large"
    theme="secondary"
    label="테스트"
></CommonButton>

<!-- 두번째 button -->
<CommonButton label="테스트"></CommonButton>

 

 

완성!

 

 

---

 

 

 

참고 및 출처

styled-components를 이용하여 스타일링 변경이 가능한 컴포넌트 만들기

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.