[TS] useState type

기존 useState를 작성한 React 파일을 TypeScript 파일로 변환하는 작업을 진행했다.

 

아래 코드처럼 선언 후 이용한 출력되는 article. 에서 다 오류가 났다.

const [article, setArticle] = useState({});
...

return(
...
	<span> [ 사용자 ID : {article.id} ] </span>
...
)

 

이를 TypeScript를 적용하여 아래 코드로 작성하자 해결되었다.

초기 state값이 {}로 줬더니 아래 코드에서 err가 나서 null로 변경해준 후, 밑에 출력되는 코드에서 article?.id와 같이 ?를 붙여 옵셔널체이닝을 시켜줬더니 적용되었다.

interface articleInterface {
  id: number;
  ...
}


const [article, setArticle] = useState<articleInterface | null>(null);
...

return(
...
	<span> [ 사용자 ID : {article?.id} ] </span>
...
)