방금 Headless UI v1.4를 출시했습니다. 이번 버전에는 새로운 Tab 컴포넌트와 Popover, Disclosure 컴포넌트를 더 쉽게 수동으로 닫을 수 있는 새로운 API가 포함되어 있습니다.

​Tabs

올해 초, 우리는 Tailwind UI Ecommerce 작업을 시작했고, 새로운 인터페이스를 설계하기 위해 Headless UI에서 탭 기능을 지원해야 한다는 것을 빠르게 깨달았습니다.

결과적으로 우리가 만든 것은 다음과 같습니다:

import { Tab } from '@headlessui/react'

function MyTabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
        <Tab.Panel>Content 3</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

네, 이게 바로 탭입니다!

다른 모든 Headless UI 컴포넌트와 마찬가지로, 이 탭은 키보드 네비게이션과 같은 복잡한 부분을 완전히 추상화하여 여러분이 선언적인 방식으로 커스텀 탭을 만들 수 있게 해줍니다. 접근성 관련 까다로운 세부 사항을 고민할 필요 없이 말이죠.

문서를 확인해보세요 더 많은 정보를 얻을 수 있습니다.

​Disclosure와 Popover 닫기

지금까지는 Disclosure를 닫으려면 열 때 사용한 버튼을 직접 클릭해야 했습니다. 일반적인 Disclosure 사용 사례에서는 큰 문제가 아니지만, 모바일 네비게이션과 같은 경우에는 내부 링크를 클릭했을 때 닫히는 것이 더 적합할 때가 많습니다.

이제 Disclosure.Button(또는 Vue에서는 DisclosureButton)을 사용해 Disclosure 패널 내부에서 패널을 닫을 수 있습니다. 이를 통해 링크나 다른 버튼을 감싸서 패널이 열린 상태로 유지되지 않도록 할 수 있습니다.

import { Disclosure } from '@headlessui/react'
import MyLink from './MyLink'

function MyDisclosure() {
  return (
    <Disclosure>
      <Disclosure.Button>모바일 메뉴 열기</Disclosure.Button>
      <Disclosure.Panel>
        <Disclosure.Button as={MyLink} href="/home">
          홈
        </Disclosure.Button>
        {/* ... */}
      </Disclosure.Panel>
    </Disclosure>
  )
}

Popover 컴포넌트에서도 동일하게 작동합니다.

import { Popover } from '@headlessui/react'
import MyLink from './MyLink'

function MyPopover() {
  return (
    <Popover>
      <Popover.Button>Solutions</Popover.Button>
      <Popover.Panel>
        <Popover.Button as={MyLink} href="/insights">
          Insights
        </Popover.Button>
        {/* ... */}
      </Popover.Panel>
    </Popover>
  )
}

더 세밀한 제어가 필요하다면, render prop/scoped slot을 통해 close 함수를 전달합니다. 이를 통해 필요할 때 명령적으로 패널을 닫을 수 있습니다.

import { Popover } from '@headlessui/react'

function MyPopover() {
  return (
    <Popover>
      <Popover.Button>약관</Popover.Button>
      <Popover.Panel>
        {({ close }) => (
          <button
            onClick={async () => {
              await fetch('/accept-terms', { method: 'POST' })
              close()
            }}
          >
            읽고 동의하기
          </button>
        )}
      </Popover.Panel>
    </Popover>
  )
}

더 자세한 내용은 업데이트된 Popover 및 Disclosure 문서를 참고하세요.

​직접 사용해 보기

Headless UI v1.4는 마이너 업데이트이므로 기존 기능에 영향을 주는 변경 사항은 없습니다. 최신 버전을 설치하려면 npm을 통해 다음 명령어를 실행하세요:

# React용
npm install @headlessui/react

# Vue용
npm install @headlessui/vue

최신 문서는 공식 웹사이트에서 확인할 수 있으며, 다양한 스타일 예제를 살펴보고 싶다면 Tailwind UI를 방문해 보세요.

사용해 보고 싶으신가요? Headless UI 웹사이트 방문하기 →