Headless UI v1.5를 출시했습니다. 이번 버전에는 새로운 Combobox 컴포넌트가 포함되어 있습니다. 콤보박스는 선택 컨트롤과 비슷하지만 자동 완성/타이핑 기능이 추가된 형태입니다. 대규모 데이터셋을 다룰 때 적절한 옵션을 빠르게 필터링할 수 있어 일반적인 선택 박스 대신 유용하게 사용할 수 있습니다.

다른 모든 Headless UI 컴포넌트와 마찬가지로, 콤보박스도 복잡한 접근성 고려 사항을 추상화하지만 스타일링은 완전히 여러분에게 맡깁니다. 키보드 네비게이션이나 스크린 리더 지원과 같은 문제를 걱정하지 않고 원하는 대로 콤보박스를 디자인할 수 있습니다.

실제 동작을 확인하고 싶다면 간단한 데모를 살펴보세요:

결과를 필터링하는 부분은 여러분이 완전히 제어할 수 있도록 의도적으로 설계했습니다. 기본 문자열 비교를 사용하거나 Fuse.js와 같은 퍼지 검색 라이브러리를 활용할 수도 있고, 심지어 서버 측 API에 요청을 보내는 것도 가능합니다. 프로젝트에 맞는 방식을 선택하면 됩니다.

기본 문자열 비교를 사용해 결과를 필터링하는 예제는 다음과 같습니다:

import { useState } from 'react'
import { Combobox } from '@headlessui/react'

const people = [
  'Wade Cooper',
  'Arlene McCoy',
  'Devon Webb',
  'Tom Cook',
  'Tanya Fox',
  'Hellen Schmidt',
]

function MyCombobox() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson}>
      <Combobox.Input onChange={(event) => setQuery(event.target.value)} />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option key={person} value={person}>
            {person}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>
  )
}

​커맨드 팔레트

콤보박스는 단독 입력 필드로도 유용하지만, 더 복잡한 컴포넌트를 구축하기 위한 기본 요소로도 활용할 수 있습니다. 커맨드 팔레트가 대표적인 예입니다.

사실 이게 바로 우리가 콤보박스 컴포넌트를 만든 이유 중 하나입니다. Tailwind UI에 새로운 커맨드 팔레트 카테고리를 추가하고 싶었고, 이를 구현하기 위해 이 컴포넌트가 필요했습니다.

Tailwind UI 라이선스를 보유하고 있다면, 새로운 커맨드 팔레트 카테고리를 확인해 보세요. 결과물이 어떻게 나왔는지 확인할 수 있습니다. 또한 새로운 콤보박스 카테고리도 추가했으니 참고하세요.

새로운 커맨드 팔레트에 대한 열정을 이어가며, Tailwind CSS, React, Headless UI를 사용해 커맨드 팔레트를 처음부터 구축하는 방법에 대한 심층 스크린캐스트도 최근 공개했습니다.

이 영상에서는 디자인과 애니메이션을 완벽하게 구현하기 위한 다양한 Tailwind 팁을 다루며, 새로운 콤보박스 컴포넌트를 사용하고 앱에 연결하는 방법에 대해 많은 것을 배울 수 있습니다.

​직접 사용해 보기

프로젝트에 Headless UI가 이미 설치되어 있다면, 새로운 Combobox 컴포넌트를 사용하려면 v1.5로 업그레이드해야 합니다. 이번 업데이트는 마이너 업데이트이므로 기존 기능에 영향을 주는 변경 사항은 없습니다.

# React용
npm install @headlessui/react

# Vue용
npm install @headlessui/vue

최신 문서를 확인하려면 공식 웹사이트를 방문해 보세요.