[TypeScript] useState에서 type 지정

기본 Syntax

useState<number>()

 

state의 type을 지정할 때는 위와 같이 Generics 안에 타입을 지정해주면 된다.

그런데 사실 초기값을 지정해주면 알아서 타입을 유추하기 때문에 굳이 지정해주지 않아도 무방하다.

 

다만, 다음과 같은 경우에는 Generics을 사용해주는 것이 좋다.

 

상태가 null일 수도 있고, 아닐 수도 있을 때

type Information = { name: string; description: string };
const [info, setInformation] = useState<Information | null>(null);

 

상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때

type Todo = { id: number; text: string; done: boolean };
const [todos, setTodos] = useState<Todo[]>([]);

 

배열인 경우에는 해당 배열이 어떤 타입으로 이루어진 배열인지 추론할 수 있도록 Generics을 명시하는 것이 좋다.