React의 조건부 랩핑

React를 사용해 본 적이 있다면 구성 요소를 조건부로 래핑해야 하는 상황을 발견했을 것입니다. 어떤 조건과 일치하면 주어진 태그 안에 렌더링되어야 하고 일치하지 않으면 그대로 두어야 합니다. 다음은 이에 대한 작은 스니펫입니다.

import { FC, ReactNode, createElement } from 'react';

interface WrapProps {
    if?: boolean;
    with: typeof createElement.arguments[0];
    wrapperProps: typeof createElement.arguments[1];
    children: NonNullable<ReactNode>;
}

const Wrap: FC<WrapProps> = ({
    if: condition,
    with: wrapper,
    wrapperProps,
    children,
}) =>
    condition ? createElement(wrapper, wrapperProps, [children]) : <>{children}</>;

export default Wrap;

용법:

<Wrap if with="a" wrapperProps={{ 'data-testid': 'wrapper' }}>
    <p>Wrapped text</p>
</Wrap>

이 구성 요소는 동적 구성 요소 생성을 허용하므로 React.createElement를 사용합니다. 이는 Wrap에 (children) => <p>{children}</p>와 같은 함수를 제공하는 대신 React Component 인스턴스나 HTML 노드 이름을 전달할 수 있음을 의미합니다.