Typescript : 리액트 + 타입스크립트 복습 (2) useState의 타입, event의 타입.

useState의 타입

useStat는 초기값을 지정해주면 자동으로 타입이 할당된다.

아래와 같이 Generics타입을 통해 지정해 줄 수 있지만 꼭 필요한 경우가 아니면 해주지 않아도 무방하다.

const [name, setName] = useState<string>()

 

그럼에도 사용하면 좋은 2가지 상황이 있다. 

 

1) 상태가 null일 수도 있고 아닐 수도 있을때,  union타입을 통해 지정해 주는 것이 좋다.

아래와 같이 작성한다면

user라는 state값에 들어올 수 있는 값은 User type을 가진 데이터 혹은 null값이 올 수 있게 된다. 

 

const [user, setUser] = useState<User|null>(null);

// later...
setUser(newUser);

 

2) 복잡한 구조를 가진 객체나 배열일 경우 명시해 주는 것이 좋다. 

 

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

위 코드에서 todos State값에 대한 타입을 지정하지않고,

useState([]) 이렇게 작성 했을 경우 배열이 들어 온다고는 생각 하겠지만,

안에 들어오는 데이터가 어떤 타입을 가지고 있는지 확인이 어렵다.

그렇기 때문에 구체적으로 명시해 주는 것이 좋은 것. 

 

이렇게 state의 타입을 작성해 주면, setState 함수의 type또한 확인 할 수 있어진다.

 

 

프롭스로 전달받는 컴포넌트에서 타입을 지정해 줄 때 이 타입을 가져다 쓰면 된다. 

 

 

 

 

Event의 타입

 

함수를 작성할 때 이벤트를 받아서 작성해야 하는 경우가 많다.

어떤 이벤트일지 타입을 작성해 주어야 한다.

vsCode에서는 사용하는 DOM요소의 이벤트를 focus하면 해당 이벤트의 타입을 보여준다.

 해당 타입을 참고하여 함수 작성시 이벤트의 타입을 작성해 주면 된다.