🖋️ 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>;
};

// Usage
const App: React.FC = (): ReactElement => {
  return <Button label="Click me" />;
};

• @ JSX.Element

  • 설명

    • React의 JSX 문법을 통해 생성된 요소의 타입
    • ReactElement와 비슷하지만 조금 더 구체적

  • 사용시기

    • JSX 요소를 반환하는 경우 사용

  • 장점

    • JSX 요소에 더 특화된 타입을 제공

  • 단점

    • 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가 더 적합합니다.