useState 타입 지정하기

📋 useState 타입 지정하기

타입스크립트 환경에서 useState를 사용할 때 state의 타입을 지정해주어야 할 경우가 있다.

const [state, setState] = useState(0);

일반 리액트 환경에서 사용하는 것과 동일한데 제네릭을 사용하지 않아도 자동으로 state의 타입을 유추하기 때문에 제네릭 생략이 가능하다.

그렇다면 제네릭을 써야하는 경우는 언제일까?

현재 open api로부터 받아온 데이터를 배열에 저장하고 있는데 이 작업을 기준으로 설명해보자.

타입스크립트가 없는 환경이라면 아래처럼 사용하면 된다.

• react

const [list, setList] = useState([]);

• typescript

interface CoinItfc {
  id : string;
  name : string;
  symbol : string;
  rank : number;
  is_new : boolean;
  is_active : boolean;
  type : string;
}

const [coinList, setCoinList] = useState<CoinItfc[]>([]);

다양한 타입의 데이터를 갖고 있는 객체나 배열의 경우는 어떤 타입으로 이루어졌는지 추론할 수 있도록 제네릭을 명시해주는 것이 좋다.

추가로 상태값이 null일 수도 있는 상황일때도 사용할 수 있다.

const [info, setInfo] = useState<string | null>(null);

참고

useState 타입 지정