🧩 React 컴포넌트를 스타일드 컴포넌트로 구성해보기

오늘은 실제 styled-components를 활용해
Button, Title, InputText 컴포넌트를 구현한 예제를 통해

어떻게 타입과 테마를 활용해서 유지보수하기 좋은 UI 컴포넌트를 구성할 수 있는지 정리했다.

---

🎯 목표

• UI 컴포넌트를 타입 안전하게 구성하기
• theme과 styled-components를 활용해 일관된 스타일 적용
• 재사용 가능한 컴포넌트 만들기

---

🖲️ Button 컴포넌트

interface Props {
  children: React.ReactNode;
  size: ButtonSize;
  scheme: ButtonScheme;
  disabled?: boolean;
  isLoading?: boolean;
}

주요 포인트

• 버튼의 스타일 스킴(scheme) 과 크기(size) 를 props로 전달받는다.
• disabled나 isLoading이 적용되면 클릭을 막고 스타일도 조절됨.
• theme.button[size].fontSize, theme.buttonScheme[scheme] 등 테마를 통해 동적으로 스타일을 가져온다.

const ButtonStyle = styled.button<Omit<Props, "children">>`
  font-size: ${({ theme, size }) => theme.button[size].fontSize};
  padding: ${({ theme, size }) => theme.button[size].padding};
  ...
`

이렇게 하면 테마 설정만 바꿔도 전체 프로젝트 버튼 스타일을 바꿀 수 있어서 유지보수에 매우 유리하다.

---

📝 Title 컴포넌트

interface Props {
  children: React.ReactNode;
  size: "large" | "medium" | "small";
  color?: ColorKey;
}

주요 포인트

• 제목 컴포넌트도 theme을 통해 폰트 크기와 색상을 받아온다.
• color가 전달되지 않으면 기본 색상(primary)을 사용한다.

const TitleStyle = styled.h1<Omit<Props, 'children'>>`
  font-size: ${({ theme, size }) => theme.heading[size].fontSize};
  color: ${({ theme, color }) => color ? theme.color[color] : theme.color.primary};
`;

이처럼 선택적으로 스타일 속성을 제어할 수 있게 하면 다양한 상황에서 재사용성이 높아진다.

---

🔤 InputText 컴포넌트

interface Props {
  placeholder?: string;
}

주요 포인트

• forwardRef를 통해 외부에서 input에 직접 접근할 수 있도록 구성됨.
• styled.input.attrs로 input 타입을 고정시키면서도 스타일은 theme 기반으로 처리.

const InputTextStyled = styled.input.attrs({ type: "text" })`
  padding: 0.25rem 0.75rem;
  border: 1px solid ${({ theme }) => theme.color.border};
  ...
`;

이 패턴은 폼 요소를 만들 때 자주 쓰이는 형태다. 특히 forwardRef는 유효성 검사나 포커스 제어 등에서 유용하다.

---

💡 전체적으로 느낀 점

이러한 구성은 "디자인 시스템"을 만들기 위한 기본 기반을 잘 잡아주는 패턴이다.
특히 다음과 같은 장점이 있다:

• 테마 기반으로 스타일을 통합 관리
• 컴포넌트가 캡슐화되어 추적과 재사용이 쉬움
• props를 통해 다양한 UI 변형을 쉽게 제공

---

🔨 TIL

• styled-components와 TypeScript의 조합은 강력하다. 타입 기반의 스타일 구성으로 재사용성과 안정성을 높일 수 있다.
• theme을 적극적으로 활용하면 스타일 변경이 간편하다.
• Omit<Props, "children">와 같이 타입을 유연하게 활용하면 styled-components에 정확한 타입을 전달할 수 있다.
• forwardRef는 폼 구성 시 꼭 익혀야 할 패턴이다.