Composition

Composition

Chakra UI에서 컴포넌트를 구성하는 방법을 다루는 개념 문서예요. as prop과 asChild prop을 중심으로 살펴봐요.

출처: 문서

본문

as Prop

React 컴포넌트가 렌더링하는 기본 HTML 요소를 변경하는 데 사용돼요. 컴포넌트의 기능은 유지하면서 기본 요소를 변경하는 직관적인 방법을 제공해요.

<Heading as="h3">Hello, world!</Heading>

:::warning

TypeScript: as prop의 주의점은, as prop에 전달된 컴포넌트의 타입이 컴포넌트의 props와 호환되어야 한다는 거예요. 우리는 as prop에서 기본 컴포넌트의 props를 추론하지 않아요.

:::

asChild Prop

컴포넌트의 기능을 그 자식 요소에 구성하는 데 사용돼요. Radix UI에서 영감을 받은 이 접근 방식은 최대한의 유연성을 제공해요.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button>Open</Button>
  </Popover.Trigger>
</Popover.Root>

이 예시에서 asChild prop은 Button을 popover의 트리거로 사용할 수 있게 해 줘요.

모범 사례 (Best Practices)

as와 asChild prop을 사용할 때 흔한 함정을 피하기 위해 고려해야 할 몇 가지 모범 사례가 있어요:

• Forward Refs: 기본 컴포넌트가 전달된 ref를 올바르게 전달하도록 해 주세요.
• Spread Props: 기본 컴포넌트가 전달된 props를 펼쳐서(spread) 전달하도록 해 주세요.

const MyComponent = React.forwardRef((props, ref) => {
  return <Box ref={ref} {...props} />
})

// with `as` prop
<MyComponent as="button" />

// with `asChild` prop
<Button asChild>
  <MyComponent> Click me </MyComponent>
</Button>

더 알아보기 (Learn more)

Chakra UI에서 컴포넌트를 구성하는 더 자세한 내용은 공식 문서를 확인해 보세요.