OptionalWrapper

OptionalWrapper는 조건부 래핑(conditional wrapping) 패턴을 간결하게 처리하는 유틸리티 컴포넌트입니다. 내부적으로는 렌더 여부를 결정하는 Show 컴포넌트를 사용해 조건부로 래핑을 적용하므로, 복잡한 삼항 연산자나 중복된 래퍼 코드를 피할 수 있습니다. 예를 들어 링크가 필요할 때는 a 태그로 감싸고, 필요하지 않을 때는 단순히 컨텐츠만 렌더링하도록 선언적으로 표현할 수 있습니다.

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

기본 사용법#

가장 기본적인 형태에서는 조건(true/false)에 따라 지정한 래퍼로 컨텐츠를 감싸거나, 조건이 거짓일 경우 래퍼 없이 컨텐츠만 렌더링합니다. 이 패턴은 버튼 또는 링크를 조건부로 적용할 때 유용합니다.

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>
  );
}