TailwindCSS 재사용 컴포넌트 만들기 - feat: TypeScript

TailwindCSS로 스타일링 할 때 재사용 컴포넌트를 만드려면 className 복사해서 사용해왔는데 여간 불편한 일이 아니다.

그래서 재사용 컴포넌트를 만들어서 코드의 중복을 줄이고, 디자인을 일관되게 유지하도록 만들어 보려 한다.

TypeScript + TailwindCSS를 이용한 재사용 컴포넌트 만들기

컴포넌트를 사용하는 곳에 타입을 지정한 뒤 props를 통해 이벤트 헨들러, 컬러, 색상 등을 받을 수 있게 제작하였다.

 

components/common/Button.tsx

import { ReactNode } from 'react';

type Color = 'default' | 'white';
type Size = 'sm' | 'md' | 'full';
type Type = 'button' | 'submit';

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  color?: Color;
  size?: Size;
  type?: Type;
}

export function Button({ children, onClick, color = 'default', type = 'button', size = 'md' }: ButtonProps) {
  return (
    <button
      className={`${buttonTheme.color[color]} ${buttonTheme.size[size]} text-center rounded-md font-semibold border`}
      type={type}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

const buttonTheme = {
  color: {
    default: 'text-white bg-green-400 border-green-400',
    white: 'text-green-400 bg-white border-green-400',
  },

  size: {
    sm: 'px-2 py-1.5 text-sm',
    md: 'px-3 py-2 text-base',
    full: 'py-3 w-full text-base',
  },
};

공통으로 사용되는 css는 button의 className에 미리 정의해두고 중복을 제거하였다.
Default 값을 사용하여 일반적으로 많이 쓰이는 설정을 미리 지정함으로써 불필요한 props 설정을 제거하였다.

 

App.tsx

import React from 'react';
import { Button } from './components/common/Button';

export default function App() {
  return (
    <div>
      <Button>안녕</Button>
      <Button color="white">안녕</Button>
    </div>
  );
}

 

아쉬운 점

위 코드에서 살짝 아쉬운 부분이 있다. buttonTheme.color에 색상을 추가하면 type Color에서도 해당 키값을 추가해줘야 한다.

만약 neutral 색상을 추가하려면 buttonTheme.color와 type Color를 직접 맞춰줘야 한다.

나는 buttonTheme.color에 값을 추가하면 동적으로 Color 타입도 추가하고 싶었다.

개선된 코드

components/common/Button.tsx

import { ReactNode } from 'react';

type Color = keyof typeof buttonTheme.color;
// type Color = 'default' | 'white';
type Size = keyof typeof buttonTheme.size;
// type Size = type Size = 'sm' | 'md' | 'full';
type Type = 'button' | 'submit';

//...

const buttonTheme = {
  color: {
    default: 'text-white bg-green-400 border-green-400',
    white: 'text-green-400 bg-white border-green-400',
  },

  size: {
    sm: 'px-2 py-1.5 text-sm',
    md: 'px-3 py-2 text-base',
    full: 'py-3 w-full text-base',
  },
};

 

TypeScript의 keyof typeof을 활용하면 객체의 key들만 가져와 상수 타입으로 만들 수 있다.