[TIL] useState에서 typeScript

 

import { useState } from "react";

function App() {
	const [counter, setCounter] = useState<number>();
    return <div>{counter}</div>;
}

export default App;

 

 

useState 훅은 제네릭을 사용해서 상태의 타입을 지정할 수 있다.

이 코드에서는 counter라는 상태와 그 상태를 업데이트하는 setCounter 함수를 정의하고 있다.

 

 

 

import { useState } from "react";

function App() {
	const [counter, setCounter] = useState<number>("hello");
    return <div>{counter}</div>;
}

export default App;

 

이렇게하면 number 타입을 지정해놓고 문자열을 값에 넣어준것에 에러가 뜬다.

 

 

만약 아무것도 안넣는다면?

import { useState } from "react";

function App() {
	const [counter, setCounter] = useState<number>();
    return <div>{counter}</div>;
}

export default App;

 

이 counter는 number이거나 undefined일수도 있습니다. 라고 뜬다. 

 

import { useState } from "react";

function App() {
	const [counter, setCounter] = useState<number>(1);
    
    const increment = () => {
    	setCounter((prev) => prev++)
    }
    return <div onclick={increment}>{counter}</div>;
}

export default App;

 

이렇게하면 number가 하나씩 올라가게된다.