Compound Pattern (Tabs)

#8StructuralMedium

Compound Pattern (Tabs)

Compound Component Pattern

Tabs를 compound 컴포넌트로 구현하세요. Tabs, Tabs.List, Tabs.Tab, Tabs.Panels, Tabs.Panel이 컨텍스트로 암묵적 상태를 공유합니다.

API

<Tabs defaultIndex={0}>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
    <Tabs.Tab>Two</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Content 1</Tabs.Panel>
    <Tabs.Panel>Content 2</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

동작

초기에는 defaultIndex(기본 0) 번째 탭이 선택됨
Tabs.Tab을 클릭하면 그 인덱스의 Tabs.Panel만 화면에 보임 (나머지 panel은 DOM에서 빠지거나 숨겨도 됨, 단 screen.queryByText로 안 잡혀야 함)
부모-자식이 props 없이도 통신: Tabs가 컨텍스트 제공, Tab/Panel이 소비

힌트

Children.map으로 List/Panels 자식에 순서 인덱스를 주입하거나
자식 자체가 useContext로 자기 인덱스 + 활성 인덱스를 비교

학습 포인트

합성된 자식들이 암묵적으로 상태를 공유 (props drilling 없음)
호출 측이 마크업 구조의 자유도를 가짐
React createContext + Children.map + cloneElement

import {
  createContext,
  useContext,
  useState,
  Children,
  cloneElement,
  ReactNode,
  ReactElement,
} from 'react';

type TabsCtx = { active: number; setActive: (i: number) => void };
const Ctx = createContext<TabsCtx | null>(null);

function useTabs(): TabsCtx {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('Tabs.* must be used within <Tabs>');
  return ctx;
}

export function Tabs({
  defaultIndex = 0,
  children,
}: {
  defaultIndex?: number;
  children: ReactNode;
}) {
  // TODO: useState로 active 인덱스 관리, Provider로 children을 감싸세요
  return <>{children}</>;
}

function List({ children }: { children: ReactNode }) {
  // TODO: Children.map으로 각 자식(Tab)에 자기 인덱스를 주입하세요
  return <div role="tablist">{children}</div>;
}

function Tab({ children, __idx }: { children: ReactNode; __idx?: number }) {
  // TODO: useTabs()로 active를 받고, 클릭 시 setActive(__idx)
  return <button role="tab">{children}</button>;
}

function Panels({ children }: { children: ReactNode }) {
  // TODO: Children.map으로 각 Panel에 인덱스를 주입하세요
  return <div>{children}</div>;
}

function Panel({ children, __idx }: { children: ReactNode; __idx?: number }) {
  // TODO: useTabs()로 active를 받고, active === __idx일 때만 렌더
  return null;
}

Tabs.List = List;
Tabs.Tab = Tab;
Tabs.Panels = Panels;
Tabs.Panel = Panel;

Sandpack 로드 중…

import {
  createContext,
  useContext,
  useState,
  Children,
  cloneElement,
  ReactNode,
  ReactElement,
} from 'react';

type TabsCtx = { active: number; setActive: (i: number) => void };
const Ctx = createContext<TabsCtx | null>(null);

function useTabs(): TabsCtx {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('Tabs.* must be used within <Tabs>');
  return ctx;
}

export function Tabs({
  defaultIndex = 0,
  children,
}: {
  defaultIndex?: number;
  children: ReactNode;
}) {
  // TODO: useState로 active 인덱스 관리, Provider로 children을 감싸세요
  return <>{children}</>;
}

function List({ children }: { children: ReactNode }) {
  // TODO: Children.map으로 각 자식(Tab)에 자기 인덱스를 주입하세요
  return <div role="tablist">{children}</div>;
}

function Tab({ children, __idx }: { children: ReactNode; __idx?: number }) {
  // TODO: useTabs()로 active를 받고, 클릭 시 setActive(__idx)
  return <button role="tab">{children}</button>;
}

function Panels({ children }: { children: ReactNode }) {
  // TODO: Children.map으로 각 Panel에 인덱스를 주입하세요
  return <div>{children}</div>;
}

function Panel({ children, __idx }: { children: ReactNode; __idx?: number }) {
  // TODO: useTabs()로 active를 받고, active === __idx일 때만 렌더
  return null;
}

Tabs.List = List;
Tabs.Tab = Tab;
Tabs.Panels = Panels;
Tabs.Panel = Panel;