✅ 기본 Syntax
useState<number>()state의 type을 지정할 때에는 위와 같이 Generics안에 타입을 지정해주면 된다. 그런데 사실 초기값을 지정해주면 알아서 타입을 유추하기 때문에 굳이 지정해주지 않아도 무방하다.
다만, 다음과 같은 경우에는 Generics을 사용하는 것이 좋다.
⏩ 상태가 null일 수도 있고 아닐수도 있을때
type Information = { name: string; description: string };
const [info, setInformation] = useState<Information | null>(null);댓글란을 만들고 있는 나의 경우에는, 유저의 로그인 여부에 따라 userInfo 의 값이 null이 될 수도 있기 때문에 아래와 같이 작성해주었다.
export interface IUserInfo {
userid: string | undefined;
username: string | undefined;
}
const [userInfo, setUserInfo] = useState<IUserInfo | null>(null);⏩ 상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때
type Todo = { id: number; text: string; done: boolean };
const [todos, setTodos] = useState<Todo[]>([]);배열인 경우에는 해당 배열이 어떤 타입으로 이루어진 배열인지 추론할 수 있도록 Generics을 명시하는 것이 좋다.
*** Reference: https://velog.io/@velopert/using-hooks-with-typescript
