[Tailwind CSS] asChild 속성

asChild 속성

들어가며

• @asChild@ 속성에 대해 정리해본다.

 

asChild 속성

개념

• Radix UI와 같은 라이브러리에서 사용되는 속성
• 컴포넌트가 래핑(Wrapping)된 자식 컴포넌트의 스타일이나 기능을 그대로 유지하면서 특정 기능을 제공하기 위해 사용된다.

 

의미

• 자식 요소를 그대로 사용한다.
• 래핑된 컴포넌트가 새로운 DOM 노드를 생성하지 않고, 해당 자식 요소의 DOM을 그대로 사용하여 기능만 추가한다.
• 불필요한 DOM 노드가 추가되지 않아 HTML 구조를 깔끔하게 유지하고, 스타일이 깨지지 않도록 보장한다.

 

사용 예

<DropdownMenuTrigger asChild>
  <Button>Menu</Button>
</DropdownMenuTrigger>

 

⇒ @<Button>@은 @<DropdownMenuTrigger>@의 자식이지만, @<DropdownMenuTrigger>@가 새로운 DOM 노드를 만들지 않는다.

⇒ 대신 @<Button>@ 자체가 @DropdownMenuTrigger@로 작동하게 된다.

 

사용하면 좋은 경우

• 추가하는 래핑 노드가 없기 때문에 스타일이 변경되지(깨지지) 않는다.
• 기존 버튼이나 다른 컴포넌트에 메뉴 트리거 기능을 쉽게 추가할 수 있다.

 

@asChild@를 사용하면, 불필요한 DOM 생성 없이 자식 요소의 스타일과 구조를 그대로 유지하면서 추가적인 기능을 적용할 수 있다.

 

참고 사이트

asChild in React, Svelte, Vue, and Solid for render delegation

Composition – Radix Primitives