💡

Collapsible

Context

shadcn/ui에서는 어느 아이템을 접었다 폈다 하는 기능을 만들 때 Collapsible 컴포넌트를 사용한다. 이를 분석하고 그 내용을 이해하기 위해 이 글을 작성하였다.

Agenda

•

Collapsible 컴포넌트 내용을 분석하고 이해하는 것을 목표로 함

shadcn/ui의 Sidebar 컴포넌트에서는 Group의 Sub Item을 접었다 폈다 할 수 있는 기능을 제공한다. 이 기능은 Collapsible이라는 컴포넌트와 그 하위 컴포넌트를 조합하여 구현된다.

function Collapsible({
	...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
	return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
}
TypeScript
복사

Collapsible 컴포넌트이다. radix-ui의 Collapsible.Root을 감싸는 형식으로 구현이 되어있다. 기능적으로는 컨텐츠의 펼쳐짐과 접히는 상태를 관리하고 하위 Trigger와 Content의 컨텍스트를 제공한다.

function CollapsibleTrigger({
	...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
	return (
		<CollapsiblePrimitive.CollapsibleTrigger
			data-slot='collapsible-trigger'
			{...props}
		/>
	);
}
TypeScript
복사

CollapsibleTrigger 또한 radix-ui의 Collapsible Trigger를 감싸는 wrapper 컴포넌트이다. 기능적으로는 Collapsible Root의 펼침 접힘 상태를 토글하는 버튼이다.

function CollapsibleContent({
	...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
	return (
		<CollapsiblePrimitive.CollapsibleContent
			data-slot='collapsible-content'
			{...props}
		/>
	);
}
TypeScript
복사

CollapsibleContent는 radix-ui의 Collapsible Content를 감싸는 wrapper 컴포넌트이다. 앞의 Collapsible 컴포넌트와 CollapsibleTrigger 컴포넌트와 차이점 없이 모두 radix-ui의 컴포넌트를 감싸는 wrapper 형태이다.

배치 형태는 다음과 같다.

Collapsible (Root)
 ├── CollapsibleTrigger (열고 닫는 버튼)
 └── CollapsibleContent (펼쳐질 내용)
Plain Text
복사

<Collapsible>
  <CollapsibleTrigger>
    열기 / 닫기
  </CollapsibleTrigger>
  <CollapsibleContent>
    내용
  </CollapsibleContent>
</Collapsible>
JavaScript
복사

Collapsible이 최상단에서 CollapsibleTrigger와 CollapsibleContent를 감싼다. CollapsibleTrigger와 CollapsibleContent는 형제 depth에 위치한다. 그리고 위에 설명한것 처럼 CollapsibleTrigger를 통해 CollapsibleContent를 펼치거나 접을 수 있다.

Collapsible

Context

Agenda

Contents