타입스크립트로 작성하다 보면 경우에 따라 타입 선언 방식의 차이가 보인다.

 

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 케이스 작성 방식을 선호하는 추세라고 하고, 가독성과 정확성이 우수해보인다.

+ Recent posts