SwitchCase.md

SwitchCase

SwitchCase는 주어진 값에 기반하여 선언적으로 컴포넌트를 렌더링할 수 있는 컴포넌트예요, 마치 switch-case 문장과 비슷해요. 이는 특정 상태에 따라 다른 컴포넌트를 조건부로 렌더링해야 할 때 유용해요.

인터페이스

function SwitchCase(
  value: string | number | boolean,
  caseBy: Record<string | number | boolean, () => JSX.Element>,
  defaultComponent: () => JSX.Element
): JSX.Element;

파라미터

반환 값

예시

function App() {
  return (
    <SwitchCase
      value={status}
      // 상태 값에 따라 TypeA, TypeB 또는 TypeC를 렌더링해요.
      caseBy={{
        a: () => <TypeA />,
        b: () => <TypeB />,
        c: () => <TypeC />,
      }}
      // 상태 값이 어떤 케이스와도 일치하지 않으면 Default를 렌더링해요.
      defaultComponent={() => <Default />}
    />
  );
}