![](https://velog.velcdn.com/images/hugh0223/post/f022a4ea-662c-49eb-8fa4-b4029f90d5e6/image.jpeg)
🖋️ Typescript 를 사용하면서 궁금하게 된 React 컴포넌트의 타입
React에서 컴포넌트 타입을 정의할 때 사용되는 몇 가지 주요 타입들이 있습니다.
이들은 각기 다른 목적과 쓰임새를 가지고 있습니다.
각각의 타입과 언제 사용하는지, 그리고 최적화와 보안 측면에서 어떤 것이
더 좋은지 알아보겠습니다.
@ React.FC (FunctionComponent)
설명
- 함수형 컴포넌트를 정의할 때 사용하는 타입
- 기본적으로
children
을 포함하는 props 타입을 제공
장점
- 자동으로
children
타입을 포함
- 명시적으로 함수형 컴포넌트임을 나타냄
단점
- 불필요한
children
타입을 포함하여, 사용하지 않을 때도 포함
import React, { FC } from 'react';
interface MyComponentProps {
title: string;
}
const MyComponent: FC<MyComponentProps> = ({ title, children }) => {
return (
<div>
<h1>{title}</h1>
{children}
</div>
);
};
@ ReactNode
설명
- React에서 렌더링할 수 있는 모든 타입을 포함하는 타입
- 문자열, 숫자, 요소, fragment, 그리고 null 등 다양한 타입을 포함
사용시기
- 컴포넌트가 렌더링할 수 있는 모든 종류의 자식을 받을 때 사용
장점
단점
- props로 전달되는 모든 값을 허용하므로, 타입 체크가 덜 엄격
import React, { ReactNode } from 'react';
interface ContainerProps {
children: ReactNode;
}
const Container: React.FC<ContainerProps> = ({ children }) => {
return <div>{children}</div>;
};
@ ReactElement
설명
- React 요소를 나타내는 타입
- 주로 JSX를 사용할 때 반환되는 타입
사용시기
- 컴포넌트가 반드시 React 요소를 반환해야 할 때 사용
장점
- JSX로 반환되는 요소의 타입을 명확하게 나타냄
- 특정 요소를 반환하는 컴포넌트를 더 엄격하게 타입 체크
단점
import React, { ReactElement } from 'react';
interface ButtonProps {
label: string;
}
const Button: React.FC<ButtonProps> = ({ label }) => {
return <button>{label}</button>;
};
const App: React.FC = (): ReactElement => {
return <Button label="Click me" />;
};
@ JSX.Element
설명
- React의 JSX 문법을 통해 생성된 요소의 타입
- ReactElement와 비슷하지만 조금 더 구체적
사용시기
장점
단점
- ReactElement와 실제 코드에서는 크게 차이를 느끼기 어려움
import React from 'react';
const Header: React.FC = (): JSX.Element => {
return <h1>Header</h1>;
};
📰 요약
- 함수형 컴포넌트를 정의할 때, 필요에 따라 React.FC
또는 명시적으로 props를 정의하는 방식을 선택
- 자식 요소를 받을 때는 ReactNode를 사용하여
모든 렌더링 가능한 값을 허용
- 특정 컴포넌트가 JSX 요소를 반환해야 할 때는 ReactElement
또는 JSX.Element를 사용하여 엄격한 타입 체크를 적용
📢 ReactElement vs JSX
ReactElement
- React 컴포넌트, HTML 태그, 텍스트 등의 요소
- React 의 createElement 함수에 의해 생성
- React 가 화면에 렌더링 가능한 객체 형태
JSX
- JS 의 확장 문법
- HTML 과 유사한 구문을 사용하여 React 요소를 작성
- Babel과 같은 트랜스파일러에 의해 React.createElement 함수 호출
결론
- JSX 는 HTML 과 유사한 문법을 사용하여 ReactElement 를 쉽게 작성
가능하게 해주는 자바스크립트의 확장 문법, 최종적으로 모두 ReactElement 로 변환
- ReactElement 타입을 직접 사용하는 경우는 드뭅니다.
- 대부분의 경우, ReactNode나 JSX.Element가 더 적합합니다.