[typeScript] useState 타입 동작

박소정·2023년 3월 19일
1
post-thumbnail

useState에 타입 적용하기

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

제네릭 타입으로 넘기면 타입스크립트가 usestate의 초기값으로 타입 추론!

const [name, setName] = useState()
만약, 초기값이 없다면 undefined로 설정

example

초기값이 설정되어 있다면 초기값의 타입을 추론해서 state와 setState의 타입을 결정하는데,
초깃값과 다른 타입의 데이터를 setState의 인자로 넘기면 에러가 발생!
이런 경우에는 제네릭 타입으로 설정해 주어야 함.

const Test = () => {
	const [title, setTitle] = useState<string | null>(null);
    
    const handleChange = (e) => {
    	setTitle(e.target.value);
        }
    
    return <input value={title} onChange={handleChange} />
    };

0개의 댓글