Switch & Match

Switch는 Match를 순서대로 평가해 가장 먼저 매칭되는 항목을 렌더링합니다. 매칭 규칙은 Show와 동일하며, 아무 것도 매칭되지 않으면 fallback이 렌더링됩니다.

function Switch(props: {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

function Match<T>(props: {
  when: T | null | undefined | false;
  children: React.ReactNode | ((value: NonNullable<T>) => React.ReactNode);
}): React.ReactNode;

기본 사용법#

Switch 내부에 여러 Match를 배치하고 필요하면 fallback을 제공하세요.

import { Switch, Match } from '@ilokesto/utilinent';

function StatusBadge({ status }) {
  return (
    <Switch fallback={<span>Unknown</span>}>
      <Match when={status === 'loading'}>Loading...</Match>
      <Match when={status === 'ready'}>Ready</Match>
      <Match when={status === 'error'}>Error</Match>
    </Switch>
  );
}

함수형 children#

Match에 함수를 전달하면 해당 분기의 값을 인자로 받을 수 있습니다.

<Switch>
  <Match when={user}>{(user) => <Profile user={user} />}</Match>
  <Match when={!user}>Sign in</Match>
</Switch>

DOM 구조 유지 및 레이아웃 안정성#

Switch.div를 사용하면 래퍼 요소를 유지한 채 매칭된 콘텐츠만 교체할 수 있습니다.

<Switch.div className="status">
  <Match when={isOnline}>Online</Match>
  <Match when={!isOnline}>Offline</Match>
</Switch.div>