[240925 TIL] ReactNode, FC(gpt 질의)

React.FC와 React.ReactNode는 React에서 각각 다른 목적을 가진 타입입니다. 두 타입의 차이를 이해하면 타입스크립트로 React 애플리케이션을 개발할 때 보다 명확하게 타입을 지정할 수 있습니다.

React.FC (React.FunctionComponent)

• 설명: React.FC는 함수형 컴포넌트를 정의할 때 사용하는 타입입니다.
• 용도: 컴포넌트의 props 타입을 지정하고, 해당 컴포넌트가 React 요소를 반환한다는 것을 명시합니다.
• 특징:
  • 제네릭 타입으로 Props의 타입을 지정할 수 있습니다.
  • 기본적으로 children 프로퍼티를 포함하고 있습니다.
  • 컴포넌트의 반환 타입이 ReactElement임을 명시합니다.
• 예시:

import React from 'react'; 

interface MyComponentProps { 
	title: string; 
} 

const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => ( 
    <div>
        <h1>{title}</h1> 
        {children}
    </div> 
);

React.ReactNode

• 설명: React.ReactNode는 React에서 렌더링 가능한 모든 요소를 나타내는 타입입니다.
• 용도: 컴포넌트의 반환 값이나 props의 타입을 지정할 때 사용합니다.
• 특징:
  • 문자열, 숫자, React 요소, 배열, Fragment, Portal, null, undefined 등을 포함합니다.
  • 즉, React에서 렌더링할 수 있는 모든 것의 합집합입니다.
• 예시:

import React from 'react'; 

interface MyComponentProps { 
	content: React.ReactNode; 
} 

const MyComponent = ({ content }: MyComponentProps) => ( 
	<div> {content} </div> 
);

주요 차이점 요약

• 타입의 목적:
  • React.FC는 컴포넌트 자체의 타입을 정의하는 데 사용됩니다.
  • React.ReactNode는 컴포넌트가 반환하거나 렌더링할 수 있는 값의 타입을 나타냅니다.
• 사용 위치:
  • React.FC는 컴포넌트를 선언할 때 타입으로 지정합니다.
  • React.ReactNode는 props나 state의 타입으로 지정하여 해당 값이 무엇이든 렌더링될 수 있음을 나타냅니다.
• 예시 비교:

//React.FC를 사용하는 컴포넌트 정의

const ComponentWithFC: React.FC = () => { 
	return <div>Hello World</div>; 
}; 

// React.ReactNode를 props로 받는 컴포넌트 정의

interface Props { 
	footer: React.ReactNode; 
} 

const ComponentWithNode = ({ footer }: Props) => { 
    return ( 
        <div>
            {footer}
        </div> 
    ); 
};

추가 참고 사항

• React.FC 사용에 대한 고려사항:
  • React.FC를 사용하면 자동으로 children prop이 포함되므로, 의도치 않게 children이 사용될 수 있습니다.
  • 최근에는 React.FC 사용을 지양하고, 함수형 컴포넌트를 직접 작성하면서 반환 타입을 추론하도록 하는 경우도 많습니다.
• 실제 사용 예시: 이 경우 타입스크립트는 함수의 반환 타입을 자동으로 추론합니다

// React.FC를 사용하지 않고 컴포넌트 정의 

interface ButtonProps { 
	onClick: () => void; 
    label: string; 
} 

const Button = ({ onClick, label }: ButtonProps) => ( 
	<button onClick={onClick}>{label}</button> 
);

 

결론적으로, React.FC는 컴포넌트의 타입을 정의하는 데 사용되며, React.ReactNode는 컴포넌트가 렌더링할 수 있는 모든 종류의 값을 나타내는 타입입니다. 상황에 맞게 적절한 타입을 사용하여 타입 안정성과 코드의 명확성을 높일 수 있습니다.

 

 

참고링크