헤드리스 구성요소를 쉽게 스타일링할 수 있도록 만들기

헤드리스 구성요소는 단순히 스타일이 지정되지 않은 구성요소인가요, 아니면 그 이상의 의미가 있나요?

웹에서는 스타일 정의를 요구하여 이미 스타일과 콘텐츠를 분리하고 있습니다
HTML 대신 CSS로. 이 아키텍처를 통해 각 웹페이지는 글로벌
페이지별 스타일을 정의하지 않고 디자인 표준을 따릅니다.

웹이 애플리케이션 플랫폼으로 진화하면서 개발자들은 이를 만들 수 있는 방법을 모색했습니다.
점점 늘어나는 코드베이스를 더욱 유지 관리하기 쉽게 만듭니다. 요즘
의 사실상의 전략은 애플리케이션 코드를 구성하는 것은
함께 구성하세요. 그리하여
에서는 컴포넌트가 구성의 단위가 되었습니다. 현대적인 웹 개발.

구성요소는 캡슐화를 위해 HTML과 CSS를 모두 정의하는 경우가 많습니다.
이렇게 하면 작성하기가 더 쉬워지지만 작성하기가 더 어려울 수 있습니다
기존 디자인 시스템에 일관되게 통합합니다. 특히 그렇습니다
외부 공급업체에서 수입한 타사 구성 요소용.

헤드리스 구성요소는
콘텐츠와 스타일. 그러나 이제 분리는
과 같이 구성 요소 경계를 따라 이루어집니다. HTML과 CSS 사이에 반대됩니다. 이는 훌륭한 헤드리스 구성 요소를 만드는 데 핵심입니다
개발자가
자신만의 스타일을 명확하고 쉽게 적용해보세요.

관련 소품 전달

가장 기본적인 의미에서 헤드리스 구성 요소는 단순히 스타일이 지정되지 않은 구성 요소입니다.
개발자는
HTML 요소에 자신만의 CSS를 적용할 수 있어야 합니다. 구성요소가 정의됩니다.

간단한 구성 요소의 경우 간단히 className을 전달하면 됩니다
개발자가
에서 클래스 선택기를 사용할 수 있도록 루트 요소에 추가합니다. CSS.

구성 요소가 기본 HTML 요소와 동일한 의미를 갖는 경우 다음을 사용할 수 있습니다
모든 관련 소품이 있는지 확인하기 위한 React의 ComponentProps 유형
전달 가능. 사용자에게 원하지 않는 소품은 생략하세요.
구성 요소를 재정의할 수 있습니다.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit<ComponentProps<'button'>, 'type'>) {
  return <button type="submit" {...props} />
}

사전 정의된 클래스 제공

하나 이상의 하위 요소가 포함된 구성 요소의 경우 개발자는 아마도
각 요소의 스타일을 개별적으로 지정하고 싶습니다.

이를 지원하는 한 가지 전략은
CSS 결합자.
예를 들어, 헤드리스 갤러리 구성 요소는 다음과 같이 스타일이 지정될 수 있습니다.

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

그러나 이 접근 방식은 이제
의 내부 HTML 구조가 변경되었기 때문에 큰 문제를 야기합니다. 구성 요소는 공개 API의 일부입니다. 이렇게 하면
잠재적으로 다운스트림 코드를 손상시키지 않고 나중에 구조를 구성합니다.

더 나은 전략은 각 주요 하위 요소에 대한 클래스를 미리 정의하는 것입니다. 이쪽으로
개발자는 특정 HTML에 의존하지 않고 클래스 선택기를 사용할 수 있습니다
구조:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

클래스와 충돌하지 않도록 클래스 앞에 접두사를 붙이는 것을 잊지 마세요.
개발자 자신의 스타일.

사용자 정의 레이아웃 지원

사전 정의된 클래스를 제공하는 것은 아마도 개발자가 다음을 수행할 수 있는 가장 빠른 방법일 것입니다.
구성요소에 스타일을 지정하세요. 그러나 이 접근 방식의 단점은
HTML 구조는 사용자 정의할 수 없습니다.

이건 중요하지 않을 수도 있습니다. 결국, 일반 HTML은 이미 그 방식이 상당히 유연합니다
렌더링될 수 있습니다. 그러나 때로는 개발자가 추가 HTML을 순서대로 사용하는 경우도 있습니다
특정 디자인을 달성하기 위해. 거의 모든 소스 코드를 보면
웹사이트를 방문하면 의미 없는

<Gallery>
  <GalleryItems className='gallery-items-container'>
    {data.map((item) => (
      <GalleryItem key={item.id}>{item.content}</GalleryItem>
    ))}
  </GalleryItems>
  <div className='gallery-buttons-container'>
    <GalleryPreviousButton>
    <GalleryNextButton>
  </div>
</Gallery>

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

<TreeView
  nodes={[...]}
  components={{
    CustomRow,
    CustomDragPreview: (props) => <div className="drag-preview" {...props} />
  }}
/>

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return <Component {...props} />
}

<HeadlessButton as="a">Actually a link</HeadlessButton>