다중 props 상태로 styled-components 스타일링 하기

styled-components는 컴포넌트 간의 분리와 재사용성을 높여주며, 스타일의 일관성을 유지하는 데 도움이 됩니다.
부모 컴포넌트에서 상속받은 props의 상태가 여러 상황일 때, 효율적인 사용방법을 알아보겠습니다.
물론 저는 Next.js와 Typescript 사용을 기본으로 합니다.
 

styled-components

1. 재사용할 Button 컴포넌트 만들기

import Link from 'next/link';
import styled from 'styled-components';

const Button = ({ size, href, children }: ButtonStyledType)) => {
  const { size, href, children } = props;
  return (
    <LinkStyled href={href} size={size}>
      {children}
    </LinkStyled>
  );
};

export default Button;

interface ButtonStyledType {
  size: string;
  href: string;
  children: React.ReactNode;
}

const LinkStyled = styled(Link)<ButtonStyledType>`
  padding: 4px 8px;
  border-radius: 4px;
  font-size: ${(props) => {
    switch (props.size) {
      case 'small':
        return '12px';
      case 'medium':
        return '14px';
      case 'large':
        return '16px';
      default:
        return '12px'; 
  	}
}};

위의 코드는 Button 컴포넌트와 LinkStyled 스타일드 컴포넌트를 사용하여 버튼을 만드는 예제입니다.
먼저, Button 컴포넌트는 아래에 작성할 부모 컴포넌트의 Button사용에서 size, href, children props를 받아옵니다. size는 버튼의 크기를 지정하고, href는 버튼이 클릭될 때 이동할 링크를 나타냅니다. children은 버튼 안에 표시될 내용을 의미합니다.
LinkStyled는 styled-components의 styled 함수를 사용하여 Link 컴포넌트에 스타일을 적용한 것입니다. LinkStyled 컴포넌트는 ButtonStyledType라는 인터페이스를 사용하여 size와 href props를 받아옵니다.
LinkStyled 컴포넌트에서는 padding, border-radius, font-size 등의 스타일 속성을 설정합니다. 여기서 font-size 속성은 props.size 값을 switch 문을 사용하여 확인하고, 각각의 경우에 따라 적절한 폰트 크기를 반환합니다. 설명하자면, size 값이 "small"인 경우에는 폰트 크기를 12px로 설정하고, "medium"인 경우에는 14px로 설정하며, "large"인 경우에는 16px로 설정합니다. 기본적으로는 12px로 설정되어 있습니다. 이렇게 함으로써 버튼의 크기에 따라 동적으로 폰트 크기가 조정됩니다.
이 부분이 핵심입니다. 실무에서 사용할 때 정말 유용합니다.
이렇게 구현된 코드는 Button 컴포넌트와 LinkStyled 스타일드 컴포넌트를 조합하여 버튼을 생성하고, 버튼의 크기에 따라 폰트 크기를 동적으로 조정할 수 있습니다. 이를 통해 재사용 가능한 컴포넌트를 만들고, 다양한 스타일과 크기의 버튼을 생성할 수 있습니다.

2. 부모 컴포넌트에서 사용하기

import Button from '../ui/button';

const Page = () => {
  return (
    <div>
      <Button href={"/home"} size="small" color="primary">
        Explore Link
      </Button>
    </div>
  );
};

export default Page;

이렇게 구현된 코드를 사용하면 다양한 크기의 버튼을 생성할 수 있으며, 각각의 버튼은 자체적으로 크기에 맞는 폰트 크기를 가집니다. 이는 코드의 재사용성과 유지보수성을 높여줍니다. 즉, 스타일드 컴포넌트를 사용하여 다양한 props 값을 받아와 동적으로 스타일을 적용하는 버튼을 생성할 수 있습니다.
 
Page 컴포넌트에서는 Button 컴포넌트를 사용하여 버튼을 렌더링 합니다. Button 컴포넌트에는 href, size, color props를 전달하여 각각 링크, 크기, 색상을 설정합니다. 예를 들어, size props에 "small"을 전달하면 작은 크기의 버튼이 생성되고, color props에 "primary"을 전달하면 버튼의 색상이 주요 색으로 설정됩니다.
 
이와 같은 방식으로 styled-components를 활용하면 UI 컴포넌트의 스타일링을 보다 쉽고 유연하게 처리할 수 있습니다. 또한, 컴포넌트 간의 상속과 재사용을 통해 일관된 디자인 시스템을 구축할 수 있습니다. 이는 개발 생산성과 유지보수성을 향상하는데 도움이 됩니다. 토이프로젝트 같은 걸 진행하면서 각자의 UI 라이브러리를 구축해 볼 수 있습니다. 누가 아나요? Ant Design을 능가하는 라이브러리를 만들어낼지요.