Show
Show
Show는 조건에 따라 뷰의 일부를 조건부 렌더링할 때 사용하는 컴포넌트예요. 삼항 연산자를 더 읽기 쉽게 표현한 셈이에요.
출처: 문서
본문
사용법 (Usage)
Show 컴포넌트는 when 값이 truthy일 때 children을 렌더링하고, 그렇지 않으면 fallback prop을 렌더링해요.
import { Show } from "@chakra-ui/react"
<Show when={...} fallback={...}>
<div>Content</div>
</Show>
예시 (Examples)
Fallback
배열이 비어 있거나 undefined일 때 폴백 컴포넌트를 렌더링하려면 fallback prop을 사용해요.
Render Prop
children render prop을 사용해 when 값의 타입을 좁히고 undefined | null을 제거할 수 있어요.
Props
Show 컴포넌트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.