타입스크립트로 state 관리하기

📋 타입스크립트에서의 useState

useState 사용법은 리액트와 동일하다.

타입스크립트에만 존재하는 특징을 살펴보자.

1. state 타입 추론

useState의 초기값을 지정해주면 타입스크립트는 state의 타입을 자동으로 추론해준다.

초기값이 문자열일 경우 string, 숫자일 경우 number로 추론된다는 것이다.

그렇기에 초기값의 타입과 다른 타입으로 값을 변경하려고 하면 오류가 발생해 사전에 방지할 수 있다.

const [state, setState] = useState(0);

setValue(10);
setValue("aaa");  // error

2. 타입 명시

이런 경우는 드물겠지만 초기값과 변경된 값의 타입이 다를 수 있다.

제네릭을 활용하면 지정한 타입으로 상태값을 변경할 수 있다.

1번 방식과 마찬가지로 적합하지 않은 타입은 에러가 발생한다.

const [state, setState] = useState<string | number>(0);

setState(10);
setState("aaa");
setState(true);   // error