Show

Show는 복잡한 조건부 렌더링을 선언적이고 직관적으로 표현하게 해 주는 컴포넌트입니다. React에서 흔히 사용하는 삼항 연산자(? :)나 논리 연산자(&&)로 인해 JSX가 가독성을 잃고 의도가 묻히는 경우가 많은데, Show는 그런 분기 로직을 명확한 API로 대체합니다. when이 참일 때만 children을 렌더링하고, fallback을 이용해 조건이 거짓일 때의 대체 UI를 분명히 지정할 수 있어 코드 의도가 더 선명해집니다.

// Basic usage
function Show<T>(props: {
  when: T | null | undefined | false;
  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으로 대체 UI를 제공합니다. 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이 렌더링됩니다.

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

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

Show.div, Show.span 같은 태그 기반 변형을 사용하면, 외부 DOM 노드는 항상 존재시키면서 내부 콘텐츠만 조건에 따라 교체할 수 있습니다. 이렇게 하면 레이아웃이나 CSS가 불필요하게 깨지는 것을 방지하고, 시맨틱한 마크업을 유지하면서 조건부 렌더링을 안전하게 적용할 수 있습니다.

// 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>

Showable#

Showable은 Show 컴포넌트 내부에서 사용되는 특수 컴포넌트로, 정적인 콘텐츠와 조건부 콘텐츠를 혼합할 때 유용합니다. Show.div는 항상 렌더링되지만, 내부의 Showable만 when 조건에 따라 렌더링됩니다. 이를 통해 헤더나 푸터 같은 고정 요소는 유지하면서 특정 부분만 조건부로 표시할 수 있습니다.

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

function UserProfile({ user }) {
  return (
    <Show.div when={user} className="profile">
      <h1>User Profile</h1>
      <Showable fallback={<div>Please login to view profile.</div>}>
        {(user) => (
          <>
            <p>Name: {user.name}</p>
            <p>Email: {user.email}</p>
          </>
        )}
      </Showable>
    </Show.div>
  );
}