💡

Popover

Created

2026/01/22 09:55

Context

버튼을 누르거나 데이터를 입력할 때 보조 정보를 보여주고 싶을 때가 있다. 이 때 Popover 컴포넌트를 사용하여 보조 정보를 표시하는데, shadcn/ui의 Popover를 사용해보기 위해 이 글을 작성한다.

Agenda

•

shadcn/ui의 Popover 컴포넌트를 분석하고 이해하는 것을 목표로 함

버튼을 눌렀을 때나 데이터를 입력할 때 보조 정보를 화면에 표시하고 싶을 때가 있다. Overlay를 동반하여 화면 전체를 둘러싸는 것이 아닌 가벼운 레이어로 보여주는 것 말이다. shadcn/ui는 이런 상황을 위해 Popover 컴포넌트를 제공한다.

Popover

const Popover = ({
	...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) => {
	return <PopoverPrimitive.Root data-slot='popover' {...props} />;
};
TypeScript
복사

Popover 컴포넌트이다. radix-ui의 Popover - Root 컴포넌트를 감싸는 Wrapper 형태로 만들어졌다.

PopoverTrigger

const PopoverTrigger = ({
	...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) => {
	return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
};
TypeScript
복사

PopoverTrigger 컴포넌트는 Popover의 열림 / 닫힘 상태를 토글하는 컴포넌트이다.

PopoverContent

const PopoverContent = ({
	className,
	align = 'center',
	sideOffset = 4,
	...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) => {
	return (
		<PopoverPrimitive.Portal>
			<PopoverPrimitive.Content
				data-slot='popover-content'
				align={align}
				sideOffset={sideOffset}
				className={cn(
					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
					className,
				)}
				{...props}
			/>
		</PopoverPrimitive.Portal>
	);
};
TypeScript
복사

Popover의 컨텐츠가 표시 되는 컴포넌트이다. align은 center, start, end 값 중 하나를 부여할 수 있다. className에 들어있는 스타일링 값은 매우 긴데, 거의 애니메이션과 관련 된 값들이다.

PopoverAnchor

const PopoverAnchor = ({
	...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) => {
	return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
};
TypeScript
복사

pnpm dlx shadcn@latest add popover를 통해 popover를 추가했을 때 같이 생성 되는 컴포넌트이다. 어느 기능을 하는 컴포넌트인지 궁금하여 공식 사이트에서 레퍼런스를 찾아보려고 했는데 나오질 않는다.

느낌상 Trigger를 선택하면 Trigger 기준으로 Popover가 표시되는데 Anchor를 사용하면 그 Anchor를 기준으로 나오는 것 같아 실험을 해보았다.

<Popover>
	<PopoverTrigger asChild>
		<Button>Trigger</Button>
	</PopoverTrigger>

	<PopoverAnchor>
		<div className='relative border-4'>
			<span>Anchor</span>
		</div>
	</PopoverAnchor>

	<PopoverContent align='start'>Description</PopoverContent>
</Popover>
TypeScript
복사

Trigger를 클릭하면 Anchor가 없었을 때 Trigger 바로 아래에 Popover가 나오지만, Anchor를 생성하면 그 Anchor를 기준으로 Popover가 표시되는 것을 알 수 있었다.

Popover

Context

Agenda

Contents