문자열로부터 JSX 요소를 생성하기 위한 적절한 TypeScript 타입
TypeScript와 React를 사용하면, 동적으로 문자열에서 JSX 요소를 생성해야 할 때 자주 마주치게 됩니다. 이러한 상황 중 하나는 컴포넌트 내에서 기본적으로 h2 태그로 렌더링되지만 원하는 경우 사용자가 다른 요소를 지정할 수 있는 경우입니다.
이를 위해 다음 코드를 살펴보겠습니다.
import React, { ReactNode } from 'react';
interface Props {
children: ReactNode;
elementType?: string;
}
export default function MyComponent({ children, elementType: ElementType = 'h2' }: Props): JSX.Element {
return (
<ElementType>{children}</ElementType>
);
}
오류: JSX 요소 타입 ‘ElementType’은(는) 구성 또는 호출 서명을 갖고 있지 않습니다.
이 코드를 사용하려고 할 때 다음과 비슷한 오류가 발생할 수 있습니다:
JSX 요소 타입 'ElementType'은(는) 구성 또는 호출 서명을 갖고 있지 않습니다.
이 오류는 TypeScript가 JSX 요소 타입을 React 노드로 예상하지만, 이 경우에는 문자열입니다. React는 문자열로 참조된 요소를 렌더링할 수 있지만, TypeScript는 요구 사항을 충족시키기 위해 더 명시적인 타입 정보가 필요합니다.
해결책 1: keyof JSX.IntrinsicElements 사용하기
이 문제를 해결하기 위해 keyof JSX.IntrinsicElements 유틸리티 타입을 사용할 수 있습니다. 이 타입은 JSX에서 가능한 모든 유효한 HTML 요소 이름을 나타냅니다:
import * as React from 'react';
interface Props {
children: React.ReactNode;
elementType?: keyof JSX.IntrinsicElements;
}
export default function MyComponent({ children, elementType: ElementType = 'h2' }: Props): JSX.Element {
return (
<ElementType>{children}</ElementType>
);
}
elementType prop을 keyof JSX.IntrinsicElements로 지정함으로써, 유효한 HTML 요소만이 prop으로 전달될 수 있도록 보장할 수 있습니다.
예시 사용:
<MyComponent elementType="div"><span>Hello, World!</span></MyComponent>
해결책 2: React FunctionComponent 사용하기
다른 방법은 React가 제공하는 FunctionComponent 타입을 사용하는 것입니다:
import React, { ReactNode, FunctionComponent } from 'react';
interface Props {
children: ReactNode;
elementType?: React.ElementType | string;
}
const MyComponent: FunctionComponent<Props> = ({ children, elementType: ElementType = 'h2' }: Props): JSX.Element => {
return (
<ElementType>{children}</ElementType>
);
}
elementType prop을 React.ElementType | string으로 정의함으로써, 요소 타입으로 React 컴포넌트 타입과 문자열을 모두 사용할 수 있습니다.
예시 사용:
<MyComponent elementType={SomeCustomComponent}><span>Hello, World!</span></MyComponent>
결론
TypeScript와 React를 사용할 때 동적 JSX 요소에 적절한 타입을 지정하는 것은 도전적일 수 있습니다. keyof JSX.IntrinsicElements 또는 FunctionComponent 타입 중 하나를 사용하여 이 도전을 극복하고 문자열로부터 JSX 요소를 생성할 때 타입 안정성을 보장할 수 있습니다.
필요에 맞는 방법을 선택하고, TypeScript의 강력한 타입 시스템과 함께 React를 즐기세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
