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

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

웹이 애플리케이션 플랫폼으로 발전함에 따라 개발자는 다음과 같은 방법을 모색했습니다.
점점 늘어나는 코드베이스를 더욱 유지 관리하기 쉽게 만듭니다. 요즘
에 대한 사실상의 전략은 애플리케이션 코드를 구성하는 것은
작고 가벼운 구성 요소를 정의하는 것입니다. 함께 구성하세요. 따라서 컴포넌트는
의 구성 단위가 되었습니다. 최신 웹 개발.

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

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

관련 소품 전달

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

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

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

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit, 'type'>) {
  return 
}

사전 정의된 클래스 제공

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

이를 지원하는 한 가지 전략은 다음과 같습니다.
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에 도달하는 경우도 있습니다.
특정 디자인을 달성하기 위해. 거의 모든
의 소스 코드를 보면 웹사이트에서는 의미 없는

헤드리스 구성요소를 다음과 같이 분할하여 이러한 사용 사례를 지원할 수 있습니다.
여러 관련 구성 요소. 이 방법으로 개발자는 자유롭게 자신의
를 추가할 수 있습니다. 레이아웃 요소를 구성 요소에 추가합니다. 예를 들어 개발자는 Next 및
를 삽입할 수 있습니다. 사용자 정의 Flexbox 컨테이너 내 갤러리 예제의 이전 버튼:

    {data.map((item) => (
      {item.content}
    ))}
  

    

.gallery-items-container {
}

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

이러한 종류의 구성요소는 일반적으로 다음을 사용하여 구현됩니다.
전달할 컨텍스트
그들 사이의 데이터. 설계, 구현 및
에 더 많은 작업이 필요합니다. 문서. 그러나 결과적으로 다재다능하다는 것은 종종 추가 노력이 필요하다는 것을 의미합니다.
그만한 가치가 있습니다.

구성 요소 재정의 허용

소수의 사용 사례에서는 헤드리스 구성요소가 레이아웃을 관리해야 합니다.
하위 구성요소 중 하나입니다.
계층적 트리 뷰를 예로 들 수 있습니다. 드래그 앤 드롭을 통해 항목을 재정렬할 수 있습니다. 또 다른 사용 사례는 다음과 같습니다.
단일 페이지 애플리케이션이 기본 앵커 요소를
로 대체하도록 허용 클라이언트 측 라우팅을 용이하게 하는 사용자 정의 링크 구성 요소입니다.

개발자가 사용자 정의 레이아웃을 정의할 수 있도록 하는 고급 전략은 다음과 같습니다.
props:
를 통해 렌더링되는 실제 하위 구성 요소를 재정의할 수 있습니다.

  }}
/>

이렇게 하면 개발자가 각 하위 항목에서 렌더링되는 내용을 완전히 제어할 수 있습니다.
헤드리스 구성 요소가 전체를 관리하도록 허용하는 동시에 구성 요소
구조.

개발자가 구성 요소의 루트 요소를 맞춤설정하도록 허용할 수도 있습니다.
소품을 통해. 예를 들어, 이 버튼 구성 요소를 사용하면 개발자가 렌더링할 수 있습니다
다른 것으로:

import { type ElementType } from 'react'

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

예를 들어 보조 기술이 버튼을 링크처럼 처리하려면
개발자는
를 렌더링하는 데 앵커 요소를 사용해야 한다고 지정할 수 있습니다. 단추:

Actually a link

요약

헤드리스 구성요소는 아무것도 포함하지 않는 구성요소보다 훨씬 더 많습니다.
스타일. 훌륭한 헤드리스 구성 요소는 완전히 확장 가능하며 개발자가
전체 내부 HTML 구조를 사용자 정의합니다.