packagesreactcomponentsSwitchCase

SwitchCase

SwitchCase는 JavaScript의 switch 문과 유사하게 제공된 값에 따라 조건부로 컴포넌트를 렌더링하는 컴포넌트입니다. cases 객체에서 일치하는 키에 해당하는 컴포넌트를 렌더링하며, 일치하는 값이 없을 경우 defaultComponent를 렌더링합니다.

인터페이스

type CaseKey<Value> =
  | (Value extends boolean ? 'true' | 'false' : never)
  | (Value extends PropertyKey ? Value : never);
 
function SwitchCase<Value>(props: {
  value: Value | null | undefined;
  cases: Partial<Record<CaseKey<Value>, ReactNode>>;
  defaultComponent?: ReactNode;
})

Props

이름타입설명필수여부기본값
valueValue | null | undefined렌더링할 case 결정✅-
casesPartial<Record<CaseKey<Value>, ReactNode>>각 케이스에 대한 렌더링 컴포넌트 매핑✅-
defaultComponentReactNode일치하는 case가 없을 때 렌더링할 컴포넌트❌null

사용 예시

문자열 값 사용

<SwitchCase
  value={status}
  cases={{
    'pending': <Badge color="gray">대기 중</Badge>,
    'success': <Badge color="green">완료</Badge>,
    'error': <Badge color="red">오류</Badge>
  }}
  defaultComponent={<Badge color="blue">알 수 없음</Badge>}
/>

숫자 값 사용

<SwitchCase
  value={statusCode}
  cases={{
    200: <div>OK</div>,
    404: <div>Not Found</div>,
    500: <div>Server Error</div>
  }}
  defaultComponent={<div>Unknown Status</div>}
/>

불리언 값 사용

<SwitchCase
  value={isActive}
  cases={{
    true: <StatusIndicator state="active">활성</StatusIndicator>,
    false: <StatusIndicator state="inactive">비활성</StatusIndicator>
  }}
/>
SuspenseWhen