[React] 리액트에서 TypeScript를 쓸 때 필요한 것 (feat. useState)

fetch나 axios로 data를 fetching 한다면 위와 같이 state를 만들고 데이터를 받아온 이후 setState를 이용해 데이터를 갱신해 주어야 할 것입니다.

 

타입스크립트를 적용한 프로젝트에서 위 같이 쓸 경우에는 state를 사용할 때 오류가 날 수 있습니다.

 

state가 객체라면 

 

state.value와 같이 접근할텐데 이 부분에서 타입스크립트가 오류로 감지합니다.

 

useState({})만을 입력한다면 타입스크립트는 {} 만으로는 타입 추론을 할 수 없습니다.

 

만약 boolean과 같이 타입이 확실한 값을 주었다면 오류가 생기지 않습니다.

 

해결방법

any가 추가되면 문제가 해결이 됩니다.

 

혹은

 

위와 같은 Interface( 위의 코드와는 상관 없는 코드) 를 선언해서

<any> 대신 써주면 되는데

 

그 때는 interface 안에 서버에서 받아올 데이터들이 string인지 int 인지 판단해서 바로 위 코드의 coinId와 같이 하나씩 입력을 하면 됩니다.

 

만약 interface 이름이 "Iinfo"라면 

 

useState<Iinfo>와 같이 사용할 수 있겠습니다.