OptionalWrapper

OptionalWrapper는 마크업을 복제하지 않고 조건부로 래핑하는 패턴을 제공합니다. 내부적으로 Show를 사용하므로 when이 truthy면 래퍼가 적용되고, falsy면 fallback 또는 원본 children이 렌더링됩니다.

function OptionalWrapper<T>(props: {
  when: T;
  children: React.ReactNode;
  wrapper: (children: React.ReactNode) => React.ReactNode;
  fallback?: (children: React.ReactNode) => React.ReactNode;
}): React.ReactNode;

기본 사용법#

when과 wrapper 함수를 제공하면 children을 조건부로 감쌀 수 있습니다.

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

function Post({ post, withLink }) {
  return (
    <OptionalWrapper
      when={withLink}
      wrapper={(children) => <a href={`/posts/${post.id}`}>{children}</a>}
    >
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </OptionalWrapper>
  );
}

대체 래퍼#

fallback을 이용해 조건이 거짓일 때 다른 래퍼를 적용할 수 있습니다.

<OptionalWrapper
  when={withLink}
  wrapper={(children) => <a href={`/posts/${post.id}`}>{children}</a>}
  fallback={(children) => <span className="muted">{children}</span>}
>
  <h2>{post.title}</h2>
</OptionalWrapper>