문제 상황

React로 프로젝트를 진행하다보면 useState의 setState 부분을 다른 컴포넌트에 props로 전달 할 때가 있다.
Typescript에서는 props로 전달되는 것들의 타입을 항상 지정해줘야하는데 setState의 경우는 어떤 타입을 명시해줘야할까?

적용

아래와 같은 상황이라고 가정해보자.
어떤 컴포넌트에서 Pagenation이라는 컴포넌트를 불러와 사용 중인데,
props로 useState에서 만든 변수들을 넣어줬다.

const [slideIndex, setSlideIndex] = useState(1);

<Pagenation setSlideIndex={setSlideIndex} slideIndex={slideIndex} />

Typescript는 props를 받아서 사용하는 컴포넌트에서 props의 타입을 지정해줘야한다.
Pagenation.tsx 파일에서 아래와 같이 선언해주자.

interface PagenationBtnType {
  slideIndex: number;
  setSlideIndex: React.Dispatch<React.SetStateAction<number>>;
}

slideIndex는 초기값이 들어가는 쪽이기 때문에, 단순하게 number로 지정한다.(문자열이면 string, 논리형(true, false)이면 boolean 등등...)
하지만, setSlideIndex는 위와 같이 작성해줘야한다.
SetStateAction 뒤에 제네릭 타입으로 number가 작성되어있는 것을 볼 수 있다.
즉, 저 부분에는 slideIndex와 같은 자료형을 넣어줘야한다.

결론

setState의 타입은 다음과 같다.

React.Dispatch<React.SetStateAction<state의 타입>>;

참고 자료

참고 자료