[React][TypeScript] TypeScript + React State 적용해보자(useState)

이번 포스팅에서는 TypeScript를 이용해서 Component의 State를 바꾸는 것을 알아볼 것 이다. 

 

useState HOOK은 React에서 쓰는 방법과 동일하다

function Circle({ bgColor,borderColor }: CircleProps) {
    const [counter, setCounter] = useState(1);
    return <Container bgColor={bgColor}  borderColor={borderColor ?? "red"}/>
}

근데 여기서 state의 defalut 값을 '숫자 1' 로 주면 아래 사진과 같이 typeScript는 앞으로 counter이라는 state는 int로만 접근을 해야한다 라고 인식을 한다. 

예를 들어서) defalut를 bool 값을 넣으면 boolean으로 인식하고 string값을 넣으면 string으로 인식하는 것 이다.