Polymorphic 컴포넌트란?

통상적으로 as 또는 is Props를 사용하여 다양한 형태의 HTML 요소로 렌더링 할 수 있는 컴포넌트를 말한다. 새로운 컴포넌트를 만들 때마다 HTML 요소에 매번 많은 Props를 추가해야 한다. 이러한 불필요한 상용구를 작성하는 대신 Props로 HTML 태그를 전달하여 사용하는 방법이다.

기본적인 구현

const Box = ({ as, children, ...props }) => {
  const Element = as || 'div';
  return <Element {...props}>{children}</Element>;
};

as Props를 바로 렌더링 될 수 없으므로 이를 대문자 변수에 할당한 다음 그 변수를 렌더링 시켜야 한다.

위의 예시는 두 가지 문제가 있는데, 먼저 as Props는 아래와 같이 잘못된 HTML 요소를 받을 수 있다. 예를 들어 divv는 잘못된 HTML 태그이지만 브라우저는 이를 렌더링하려고 시도하게 된다.

<MyComponent as="divv">Wrong Element</MyComponent>

두 번째로, 유효한 요소에 잘못된 속성이 전달될 수 있다. 사용자는 올바른 div 태그를 전달했지만 실수로 div에는 존재하지 않는 href 속성을 전달하여 오류를 범할 수 있다.

<MyComponent as="div" href="https://www.google.com"> Wrong Attribute </MyComponent>

Typescript 제네릭 활용

먼저, 기본적인 타입을 생성

type BoxProps = {
  as?: React.ElementType;
  children?: React.ReactNode;
}

제네릭을 활용하여 HTML이나 React 컴포넌트일 수 있는 as Props에 React 요소를 전달할 것임을 알려준다.

type BoxProps<T extends React.ElementType> = {
  as?: T;
  children?: React.ReactNode;
}

유효한 속성을 모두 확인하기 위해 React가 제공하는 ComponentPropsWithoutRef(id, href, placeholder 등과 같은 유효한 속성을 모두 제공한다는 의미)라는 타입을 추가하여 확장한다.

type BoxProps<T extends React.ElementType> = {
  as?: T
  children?: React.ReactNode
} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children'>

컴포넌트에 타입을 추가하고 제네릭을 취하고 있다고 Typescript에 알려준다.

const Box = <T extends React.ElementType>({ as, children,
...rest }:BoxProps<T>) => {
  const Element = as || 'div';
  return <Element {...rest}>{children}</Element>;
};

With forwardRef

재사용 가능한 컴포넌트를 만들 때 사용자가 DOM에 대한 참조를 얻을 수 있도록 forwardRef를 사용할 수 있다. 이때, forwardRef 작동 방식으로 인해 Polymorphic 컴포넌트에 약간의 복잡성을 가져온다.

Polymorphic 컴포넌트에 forwardRef를 추가하려면 Box 자체에 Polymorphic 유형을 지정하면 된다.

type PolymorphicRef<T extends ElementType> =
  React.ComponentPropsWithRef<T>['ref']


type BoxProps<T extends React.ElementType> = {
  as?: T
  children?: React.ReactNode
} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children'>


type PolymorphicComponent = <T extends ElementType>(
  props: BoxProps<T> &
  { ref?: React.ComponentPropsWithRef<T>['ref'] },
) => React.ReactNode | null


export const Box: PolymorphicComponent = forwardRef(
  <T extends ElementType>(props: BoxProps<T>, ref: PolymorphicRef<T>) => {
    const { as, children, ...rest } = props
    const Element = as || 'div'
    return (
      <Element ref={ref} {...rest}>
        {children}
      </Element>
    )
  },
)

이때, 아래와 같은 에러가 발생할 수 있다.

displayName은 컴포넌트의 이름을 지정하여, React에서 디버깅을 용이하게 하기 위한 속성이다. forwardRef를 통해 ref를 자식 컴포넌트에 전달하여 그 내부의 HTML 요소에 접근할 수 있는데, forwardRef를 호출할 때 위와 같이 익명함수를 넘기게 되면 React 개발자 도구에서 해당 컴포넌트의 이름이 나오지 않는다. 따라서, 이를 방지하기 위해 Eslint Error가 발생할 수 있다.

해결책

forwardRef 호출 시 기명함수를 넘김

export const Box: PolymorphicComponent = forwardRef(function Box<
  T extends ElementType,
>(props: BoxProps<T>, ref: PolymorphicRef<T>) {
  const { as, children, ...rest } = props
  const Element = as || 'div'
  return (
    <Element ref={ref} {...rest}>
      {children}
    </Element>
  )
})

2. displayName 속성으로 컴포넌트 이름을 명시

Box에 displayName 속성을 지정하기 위해 타입에 추가해 확장시켜준 후, displayName을 등록한다.

export const Box: PolymorphicComponent & { displayName?: string } = forwardRef(
  <T extends ElementType>(props: BoxProps<T>, ref: PolymorphicRef<T>) => {
    const { as, children, ...rest } = props
    const Element = as || 'div'
    return (
      <Element ref={ref} {...rest}>
        {children}
      </Element>
    )
  },
)


Box.displayName = 'box'

결과물

Typescript, React로 Polymorphic 컴포넌트 만들기