React 컴포넌트 패턴 메모

탭을 `Root`, `List`, `Trigger`, `Content`처럼 나누면, 사용하는 쪽에서 구조를 더 명확하게 잡을 수 있습니다.

<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
  </Tabs.List>

  <Tabs.Content value="profile">Profile content</Tabs.Content>
  <Tabs.Content value="billing">Billing content</Tabs.Content>
</Tabs>

`useDropdown`처럼 상태와 행동만 제공하고, 실제 UI는 바깥에서 결정하는 방식은 headless 성격이 강합니다.

import { useState } from 'react'

function useDropdown() {
  const [open, setOpen] = useState(false)

  return {
    open,
    toggle: () => setOpen((value) => !value),
    close: () => setOpen(false),
  }
}

export default function Example() {
  const dropdown = useDropdown()

  return (
    <div>
      <button onClick={dropdown.toggle}>메뉴 열기</button>

      {dropdown.open && (
        <div style={{ border: '1px solid #ccc', padding: 12, marginTop: 8 }}>
          <div>프로필 보기</div>
          <div>설정</div>
          <button onClick={dropdown.close}>닫기</button>
        </div>
      )}
    </div>
  )
}

모달의 열림/닫힘 상태를 부모가 쥐고 있으면 외부 상태와 동기화하기 쉽고 흐름도 예측하기 좋습니다.

import { useState } from 'react'

function Modal({
  open,
  onOpenChange,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
}) {
  if (!open) return null

  return (
    <div style={{ border: '1px solid black', padding: 16 }}>
      <p>Modal content</p>
      <button onClick={() => onOpenChange(false)}>Close</button>
    </div>
  )
}

export default function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open modal</button>
      <Modal open={open} onOpenChange={setOpen} />
    </>
  )
}

초기값만 받고 내부에서 상태를 관리하는 모달은 uncontrolled 패턴에 가깝습니다.

import { useState } from 'react'

function Modal({
  defaultOpen = false,
}: {
  defaultOpen?: boolean
}) {
  const [open, setOpen] = useState(defaultOpen)

  if (!open) return <button onClick={() => setOpen(true)}>Open modal</button>

  return (
    <div style={{ border: '1px solid black', padding: 16 }}>
      <p>Modal content</p>
      <button onClick={() => setOpen(false)}>Close</button>
    </div>
  )
}

export default function Example() {
  return <Modal defaultOpen={false} />
}

`useControllableState`처럼 내부 상태와 외부 상태를 하나의 인터페이스로 묶으면, 컴포넌트가 훨씬 유연해집니다.

import { useState } from 'react'

function useControllableState<T>({
  value,
  defaultValue,
  onChange,
}: {
  value?: T
  defaultValue: T
  onChange?: (value: T) => void
}) {
  const [internalValue, setInternalValue] = useState(defaultValue)
  const isControlled = value !== undefined

  const currentValue = isControlled ? value : internalValue

  const setValue = (next: T) => {
    if (!isControlled) setInternalValue(next)
    onChange?.(next)
  }

  return [currentValue, setValue] as const
}

function Switch({
  checked,
  defaultChecked = false,
  onCheckedChange,
}: {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}) {
  const [value, setValue] = useControllableState({
    value: checked,
    defaultValue: defaultChecked,
    onChange: onCheckedChange,
  })

  return <button onClick={() => setValue(!value)}>{value ? 'ON' : 'OFF'}</button>
}