Typescript (4) useState

useState를 쓸 때는 따로 type 지정을 해줄 필요가 없다

 

예) Default value를 0으로 지정해 줌으로써 state의 type이 number로 지정된다

import { useState } from "react";

function Square() {
  const [counter, setCounter] = useState(0);
  setCounter(5);
  setCounter("hi");

  return <div></div>;
}

export default Square;

이런 식으로 useState의 default value의 type에 따라 state type도 같이 지정이 된다

따라서 setCounter(5)를 할 경우 에러가 나지 않고

setCounter("hi")를 할 경우에 에러가 나게 된다

하지만 내가 state의 값을 number or string으로 지정하고 싶으면 방법이 있는데

 

예)

import { useState } from "react";

function Square() {
  const [counter, setCounter] = useState<number | string>(0);
  setCounter(5);
  setCounter("hi");

  return <div></div>;
}

export default Square;

예시와 같이 이렇게 state의 type을 지정해 주면 setCounter("hi")도 에러가 나지 않는 걸 볼 수 있다