[TypeScript] 타입스크립트에서 React Functional Component 사용하기

React.FC 타입을 사용할 때

장점

첫 번째, 기본으로 props 값에 children props가 탑재되기 때문에 

type 또는 interface에 children: React.ReactNode를 설정해주지 않아도 된다.

 

 

두 번째, contextTypes, defaultProps, displayName 등 자동완성이 된다.

 

 

하지만 단점도 존재한다.

다음 코드에 mark 속성에 defaultProps를 설정해줬지만 에러가 난다.

즉, defultProps가 제대로 동작하지 않는다.

이 문제는 선택속성으로 바꿔줘야 에러를 해결할 수 있다.

import React from "react";

type GreetingsProps = { name: string; mark: string };

const Greetings: React.FC<GreetingsProps> = ({ name, mark }) => {
  return (
    <div>
      {name} {mark}
    </div>
  );
};

Greetings.defaultProps = {
  mark: "!"
};

export default Greetings;

 

또한 선택 속성의 defaultProps를 설정해줬는데도 undefined일수도 있다고 뜬다.

 

 

그래서 배열은 다음과 같이 사전에 유효한지 체크한후 배열 내장함수를 사용할수있다.

import React from "react";

type GreetingsProps = {
  name: string;
  mark?: string;
  arr?: number[];
};

const Greetings: React.FC<GreetingsProps> = ({ name, mark, arr }) => {
  
  if (!arr) return null;
  arr.map((item) => console.log(item));

  return (
    <div>
      {name} {mark}
    </div>
  );
};

Greetings.defaultProps = {
  mark: "!",
  arr: [1, 2, 3]
};

export default Greetings;

 

React.FC에서 defaultPops를 사용할려면 비구조화 할당하는 단계에서 사용해야한다.

 

 

React.FC 타입을 사용하지 않고 function 키워드로 일반 함수를 사용했을 때

defaultProps가 잘 동작하는 것을 확인 할 수있다.

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
};

function Greetings({ name, mark }: GreetingsProps) {
  return (
    <div>
      {name} {mark}
    </div>
  );
}

Greetings.defaultProps = {
  mark: "!"
};

export default Greetings;