FC란?

• FunctionComponent 타입의 줄임말
• React + Typescript 조합으로 개발할 때 사용하는 타입
• 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입

함수형 컴포넌트로 넘어오면서 쓰게 된 타입인데, 여러 문서에서는 FC 타입의 사용을 권장하지 않는다. 그 이유를 알아보고 FC를 대체할 방안도 함께 알아보자.

FC 타입의 사용 방법

FC 타입은 주로 다음과 같은 형태로 사용한다.

interface AppProps {
  name: string;
}

// 인자 props의 타입인 AppProps를 props 옆에 붙이지 않고 React.FC 옆에 붙인다 
const App: React.FC<AppProps> = (props) => {
  return <div>hello {props.name}</div>
}

단점

1. children prop이 옵셔널로 포함되어 props 타입이 명확하지 않다.

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

FC 타입가 가지고 있는 children props는 옵셔널(optional) 속성이어서 꼭 전달받지 않아도 된다. 하지만 FC 타입 사용 시 따로 children의 필요 여부를 알릴 방법이 없기 때문에 다른 동료들 모두가 FC 타입의 이러한 특징에 대해 알고 있지 않다면 협업 시 그다지 좋지 않다.

const App: React.FC = () => {};

const Example = () => {
	<App><div>hello</div></App>
}

위의 소스에서 컴포넌트는 별도의 props를 가지고 있지 않음에도 children으로 무리 없이 <div>hello</div>을 받고 있다. 즉, 실제로는 props를 받고 있으면서도 따로 이를 명시해주지 않아도 에러가 발생하지 않는 것이다.

React에서는 이러한 점을 조금이나마 해결하기 위해 명시적으로 props에 children의 표시 여부를 나타내주는 PropsWithChildren, PropsWithRef 등의 헬퍼 타입을 제공하고 있다.

다소 애매한 사용성을 지닌 FC보다는 위와 같은 타입들을 통해 타입 선언을 해주는 것이 더 낫다.

2. 타입스크립트의 제네릭 문법을 지원하지 않는다.

type GenericComponentProps<T> = {
   prop: T
   callback: (t: T) => void
}

const GenericComponent = <T>(props: GenericComponentProps<T>) => {/*...*/}

제네릭 문법을 활용하여 props를 사용할 경우, FC 타입을 사용하면 컴포넌트에 제네릭 값을 전달할 수 있는 방법이 따로 없다.

3. defaultProps 속성이 적용되지 않는다.

FC 타입으로 선언된 컴포넌트에서는 defaultProps가 정상적으로 동작하지 않는다. 즉, defaultProps을 사용하여 props의 초기값을 설정해도 값을 인식하지 못한다.

대안적인 방법

가장 일반적이고 간단한 방법은 props 옆에 타입을 정의해 주는 것이다.

interface AppProps {
  name: string;
}

const App = (props: AppProps) => {};

children이나 ref의 여부를 명확하게 표현하고 싶다면 PropsWithChildren, PropsWithRef 등의 헬퍼 타입을 사용하는 것도 도움이 된다.

interface ContentProps {
  style?: CSSProperties;
}

// PropsWithChildren로 children의 타입을 정의해준다.
const Content = ({ children, style = {} }: PropsWithChildren<ContentProps>) => {
  return (
    <div style={style}>
      {children}
    </div>
  );
};