타입스크립트로 작성하다 보면 경우에 따라 타입 선언 방식의 차이가 보인다.
interface AProps {
title: string;
}
// FC: Functional Component
const AComponent: React.FC<AProps> = ({ title }) => {
return (
<h1>{title}</h1>
)
}
interface BProps {
title: string;
}
const BComponent = ({ title }: BProps) => {
return (
<h1>{title}</h1>
)
}
위 A, B 컴포넌트의 props 타입 선언 방식은 조금 다르지만 같은 기능을 수행하는 것처럼 보인다.
가장 큰 차이점은 아래와 같다.
React.FC 선언
- chidren이 prop에 자동으로 포함되고, 사용할 수 있다.
- 반환 타입이 ReactElement 으로 고정되어, 따로 반환 타입을 선언할 필요가 없다.
- 다만 children이 자동으로 포함되기 때문에 children을 반환하지 않는 컴포넌트에서는 사용이 불필요할 수 있다.
직접 선언
- 필요한 prop 만 사용하므로 코드의 의도를 보다 명확하게 표현할 수 있다.
- 반환 타입을 명시하지 않으면 Typescript가 자동으로 추론한다.
- children이 필요하다면 따로 타입 선언을 해주면 된다. ( children: React.ReactNode; )
실제로 더욱 명확한 타입 선언을 위해 B 케이스 작성 방식을 선호하는 추세라고 하고, 가독성과 정확성이 우수해보인다.