Slot

Slot은 컴포넌트 합성의 유연성을 극대화하는 고급 패턴 구현입니다. 재사용 가능한 컴포넌트를 만들 때, 내부 구조를 유지하면서도 사용자가 원하는 요소로 렌더링하고 싶을 때가 있습니다. 예를 들어 Button 컴포넌트가 때로는 실제 <button> 태그로, 때로는 <a> 태그로 렌더링되어야 하는 경우입니다. Slot은 부모 컴포넌트의 props를 자식 요소에 지능적으로 병합하여, 이러한 유연성을 제공하면서도 스타일, 이벤트 핸들러, ref 등을 모두 보존합니다.

const Slot: ForwardRefExoticComponent<
  React.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>
>;

function Slottable(props: {
  children: React.ReactNode;
}): React.ReactElement;

기본 사용법#

asChild 패턴을 사용하여 컴포넌트의 렌더링 요소를 외부에서 제어할 수 있습니다. Button의 스타일과 동작을 유지하면서 다른 요소로 렌더링할 수 있습니다.

import { Slot, Slottable } from '@ilokesto/utilinent';

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot : 'button';
  return <Comp {...props} />;
}

// render as a button
<Button onClick={handleClick}>클릭</Button>

// render as a link
<Button asChild>
  <Link to="/home">홈으로</Link>
</Button>

Slottable#

복잡한 구조에서 특정 자식에게만 props를 전달하고 싶을 때 Slottable로 감싸면 됩니다. 아이콘과 텍스트를 조합한 버튼 등에 유용합니다.

<Slot style={{ color: 'red' }}>
  <div>
    <Icon />
    <Slottable>
      <span>이 span에만 style이 적용됨</span>
    </Slottable>
  </div>
</Slot>