React.FC

최종 수정 : 2024-05-24

FC란

Function Component 타입의 줄임말로, React + TypeScript 조합으로 개발할 때 사용하는 함수형 컴포넌트에 타입 선언에 사용한다.

/** React.FC의 타입정의 */
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactNode;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

보는 바와 같이,

• React에서 렌더링 가능한 모든 종류의 노드를 나타내는 ReactNode를 반환한다.
• props가 비어 있는 객체( { } )로 타입이 지정되어 있어, 오해를 일으킬 수 있다. 따라서, 더 명시적으로 Props의 타입을 정의하는 것이 안정적이다.
• propTypes는 주로 개발 중에 사용되며, 런타임에서는 무시되는 컴포넌트의 props에 대한 유효성 검사를 위한 propTypes 속성이 정의되어 있다.
• defaultProps 속성이 존재한다. 오버라이딩하는 데 문제가 발생할 수 있음을 의미한다.
• 개발자 도구에서 컴포넌트의 이름으로 표시되는 displayName 속성이 있다.

---

React.FC

import React from 'react';
type GreetingsProps = {
  name: string;
};
const Greetings: React.FC<GreetingsProps> = ({ name }) => (
  <div>Hello, {name}</div>
);
export default Greetings;

React.FC를 사용하면 props의 타입을 Generics로 넣어서 사용한다. 이에 대해 React.FC로 타입을 지정하는 것을 지양해야 한다는 얘기가 나오기도 한다.

 

왜 그럴까?

1. React.FC를 사용하면 props에 기본적으로 children이 들어 있기 때문이다.

// React.FC 사용
export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello {name} </h1>
}

const App = () => (
  <>
    <Greeting name="Stefan">
      <span>{"I can set this element but it doesn't do anything"}</span> // children 전달
    </Greeting>
  </>
)

 

얼핏 보면 장점처럼 보이지만 정확한 타입을 지정해 코드의 안전성을 향상시킨다는 취지에서, FC를 사용하면 컴포넌트에 children이 있을 수 있다는 것을 가정하여 언제든지 children의 타입 지정 없이 전달 가능하므로 타입이 명확하지 않다는 단점이 있다.

 

따라서, 굳이 React.FC를 사용하지 않고 interface로 Props의 타입만 만들어 사용한다.

---

참고 자료

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%B3%B4%EA%B8%B0

[TypeScript] React.FC에 사용에 대해 생각해보기

https://fedev-kim.medium.com/react-react-react-fc-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%83%80%EC%9E%85-e20ddb28a95a

[React] React React.FC | 함수형 컴포넌트 타입

https://www.inflearn.com/questions/1113860/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%ED%95%98%EB%A9%B4%EC%84%9C-react-fc%EB%9D%BC%EB%8A%94-%EA%B2%83%EC%97%90-%EC%A7%88%EB%AC%B8%EC%9D%B4-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4