[Refactor] 재사용 가능한 버튼 컴포넌트 만들기(styled components)

* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다.

메인프로젝트 소개와 회고 보기

 

왜 버튼 컴포넌트를 만들어야 했나?

기존에 우리 프로젝트에서는 모든 버튼을 필요할 때마다 각자 만들어서 사용했다. 비슷한 모양의 버튼들인데도 색깔과 크기가 다르다는 이유로 매번 만들어서 사용하다 보니 중복된 코드가 많았고, 하나로 통일하면 재사용성을 높일 수 있겠다고 생각했다. 리팩토링을 하면서 일반적인 버튼, 즉 이미지로 이뤄진 독특한 버튼을 제외한 평범한 네모 모양의 버튼들은 재사용 가능한 컴포넌트로 만들고 prop을 내려줘서 각각의 필요에 따라 사용할 수 있도록 만들자고 결정했다.

 

어떤 컴포넌트를 만들려고 했나?

버튼을 만들면서 고려했던 점은 다음과 같다.

• 버튼 컴포넌트 자체가 크기를 가지고 있기보다는 부모 요소의 크기에 맞춰지도록 한다.
• 마찬가지로 미디어 쿼리를 줄 때도 버튼 컴포넌트 자체에 미디어 쿼리를 부여하는 것이 아니라 부모 요소가 변할 때 함께 변하게 한다.
• 버튼에 몇 가지 variant를 정해서 그에 따라 색상과 호버 색상이 달라지도록 한다.

 

결과물

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

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  onClick?: () => void;
  children?: React.ReactNode;
  variant?: 'default' | 'primary' | 'solid' | 'warn';
};

export default function Button({
  onClick,
  children,
  variant = 'default',
}: ButtonProps) {
  return (
    <S_Button onClick={onClick} variant={variant}>
      {children}
    </S_Button>
  );
}

const VARIANT = {
  default: css`
    color: var(--color-white-80);
    background-color: #d9d9d933;
    border: 1px solid var(--color-white-80);
    backdrop-filter: blur(3px);
    &:hover {
      background-color: var(--color-white-60);
      border: 1px solid white;
      color: white;
    }
  `,
  primary: css`
    color: var(--color-white-80);
    background-color: #ffff0033;
    border: 1px solid var(--color-white-60);
    backdrop-filter: blur(3px);
    &:hover {
      background-color: #ffff0060;
      border: 1px solid white;
      color: white;
    }
  `,
  solid: css`
    color: white;
    border: 1px solid #fff;
    background-color: var(--color-bg-100);
    &:hover {
      background-color: var(--color-bg-100);
    }
  `,
  warn: css`
    color: var(--color-white-80);
    background-color: #d9d9d933;
    backdrop-filter: blur(3px);
    &:hover {
      border: 1px solid rgba(255, 0, 0, 0.7);
      background-color: #ff00004d;
      color: white;
    }
  `,
};

const S_Button = styled.button<ButtonProps>`
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  min-width: max-content;
  transition: all 0.3s ease;
  ${(props) => props.variant && VARIANT[props.variant]}
`;

 

만들어보니 어땠나?

코드량 자체가 줄어드는 효과는 크지 않았다.

버튼에 들어 있던 css(특히 크기와 관련된 것들)가 부모 요소로 옮겨 가게 된 경우가 많아서 코드량 자체가 크게 줄지는 않았다. 버튼 컴포넌트 자체가 크기를 가지지 않고 부모 요소에 맞춰서 크기가 조절되도록 컴포넌트를 만들었는데, 원래는 이 점을 고려해서 부모 요소들이 설계되지 않았기 때문에 부모 요소가 너비나 높이를 가지고 있지 않은 경우도 있었다. 버튼 컴포넌트에서 크기 설정을 제거하는 대신 그 코드들이 그대로 부모 요소로 가게 되거나, 새로운 div 요소를 만들어서 버튼 컴포넌트를 넣어줘야 하는 경우도 있어서 기대했던 것만큼 코드량이 줄지는 않았다.

 

중복된 코드는 줄일 수 있었다.

기존에는 똑같은 버튼을 거의 복제하다시피 해서 사용했기 때문에 중복된 코드가 많았는데, 이제 적어도 버튼 부분에 있어서는 중복된 코드는 많이 줄어들게 됐다. 버튼을 훨씬 더 많이 사용하게 되면 중복된 코드를 줄이면서 누릴 수 있는 코드량 감소 효과도 클 거라고 기대된다.

 

기대만큼 코드량이 극적으로 효과는 없었지만 재사용 가능한 버튼 컴포넌트를 어떻게 만들 수 있는지 고민하고 실제로 만들어 보는 과정이 유익했다.