타입스크립트 리액트에 적용하기

useState타입지정

const [isFilter, setIsFilter] = useState<boolean>(false);
const [shoesData, setShoesData] = useState<ShoesData[]>([]);

state의 타입지정은 위와 같이 제네릭으로 지정한다.
ShoesData는 미리 만들어 둔 interface다. shoesData에는 ShoesData형식의 객체로 채워진 배열이 들어온다

props타입 지정(setState함수, 일반 함수)

interface Props {
  setIsFilter: React.Dispatch<React.SetStateAction<boolean>>;
  sortReset: () => void;
  clickSort: (isSelected: string) => void;
}


const FilterAndSort: FC<Props> = ({ setIsFilter, sortReset, clickSort }) => {
  
 //컴포넌트 안에 들어올 내용
  
}

FC는 react안에 저장되어있는 모듈로 FunctionComponent라는 뜻이다.
컴포넌트의 타입지정법이다.
props의 타입지정은 FC뒤에 제네릭으로 한다.

함수컴포넌트 위에 interface로 props로 들어오는 인자들의 타입지정을 해준다.

처음엔 props로 함수를 받아오는 방법을 잘 몰라서 많은 고민을 했다.
처음에는 그냥 반환하는 타입만 지정해주면 되는 줄 알고 다음과 같이 작성했었다.

interface Props {
  sortReset: void;
}

위와 같이 작성했을 때 다음과 같은 오류를 반환해주었다..
()=> void형식은 void형식에 할당할 수 없습니다....

도대체 뭐가 문제인지도 몰랐다..
()=>void와 void의 차이가 뭐길래...

고민하다 보니 props로 받는 함수의 타입지정은 어떠한 타입을 받아서 어떠한 타입을 반환하는지를 알려줘야 하는 듯 했다.

void는 그냥 string boolean과 같은 타입일 뿐이었고,,
함수인 것을 알려주려면 ()=> string과 같은 식으로 함수라는 것을 알려주어야 하는 것 같았다.

interface Props {
  setIsFilter: React.Dispatch<React.SetStateAction<boolean>>;
}

setState함수를 props로 넘겨주는 곳에 마우스를 갖다 올려주면 타입을 상세하게 알려준다..
(오류를 알려주는 것도 상당히 친절한 편...)