SwitchCase

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

인터페이스

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

파라미터

• valuerequired · string | number
  

  비교할 값이에요. caseBy에서 일치하는 키와 연결된 컴포넌트가 렌더링돼요.

• caseByrequired · Record<string | number, () => JSX.Element>
  

  렌더링할 컴포넌트를 값으로 맵핑하는 객체예요. 키는 가능한 값을 나타내며, 값은 해당 컴포넌트를 반환하는 함수예요.

• defaultComponentrequired · () => JSX.Element
  

  value가 caseBy의 어떤 키와도 일치하지 않을 때 렌더링할 컴포넌트예요.

반환 값

• JSX.Element
  

  케이스에 따라 조건부로 렌더링하는 리액트 컴포넌트예요.

예시

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