Button 컴포넌트 리팩토링 하기

목차

1. 이전 코드

2. 리팩토링

3. Trouble Shooting

---

1. 이전 코드

우선 이전 코드를 살펴보자.

Button 컴포넌트는 기본 컴포넌트 중의 기본 느낌이 있어서 가장 처음 작성한 코드이고, 그만큼 엉망진창이다.

이 컴포넌트는 text 버튼, text+icon 버튼이다. (텍스트가 무조건 들어가 있어야 한다는 뜻)

 

아래와 같이 쪼개서 코드를 살펴보자.

• interface ButtonProps { ... }
• function Button { ... }
  • Props 정의부
  • 스타일링 정의부
  • 버튼 출력부

interface 정의

'use client';

import { clsx } from 'clsx';
import React from 'react';

interface ButtonProps {
  children: React.ReactNode;	// text
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  icon?: React.ReactNode;	// 들어갈 아이콘
  iconPosition?: 'left' | 'right';	// 아이콘 위치
}

크게 설명할 부분이 없다. 버튼 컴포넌트를 다룰 때 필요하다고 생각한 props들을 적었다.

children, icon이 모두 React.ReactNode인 이유는 이 자리에 어떤 것이 들어갈 지 아직 구체적으로 생각하지 못했기 때문이다.

 

 

props 정의부

export default function Button({
  children,
  variant = 'primary',
  onClick,
  type = 'button',
  size = 'md',
  icon,
  iconPosition = 'left',
  disabled,
}: ButtonProps) { ...

Button을 const Button이 아닌 export default function의 형식으로 정의하고 있다.

default값이 필요하다고 생각하는 부분들에 default 값을 지정해줬으며, ButtonProps를 타입으로 지정했다.

 

스타일링 정의부

{
  const baseStyle = 'inline-flex items-center outline-none rounded font-medium transition';
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-gray-800 cursor-pointer',
    outline: 'border border-gray-300 text-gray-700 hover:bg-gray-100 cursor-pointer',
    ghost: 'text-gray-700 hover:bg-gray-100 cursor-pointer',
  };
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-5 py-3 text-lg',
  };

  // 클래스 조합부
  const classes = clsx(baseStyle, variants[variant], sizes[size], {
    'cursor-not-allowed bg-gray-400 opacity-50': disabled,
    'hover:cursor-not-allowed hover:bg-gray-400 hover:opacity-50': disabled,
  });

tailwind로 스타일을 정의해줬다.

baseStyle로 기본 버튼 스타일을 작성했으며, variants, sizes 값에 따른 스타일도 작성했다.

classes는 위에서 작성한 스타일들을 clsx로 합친다.

 

버튼 출력부

  // 버튼 실제 출력 부분
  const ButtonContent = (
    <>
      {icon && iconPosition === 'left' && <span className="mr-2">{icon}</span>}
      {children}
      {icon && iconPosition === 'right' && <span className="ml-2">{icon}</span>}
    </>
  );

  return (
    <button
      type={type}
      className={classes}
      disabled={disabled}
      aria-disabled={disabled}
      onClick={onClick}
    >
      {ButtonContent}
    </button>
  );
}

버튼을 실제로 출력하는 부분이다.

ButtonContent를 따로 작성하여 return에서는 {ButtonContent}만 입력하도록 했다.

 

 

전체 코드

'use client';

import { clsx } from 'clsx';
import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  icon?: React.ReactNode;
  iconPosition?: 'left' | 'right';
}

export default function Button({
  children,
  variant = 'primary',
  onClick,
  type = 'button',
  size = 'md',
  icon,
  iconPosition = 'left',
  disabled,
}: ButtonProps) {
  const baseStyle = 'inline-flex items-center outline-none rounded font-medium transition';
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-gray-800 cursor-pointer',
    outline: 'border border-gray-300 text-gray-700 hover:bg-gray-100 cursor-pointer',
    ghost: 'text-gray-700 hover:bg-gray-100 cursor-pointer',
  };
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-5 py-3 text-lg',
  };

  // 클래스 조합부
  const classes = clsx(baseStyle, variants[variant], sizes[size], {
    'cursor-not-allowed bg-gray-400 opacity-50': disabled,
    'hover:cursor-not-allowed hover:bg-gray-400 hover:opacity-50': disabled,
  });

  // 버튼 실제 출력 부분
  const ButtonContent = (
    <>
      {icon && iconPosition === 'left' && <span className="mr-2">{icon}</span>}
      {children}
      {icon && iconPosition === 'right' && <span className="ml-2">{icon}</span>}
    </>
  );

  return (
    <button
      type={type}
      className={classes}
      disabled={disabled}
      aria-disabled={disabled}
      onClick={onClick}
    >
      {ButtonContent}
    </button>
  );
}

 

 

---

2. 리팩토링

0. 문제점 짚기

그럼 이제 이전 코드에서 생각한 문제점들, 고치고 싶은 부분들을 정리해보자.

 

1. 확장성의 부재

현재 ButtonProps는 내가 정의한 props 외의 것을 받아올 수 없도록 작성되어 있다.

Button은 HTML의 기본 요소로, HTMLButtonElement의 속성을 상속받아 사용하도록 수정해야 한다.

 

2. tailwind 정렬이 안됨

작은 부분일 수 있으나, 다른 미니 프로젝트에서 tailwind 정렬을 했는데 상당히 편했다.

그래서 tailwind 정렬을 적용하고 싶었다.

 

3. props 정렬 안됨

tailiwnd 정렬을 생각하니까 props 정렬이 안된 것도 신경이 쓰여 이 부분도 해결하고 싶었다.

 

4. design이 나옴에 따라 발견된 좌우 padding 문제

당시 코드를 작성할 때는 디자인이 전혀 나오지 않았는데, 지금은 디자인이 어느정도 나온 상태다.

figma를 확인하니까 아이콘이 있는 쪽과 텍스트가 있는 쪽의 패딩값이 달랐는데, 착시를 고려하여 의도된 디자인이라고 했다.

 

5. 함수 선언식 vs 함수 표현식

기존 Button은 export default function Button(...)으로 함수 선언식으로 작성되었다.

일관된 선언 스타일과 리팩토링 유연성 등을 위해 함수 표현식으로 수정하도록 한다.

 

 

1. 확장성

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
  'disabled' | 'onClick' | 'children'> {
  ...
}

ButtonProps가 HTMLButtonElement의 속성을 상속 받도록 수정했다.

 

✅ React.ButtonHTMLAttributes<HTMLButtonElement>

React가 기본적으로 제공하는 버튼 요소의 모든 속성 타입이다.

이 속성들을 extends 해 옴으로써 버튼의 기본 속성을 그대로 사용할 수 있게 된다.

<Button disabled onClick={handleClick}>버튼</Button>

 

✅ Omit<..., 'disabled' | 'onClick' | 'children'>

Omit<T, K>는 TypeScript의 유틸리티 타입이다.

→ "타입 T에서 특정 키 K를 제외한 나머지 속성만 남겨라"

커스텀 컴포넌트에서 새로 정의하려는 속성을 제외시키기 위해서 사용한다.

이 코드에서는 disabled, onClick, children에 대해 재정의를 하고 있다.

 

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    ...,
    ...rest
  },
  ref
) { ...

✅ React.forwardRef<HTMLButtonElement, ButtonProps>

React.forwardRef는 부모 컴포넌트로부터 받은 ref를 자식 내부의 실제 DOM 요소나 다른 컴포넌트로 전달하는 함수이다.

일반적으로 함수형 컴포넌트는 ref를 직접 받을 수 없기 때문에 React.forward로 감싸야 ref 전달이 가능해진다.

 

이 때 React.forwardRef() 안에 익명 함수가 아닌 명명된 함수 function Button을 사용하는데,

디버깅 편의성을 위함이다.

만약 이 컴포넌트에서 에러가 발생했을 때 익명함수라면 DevTools이나 에러 스택에 <ForwardRef>로만 보이는데,

명명된 함수 형태로 작성하면 Button이라는 이름이 보이기 때문이다.

 

 

2. tailwind 정렬

tailwind 정렬을 위해서 prettier-plugin-tailwindcss 및 tv를 설치했다.

import { tv } from 'tailwind-variants';

const styles = tv({
  base: 'inline-flex items-center justify-center rounded font-medium whitespace-nowrap transition-all duration-150 outline-none',
  variants: {
    variant: {
      primary: 'cursor-pointer bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700',
      outline:
        'cursor-pointer border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100',
      ghost: 'cursor-pointer bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200',
    },
    size: {
      sm: 'h-8 px-4 py-1.5 text-sm',
      md: 'h-10 px-5 py-2 text-base',
      lg: 'h-12 px-6 py-3 text-lg',
    },
    disabled: {
      true: 'pointer-events-none cursor-not-allowed bg-gray-400 opacity-50',
      false: '',
    },
  },
});

tv로 감싸면 정렬이 된다.

base, variants 내부에 tailwind를 작성해준다.

이 때 disabled를 추가로 넘겨주었다.

radius는 실제로 적용이 될 지 아직 알 수 없어서 우선 따로 작성하지 않았다.

 

// STYLES
  const classes = styles({
    variant,
    size,
    disabled,
  });

정의한 스타일은 Button function 내부에서 한 번더 언급하여 props로 받은 variant, size, disabled를 해당 값으로 넘겨주면 된다.

 

 

3. props 정렬

props 정렬을 하려고 괜찮은 도구가 있는지 찾아봤는데 eslint-plugin-react의 jsx-sort-prop가 있었다.

.eslintrc에 해당 규칙을 작성하여 사용해봤는데, 막상 정렬을 사용해보니 오히려 더 불편해졌다.

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'onClick' | 'children'> {
  className?: string;
  disabled?: boolean;
  icon?: IconMapTypes;
  iconPosition?: 'left' | 'right';
  label?: string;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'primary' | 'outline' | 'ghost';
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

콜백 props를 마지막에 작성하고, 예약어를 가장 먼저 작성하도록 세팅을 해도, 나머지에서 더 상세한 조정이 어려웠다.

그로 인해 디자인 관련 props가 여기저기 섞이면서 오히려 불편해진 것이었다.

 

그래서 이부분은 팀 규칙으로 관리하는 걸로 했다.

1. 디자인 관련이 아닌 props

2. 디자인 관련 props

3. 콜백 props

4. 각 파트는 vscode 자체 sort 사용 (이 부분은 굳이 없어도 될 것 같아서 얘기를 더 해봐야 한다.) 

  // 1. non-styling
  className?: string;
  icon?: IconMapTypes;
  iconPosition?: 'left' | 'right';
  label?: string;
  // 2. styling
  variant?: 'primary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;	// 애매하지만 일단 당장은 스타일링에서만 쓰여서 여기 있다.
  // 3. callback
  onClick?: React.MouseEventHandler<HTMLButtonElement>;

 

 

 

4. 디자인에 따른 좌우 padding 정렬 문제

디자인이 조금씩 나와서 피그마를 틈틈이 확인해보는데, 아이콘과 텍스트 쪽 패딩값이 다른 걸 확인하고 디자이너에게 확인했더니 의도된 거라고 했다.

잘 안보이지만 아이콘쪽이 4px 더 적은 패딩 값을 가진다.

 

아직 디자인 시안에서는 좌측 아이콘만 들어가 있고, 우측 아이콘이 안나올 수도 있지만 고려해서 만들어보기로 했다.

tv 테이블에서 tailwind로 반응형까지 관리하기에는 역할이 분산되는 느낌이어서 바디안에서 동적 클래스 처리를 하기로 했다.

// styles 내부에서는 기본 패딩만 처리
size: {
  sm: 'h-8 px-4 py-1.5 text-sm',
  md: 'h-10 px-5 py-2 text-base',
  lg: 'h-12 px-6 py-3 text-lg',
},

// 함수 바디 내에서 분기로 처리 : icon이 있는 경우, icon 위치에 따라 패딩을 추가로 줌
const buttonLabel = (
  <span
    className={clsx({
      'pr-1': icon && iconPosition === 'left',
      'pl-1': icon && iconPosition === 'right',
    })}
  >
    {label}
  </span>
);

 

 

5. 함수 표현식 vs 함수 선언식

const Button = ...

export default Button;

일관된 코드 스타일을 위해 기존 함수 표현식으로 작성하던 형태를 함수 선언식으로 바꿨다.

 

 

전체 코드

'use client';

import { clsx } from 'clsx';
import React from 'react';
import { tv } from 'tailwind-variants';

import SVGIcon from '../Icons/SVGIcon';
import { IconMapTypes, IconSizeTypes } from '../Icons/icons';

const styles = tv({
  base: 'inline-flex items-center justify-center rounded font-medium whitespace-nowrap transition-all duration-150 outline-none',
  variants: {
    variant: {
      primary: 'cursor-pointer bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700',
      outline:
        'cursor-pointer border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100',
      ghost: 'cursor-pointer bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200',
    },
    size: {
      sm: 'h-8 px-4 py-1.5 text-sm',
      md: 'h-10 px-5 py-2 text-base',
      lg: 'h-12 px-6 py-3 text-lg',
    },
    disabled: {
      true: 'pointer-events-none cursor-not-allowed bg-gray-400 opacity-50',
      false: '',
    },
  },
});

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'onClick' | 'children'> {
  className?: string;
  icon?: IconMapTypes;
  iconPosition?: 'left' | 'right';
  label?: string;
  variant?: 'primary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    className,
    icon,
    iconPosition = 'left',
    label,
    type = 'button',
    variant = 'primary',
    size = 'md',
    disabled = false,
    onClick,
    ...rest
  },
  ref
) {
  // STYLES
  const classes = styles({
    variant,
    size,
    disabled,
  });
  const iconSize: IconSizeTypes = size;

  // RENDERING
  const buttonIcon = icon ? (
    <span
      className={clsx('flex-shrink-0', {
        'mr-2': iconPosition === 'left',
        'ml-2': iconPosition === 'right',
      })}
    >
      <SVGIcon icon={icon} size={iconSize} />
    </span>
  ) : null;
  const buttonLabel = (
    <span
      className={clsx({
        'pr-1': icon && iconPosition === 'left',
        'pl-1': icon && iconPosition === 'right',
      })}
    >
      {label}
    </span>
  );

  let content: React.ReactNode[] = [];

  if (buttonIcon) {
    content = iconPosition === 'left' ? [buttonIcon, buttonLabel] : [buttonLabel, buttonIcon];
  } else {
    content = [buttonLabel];
  }

  return (
    <button
      ref={ref}
      className={clsx(classes, className)}
      disabled={disabled}
      type={type}
      aria-disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {content}
    </button>
  );
});

export default Button;

 

 

---

3. Trouble Shooting

1. SVGIcon

트러블슈팅이라고까지 하기에는 살짝 민망하지만..
이전 코드에는 없던 SVGIcon을 추가했다. 

 

처음에는 단순하게 icon props의 type을 React.ReactElement<IconMap>으로 작성했는데,

스토리북에서 사용해보니까 스토리북에서 SVGIcon을 import하고, 버튼 컴포넌트에 <SVGIcon icon={'IC_..'}/> 하면서

사용하는 게 복잡하게 느껴졌다.

또한 icon의 사이즈는 버튼의 사이즈와 동일해야하는데 이렇게 사용하면  분리되는 것도 걸렸다.

 

어차피 SVGIcon만 사용할 거라면 차라리 Button 컴포넌트에서 SVGIcon을 import하고 직접 사용하도록 하고,

icon props로는 해당하는 icon의 type만 넘기는 게 좋지 않을까하는 생각이 들었다.

 

Button 컴포넌트에서 SVGIcon, IconMapTypes, IconSizeTypes를 호출했다.

import SVGIcon from '../Icons/SVGIcon';
import { IconMapTypes, IconSizeTypes } from '../Icons/icons';

 

icon의 props를 IconMapTypes로 정의하면, 컴포넌트를 사용할 때 icon으로 넘길 수 있는 값들을 쉽게 확인할 수 있다.

icon?: IconMapTypes;

 

Button 함수 바디 내에서 iconSize를 정의했다.

Button의 props로 받은 size를 iconSize에 그대로 적용한다.

  const iconSize: IconSizeTypes = size;

 

Button 내부에서 SVGIcon을 이렇게 사용하면 외부에서는 icon을 넣고 싶을 때 단순 string 형의 아이콘 타입값만 전달하면 된다.

<SVGIcon icon={icon} size={iconSize} />

 

 

2. tailwind-variant, tailwind-merge

처음 prettier-plugin-tailwindcss를 적용했는데 tailwind 정렬이 안되는 거다.

또 뭔가 세팅이 덜 됐나 꽤 한참 헤멨는데 알고보니 이 플러그인은 변수에 할당한 tailwind는 정렬을 못해준다는 것이었다.

 

clsx로 감싸거나 tv를 설치해서 그걸로 감싸야 한다는데 그러면 너무 코드가 지저분해질 것 같아서 차라리

tv를 설치하되, 스타일 관련 코드를 아예 따로 빼기로 했다.

 

 

그렇게 정렬을 무사히 하고 나니까 이어서 발생하는 에러..

Error message에 보면 tailwind-merge를 resolve 할 수 없다고 나온다.

 

tailwind-variants에서 원래 tailwind-merge를 포함해서 지원했는데, 업데이트 하면서 포함시키지 않게 되었다는 거다.

원래는 무조건 tailwind-merge를 돌렸는데, 업데이트 이후는 선택이 가능해졌다는 말.

 

하지만 스토리북은  번들링 시점에서 모든 import를 정적으로 분석하여, tailwind-variants 내부에서 tailwind-merge를 선택적으로 import 하더라도 이 모듈이 필수라고 가정하고 시도한다는 거다.

 

결론은 tailwind-merge도 설치해주어야 한다는 말이다.

---

4. 마무리

사실 이렇게 꼼꼼하게 찾아가면서 만들어봤지만, 아직도 걸리는 부분은 여전히 많다.

• children을 받지 않아도 괜찮은가
• icon에 대한 로직을 저렇게 if 분기문으로 살짝 복잡하게 남겨도 괜찮은가
• 스타일링을 정의하는 방법은 저게 최선일 까
• 추후에 Icon 자리에 SVG 아이콘이 아닌 다른 형태가 들어가도록 변경되는 경우도 생길까
• ...

하지만 일단 현재로써는 이대로 마무리 짓기로 했다.

적어도 지금까지 나온 기획/디자인 내에서는 충분히 구조를 잡은 것 같고, 다른 컴포넌트들도 서둘러서 진행해야하기 때문이다.

다른 프론트 친구가 당시 일이 있어서 기본 컴포넌트를 대부분 내가 만들어서 내가 마무리를 지어야 한다..

 

Button 컴포넌트를 참고하여 다른 컴포넌트들도 더 탄탄하게 수정할 생각이다.

 

 

 

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement

HTMLButtonElement - Web APIs | MDN

https://velog.io/@dongkyun/TS-HTMLElement%EC%9D%98-type-%EC%83%81%EC%86%8D%EB%B0%9B%EA%B8%B0

[TS] HTMLElement의 type 상속받기

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

https://www.tailwind-variants.org/docs/introduction#automatic-conflict-resolution

Introduction – Tailwind Variants

https://velog.io/@clydehan/JavaScript-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D-vs-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%A0%84%EB%9E%B5

JavaScript 함수 선언식 vs 함수 표현식: 차이점과 성능 최적화 전략