React.FC와 타입 직접 선언

🦮React.FC란?

React.FC는 React에서 함수형 컴포넌트를 정의하는 TypeScript에서 사용되는 제네릭 타입입니다. React.FC를 사용하여 타입을 명확하게 지정하여 Props에 대한 타입 검사를 수행합니다. 이를 통해 타입의 안정성 유지하고 타입의 잘못된 사용으로 인한 오류를 방지할 수 있습니다.

React.FC<Props> 형태로 사용합니다. 여기서 Props는 해당 컴포넌트가 받아야 할 Props의 타입을 나타냅니다.

예를들어

type NameAgeProps = {
  name: string;
  age: number;
};

const App: React.FC<NameAgeProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

이런식으로 사용합니다. 생각보다 매우 간단..!👍

---

제네릭 타입?

제네릭(Generic)은 TypeScript에서 컴포넌트나 함수를 선언할 때 타입을 매개변수화하는 방법입니다. React.FC<Props>에서 <Props>가 제네릭 문법입니다.

위의 예시 코드에서 React.FC<NameAgeProps>로 선언했기 때문에 App는 <NameAge> 타입의 Props를 받습니다.

제네릭 타입의 단점?

제네릭(Generic) 타입은 defaultProps를 사용할 수 없을 뿐더러, TypeScript와 React의 호환성 문제가 발생하는 경우가 있다고 합니다.

---

🦮직접 선언 방식

최근에는 React.FC를 사용하는 대신 아래와 같이 직접 타입을 선언하는 방식을 더 권장합니다.

type NameAgeProps = {
  name: string;
  age: number;
};

const Student = ({ name, age }: NameAgeProps) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};
  
export default Student;

이렇게 직접 타입을 선언하는 방식은 컴포넌트의 Props 타입 NameAgeProps를 인자로 바로 분해하여 사용합니다. 둘다 사용해 보니 직접 선언 방식이 가독성이 더 좋은 것 같습니다.

정말 당연한 것이지만 Student 컴포넌트를 사용하는 상위 컴포넌트에는(밑의 예시는 App 컴포넌트) 타입을 지정해줄 필요가 없습니다.

  const App = () => {
    return (
        <div className='App'>
            <Student name='taeyoon' age='19'/>
            <Student name='youngjin' age='20'/>
        </div>
    )
}
  
export default App;