TypeScript Discriminated Union을 활용한 안전하고 확장 가능한 디자인 시스템 컴포넌트 설계

핵심 기술

이 콘텐츠는 TypeScript의 Discriminated Union 패턴을 활용하여 버튼 컴포넌트의 다양한 스타일과 variant를 타입 안정적으로 관리하고, 개방-폐쇄 원칙을 준수하는 확장 가능한 설계 방식을 제시합니다.

기술적 세부사항

• 문제 정의: 단일 Button 컴포넌트로 여러 스타일(Solid, Outlined, Text)과 variant(primary, secondary 등)를 처리할 때 발생하는 타입 구분 불가, 디자인 규칙 위반 가능성, 코드 복잡성, 확장성 부족 문제를 진단합니다.
• 해결 방안: Discriminated Union 패턴을 도입하여 frame과 같은 고유한 discriminator 속성을 사용하여 타입을 명확히 구분합니다.
  • 각 버튼 스타일에 맞는 고유한 props 타입을 정의합니다 (SolidButtonProps, OutlinedButtonProps, TextButtonProps).
  • 이 타입들을 Union Type으로 결합하여 ButtonProps를 생성합니다.
• Type Narrowing: if 조건문과 frame discriminator를 활용하여 TypeScript 컴파일러가 자동으로 타입을 좁혀나가도록 하여 컴파일 타임에 오류를 방지합니다. (예: text 버튼에 secondary variant 사용 불가)
• 개방-폐쇄 원칙 (Open-Closed Principle):
  • 기존 방식의 문제점: 모든 로직이 단일 컴포넌트에 집중되어 새로운 버튼 타입 추가 시 기존 코드를 수정해야 하는 문제점을 지적합니다.
  • 새로운 방식의 장점: 각 버튼 타입을 독립적인 컴포넌트로 분리하여 새로운 타입을 추가할 때 기존 코드를 건드리지 않고 확장 가능함을 보여줍니다. 이는 Git merge conflict를 줄이고, 개별 컴포넌트의 유지보수성과 테스트 용이성을 높입니다.
• 구현 예시: 실제 파일 구조와 각 컴포넌트의 TypeScript 타입 정의, 메인 Button 컴포넌트에서의 Type Guard 패턴 적용 코드를 구체적으로 제시합니다.
• 확장 시나리오: ghost 버튼 추가 예시를 통해 새로운 버튼 타입이 추가될 때의 간결하고 안전한 확장 과정을 설명합니다.

개발 임팩트

• 타입 안전성 향상: 개발자가 의도치 않은 prop 조합을 컴파일 타임에 방지하여 런타임 오류를 줄입니다.
• 코드 유지보수성 증대: 각 컴포넌트가 독립적으로 분리되어 있어 수정 시 영향 범위가 명확하고, 팀 협업 시 충돌 가능성이 낮습니다.
• 개발 생산성 향상: 명확한 타입 정의와 분리된 구조는 개발자가 컴포넌트를 더 빠르고 안전하게 사용할 수 있도록 돕습니다.
• 디자인 시스템의 일관성 유지: 디자이너의 의도대로만 버튼을 사용할 수 있도록 강제하여 디자인 시스템의 근본적인 목적을 달성합니다.

커뮤니티 반응

(콘텐츠 내에서 직접적으로 언급되지는 않았으나, Discriminated Union 패턴은 TypeScript 커뮤니티에서 코드의 명확성과 안정성을 높이는 모범 사례로 널리 인정받고 있습니다.)