Typescript에서 useState를 props로 넘기는 법

useState로 선언한 setValue를 컴포넌트에 props로 넘기고 싶은데

아래처럼 코드를 짜면 Typescript에서는 타입 경고가 뜬다!

// ParentComponent.tsx

const [value, setValue] = useState<boolean>(true);

// ...

return (
  <SomeComponent setValue={setValue} />
);

 

// SomeComponent.tsx

interface SomeComponentProps {
  setValue: () => void;
}

// ...

 

이 때 저 ParentComponent.tsx의 setValue에 마우스를 올리면

이런 친절한 가이드가 나오는데, 이대로 인터페이스 타입 세팅을 수정해주면 된다.

// SomeComponent.tsx

import { Dispatch, SetStateAction } from 'react';

interface SomeComponentProps {
  setValue: Dispatch<SetStateAction<boolean>>;
}

// ...

참고로 인터페이스의 boolean은 value의 타입을 세팅해주면 된다.

대부분의 타입스크립트 타입 관련 에러나 경고는 가이드를 따라서 설정해주면 거의 해결된다.