Show

Show는 조건부 렌더링을 선언적으로 표현하는 컴포넌트입니다. when이 truthy면 children을 렌더링하고, 그렇지 않으면 fallback (또는 아무것도) 렌더링합니다. 분기 로직을 JSX 밖으로 빼내 의도를 더 명확하게 만듭니다.

// Basic usage
function Show<T>(props: {
  when: T;
  children: React.ReactNode | ((value: NonNullable<T>) => React.ReactNode);
  fallback?: React.ReactNode;
}): React.ReactNode;

// Array condition
function Show<T extends Array<unknown>>(props: {
  when: T;
  children: React.ReactNode | ((values: NonNullableElements<T>) => React.ReactNode);
  fallback?: React.ReactNode;
}): React.ReactNode;

기본 사용법#

when에 조건을 넘기고 필요하면 fallback을 제공합니다. children을 함수로 전달하면 렌더 시점의 값을 받을 수 있습니다.

import { Show } from '@ilokesto/utilinent';

function UserProfile({ user }) {
  return (
    <Show when={user} fallback={<div>Login required.</div>}>
      {(user) => <h1>Welcome, {user.name}!</h1>}
    </Show>
  );
}

여러 조건을 동시에 검사#

when에 배열을 전달하면 모든 값이 truthy일 때만 children이 렌더링됩니다. 함수 children은 배열 값을 받습니다.

<Show when={[user, user.isActive, user.hasPermission]}>
  {([user, isActive, hasPermission]) => (
    isActive && hasPermission ? <Profile user={user} /> : null
  )}
</Show>

DOM 구조 유지 및 레이아웃 안정성#

Show.div 또는 Show.span을 사용하면 외부 DOM을 유지하면서 내부 콘텐츠만 교체할 수 있습니다.

// Without element variant
<div className="badge">
  <Show when={user.isAdmin} fallback="user">
    admin
  </Show>
</div>

// With element variant
<Show.div when={user.isAdmin} className="badge" fallback="user">
  admin
</Show.div>