Copied to Clipboard
SwitchCase
조건부 렌더링을 해야하는데, 조건을 특정 변수/상수의 값에 따라 분기해야할 경우에 사용할 수 있다.
구현
function SwitchCase({ value, caseBy, defaultCase }) {
const case = caseBy[value];
if (render != null) {
return <>{case()}</>
}
return defaultCase ? <>{defaultCase()}</> : null;
}
예시
const environment = useEnvironment();
return <SwitchCase
value={environment}
caseBy={{
desktop: () => <DesktopCard />
tablet: () => <TabletCard />
mobile: () => <MobileCard />
}}
defaultCase={() => throw new Error("unknown environment")}
/>