useState가 반환하는 setState의 타입은 어떻게 설정할까?

👻useState의 setState 타입을 어떻게 설정해야할까?

이런 부분들은 이해가 어렵다기보다는

자주 사용하지 않다보면 기억이 안나는 경우가 많은 것 같습니다.

간단하게 예제를 작성 하면서 알아보도록 하겠습니다.

import {useState} from 'react'
import HiReactItems from '대충 경로'
const HiReact = () => {
  const [state, setState] = useState(false)
  
  return (
    <HiReactItems setState={setState} />
  )
}

이렇게 작성은 해두었는데... 이걸 쉽게 생각을해서 타입을 받는다 치면

interface StateProps {
  setState: (state:boolean) => void
}

이렇게 작성을 할 수 있겠죠?

하지만 좀 더 타입을 멋지게 작성을 하면 이렇게 작성을 할 수 있습니다.

import { Dispatch, SetStateAction } from 'react';

이 두 타입을 react에서 import해올 수 있습니다.

그냥 마음 편하게 구조분해할당을 하는게 아니라 react에서 제공하는 객체를 전부 받아오셔도 상관없습니다.

interface Props {
	setState: Dispatch<SetStateAction<boolean>>;
}

Dispatch의 제네릭으로 SetStateAction을 전달하고

SetStateAction의 제네릭으로 내가 사용하는 useState의 상태 타입을 전달해주면 됩니다.