Component Terms

이 문서가 답하는 질문: Panda recipe·CVA·Radix slot·asChild 같은 컴포넌트 어휘가 정확히 무엇을 가리키는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “토큰을 조합한 규칙을 어떻게 표현·구성하는가” 의 어휘 — variant·recipe·slot·polymorphism이 핵심 5개.

카테고리 개요

키워드	한 줄 정의
Variant	같은 컴포넌트의 분기 형태 (size, intent 등)
Recipe	variant + base + compound를 한 함수로 묶은 것
Slot	한 컴포넌트의 여러 영역을 따로 스타일링
Polymorphism	같은 동작을 다른 HTML 태그로
Headless	동작만, 시각 없는 컴포넌트

본문 (알파벳 순)

Anatomy (해부도)

카테고리: Component 별칭: component anatomy

한 컴포넌트의 내부 구조. Dialog = Trigger + Overlay + Content + Title + Close. Radix·Reach UI 문서가 즐겨 쓴다.

asChild prop

카테고리: Component 별칭: Slot pattern (Radix), as prop

Radix UI가 대중화한 prop. <Button asChild><a href="...">...</a></Button> — 자기 자신을 자식의 태그로 치환. 폴리모피즘의 안전한 표현.

관련: Polymorphism, Slot 참고: 05-composition

Boolean Variant

카테고리: Component 별칭: bool variant, flag prop

true/false 두 값만 가지는 variant. disabled, fullWidth, loading. CVA·Panda recipe 모두 1급 지원.

Compound Component (복합 컴포넌트)

카테고리: Component 별칭: dot notation component

<Tabs><Tabs.List><Tabs.Trigger /></Tabs.List></Tabs> 처럼 namespace로 묶인 여러 컴포넌트. React Context로 부모-자식 통신.

관련: Anatomy, Slot 참고: 05-composition

Compound Variant

카테고리: Component 별칭: compoundVariants (Panda/CVA)

여러 variant 조합에만 적용되는 추가 스타일. 예: size: lg + intent: danger일 때만 border가 두꺼움. recipe·CVA·tv 모두 지원.

관련: Variant, Recipe, CVA 참고: 04-recipes-variants

Context Provider Pattern

카테고리: Component 별칭: provider component

<TabsContext.Provider>로 컴포넌트 트리 안에서 상태를 공유. compound component의 표준 구현.

Controlled vs Uncontrolled

카테고리: Component 별칭: controlled / uncontrolled component

상태를 부모가 들고 있는가(controlled), 컴포넌트 안에 있는가(uncontrolled) 의 분기. React form 패턴. 좋은 시스템은 둘 다 지원한다.

CVA (class-variance-authority)

카테고리: Component 별칭: cva by Joe Bell

variant + base + compound를 한 함수로 표현하는 작은 라이브러리. shadcn/ui의 표준. cva("base", { variants: {...}, compoundVariants: [...] }).

data attribute

카테고리: Component 별칭: data-state, data-side

data-state="open" 같은 DOM 속성으로 상태를 표현하는 패턴. Radix가 표준화. CSS 선택자(&[data-state="open"])로 스타일링.

defaultVariants

카테고리: Component 별칭: default props for variants

variant에 기본값을 지정. defaultVariants: { size: "md" }. 사용자가 명시하지 않으면 자동 적용.

forwardRef

카테고리: Component 별칭: React forwardRef

자식 DOM 노드의 ref를 부모로 전달. 디자인 시스템 컴포넌트는 거의 모두 ref-forwarding을 한다 — 폼·툴팁·focus 관리의 전제.

Headless Component

카테고리: Component 별칭: unstyled component, behavior-only

동작·접근성만 제공하고 시각은 없는 컴포넌트. Radix Primitives, Headless UI, React Aria가 대표. 그 위에 토큰을 입혀 디자인 시스템을 만든다.

관련: Primitive, Render Prop 참고: 05-composition

Polymorphism (폴리모피즘)

카테고리: Component 별칭: polymorphic component, as prop

같은 컴포넌트를 다른 태그로 렌더링. <Text as="h1">. TypeScript 타입을 정확히 좁히는 것이 핵심 난제.

관련: asChild prop, forwardRef 참고: 05-composition

Recipe

카테고리: Component 별칭: Panda recipe, style recipe

Panda CSS의 핵심 추상. variant + base + compoundVariants + defaultVariants를 한 객체로 표현하고 빌드 타임에 CSS로 펼친다.

관련: Slot Recipe, SVA, CVA 참고: 04-recipes-variants

Render Prop

카테고리: Component 별칭: function-as-children

자식이 함수인 패턴 — <Toggle>{({state}) => ...}</Toggle>. headless 컴포넌트의 고전적 API. 최근에는 compound component + Context로 대체되는 추세.

Responsive Variant

카테고리: Component 별칭: responsive prop

variant를 breakpoint 객체로 받는 API — <Button size={{ base: "sm", md: "lg" }}>. Panda·Chakra·Stitches가 1급 지원.

Slot

카테고리: Component 별칭: named slot, recipe slot

한 컴포넌트의 내부 영역들에 이름을 붙인 것. Card = root + header + body + footer. 각 slot에 따로 variant 적용 가능.

관련: Slot Recipe, Anatomy 참고: 04-recipes-variants

Slot Recipe

카테고리: Component 별칭: multi-slot recipe (Panda), SVA

여러 slot에 동시에 variant를 적용하는 recipe. Panda의 defineSlotRecipe, Chakra의 defineMultiStyleConfig가 같은 개념.

관련: Slot, Recipe, SVA 참고: 04-recipes-variants

State Variant

카테고리: Component 별칭: stateful variant

hover·focus·disabled 같은 상호작용 상태에 따른 variant. 보통 data attribute로 표현(data-state="open").

SVA (slot-variants-api)

카테고리: Component 별칭: Panda slot recipe, multi-slot variants

multi-slot용 CVA의 후계. Panda의 defineSlotRecipe가 대표 구현. 각 slot마다 base·variants 정의.

관련: Slot Recipe, CVA 참고: 04-recipes-variants

TV (tailwind-variants)

카테고리: Component 별칭: tv, tailwind-variants by Junior Garcia

Tailwind 전용 CVA. slot·responsive·compound variants를 Tailwind className 문자열로 받는다. NextUI의 표준.

Variant

카테고리: Component 별칭: style variant, prop variant

같은 컴포넌트의 형태 분기. <Button intent="primary" size="lg">. variant 값마다 CSS 묶음이 매핑된다.

VariantProps (type)

카테고리: Component 별칭: VariantProps<typeof recipe>

recipe·CVA 함수로부터 variant prop 타입을 추출하는 유틸 타입. TypeScript contract의 핵심.

요약 + Mermaid

이 카테고리는 값(토큰)을 조합한 규칙의 표현 어휘다. Recipe = base + variants + compound + default가 핵심 구조이며, slot으로 영역을 나누고 polymorphism으로 태그를 자유화한다.

Typography & Spacing Terms Theming Terms