React Hooks들은 제네릭 타입 함수로 구현되어있다. 각 hook들이 어떤 타입들을 받는지 알아보자.
useState
export function useState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
const dispatcher = resolveDispatcher();
return dispatcher.useState(initialState);
}
TypeScript
복사
Example
initialState가 들어가 있으면 타입유추가 가능하기 때문에 타입을 생략하고 작성하여도 된다.
const [data, setData] = useState<string>('')
const [data, setData] = useState('')
const [data, setData] = useState([]) // 빈배열을 넣으면 타입이 Object로 나온다
TypeScript
복사
useEffect
export function useEffect(
create: () => (() => void) | void,
deps: Array<mixed> | void | null,
): void {
const dispatcher = resolveDispatcher();
return dispatcher.useEffect(create, deps);
}
TypeScript
복사
Example
deps에는 다양한 타입이 들어올 수 있다.
TypeScript
복사
useRef
export function useRef<T>(initialValue: T): {|current: T|} {
const dispatcher = resolveDispatcher();
return dispatcher.useRef(initialValue);
}
TypeScript
복사
useCallback, useMemo
export function useCallback<T>(
callback: T,
deps: Array<mixed> | void | null,
): T {
const dispatcher = resolveDispatcher();
return dispatcher.useCallback(callback, deps);
}
export function useMemo<T>(
create: () => T,
deps: Array<mixed> | void | null,
): T {
const dispatcher = resolveDispatcher();
return dispatcher.useMemo(create, deps);
}
TypeScript
복사
