Logic-less Presentational UI 분리를 통한 무결성 확보 및 shadcn 방식의 배포 파이프라인 구축

DRY is not for UI

Oleksandr Kostrov2026년 6월 17일6분intermediate

AI 요약

Context

다양한 페이지에서 공통 UI 컴포넌트를 재사용함에 따라 비즈니스 로직과 조건부 렌더링 플래그가 혼재된 상황. 이로 인해 특정 페이지의 수정이 무관한 다른 페이지의 UI 및 테스트를 파괴하는 Side-effect 발생 및 유지보수 효율성 저하.

Technical Solution

Logic-less Presentational Component 원칙 수립을 통한 UI 라이브러리와 Use-case 레이어의 엄격한 분리
Base UI 및 Tailwind v4, CVA 기반의 순수 프레젠테이션 레이어 설계로 컴포넌트 책임 단일화
shadcn CLI의 Registry-item Schema 프로토콜을 차용한 JSON 기반 배포 아키텍처 구현
TSX 소스코드를 JSON 문자열로 임베딩하여 런타임 오버헤드 없는 Zero-runtime 배포 체계 구축
Managed Artifact 방식의 --overwrite 옵션 도입을 통한 Single Source of Truth 유지 및 동기화 구조 설계
Layout-only 재사용 전략을 통해 페이지별 독립적인 로직 주입 및 상호 간섭 원천 차단

실천 포인트

- 재사용 컴포넌트 내부에 조건부 분기 로직(if/else)이나 상태 관리 코드가 포함되어 있는지 검토 - UI 라이브러리와 이를 사용하는 Page/Modal 단위를 'Pure Component'와 'Use-case'로 명확히 구분 - 공통 레이아웃은 코드 복사-붙여넣기 후 개별 최적화하는 'Copy-and-Own' 전략 고려 - 디자인 시스템 배포 시 JSON 매니페스트 기반의 정적 배포 파이프라인 검토

태그

#Design System #Zero-runtime #Presentational Component #shadcn #Single Responsibility

원문 읽기