Snippet

자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 안내합니다.

개요

Snippet은 Compound Components를 기본으로 채택하면서도 개발자 경험(DX)을 최적화하기 위한 해결책입니다. 복잡한 compound components를 간단하게 사용할 수 있도록 도와주는 패턴입니다.

Compound Components란?

기존의 닫힌 컴포넌트 방식에서는 컴포넌트의 커스터마이징이 제한적이었습니다. 예를 들어, 다음과 같은 닫힌 컴포넌트는:

<Checkbox>Click me</Checkbox>

내부 구현이 숨겨져 있어 다음과 같은 커스터마이징 요구사항을 해결하기 어려웠습니다:

label에 스타일을 추가하는 방법
체크박스의 아이콘을 변경하는 방법
ref를 div와 input에 각각 전달하는 방법

이러한 문제를 해결하기 위해 compound components 패턴을 도입했습니다:

<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label>Click me</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Snippet의 필요성

Compound components는 뛰어난 유연성을 제공하지만, 매번 이렇게 자세한 구현을 작성하는 것은 번거로울 수 있습니다. 이러한 유연성과 DX간의 trade-off를 해결하기 위해 Snippet 개념이 도입되었습니다.

Snippet 사용하기

1. CLI 실행

다음 명령어를 통해 필요한 컴포넌트의 snippet을 프로젝트에 추가할 수 있습니다:

npx @seed-design/cli add

2. 생성된 Snippet 활용

CLI 실행 후, seed-design/ui/* 디렉토리에 snippet이 생성됩니다. 예를 들어:

// seed-design/ui/checkbox.tsx
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ inputProps, rootRef, label, variant = "square", ...otherProps }, ref) => {
    return (
      <SeedCheckbox.Root ref={rootRef} variant={variant} {...otherProps}>
        <SeedCheckbox.Control>
          <SeedCheckbox.Indicator
            unchecked={variant === "ghost" ? <IconCheckmarkFatFill /> : null}
            checked={<IconCheckmarkFatFill />}
            indeterminate={<IconMinusFatFill />}
          />
        </SeedCheckbox.Control>
        <SeedCheckbox.Label>{label}</SeedCheckbox.Label>
        <SeedCheckbox.HiddenInput ref={ref} {...inputProps} />
      </SeedCheckbox.Root>
    );
  },
);

3. 간단한 사용법

Snippet을 통해 복잡한 compound components를 간단하게 사용할 수 있습니다:

import { Checkbox } from "@/seed-design/ui/checkbox"

const Demo = () => <Checkbox>Click me</Checkbox>