React Custom Hook & TypeScript

CustomHook(userinput)

import { Dispatch, SetStateAction, useCallback, useState, ChangeEvent } from 'react';

type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch<SetStateAction>];

const useInput = (initialData: T): ReturnTypes => {
const [value, setValue] = useState(initialData);
const handler = useCallback((e: ChangeEvent) => {
setValue((e.target.value as unknown) as T);
}, []);
return [value, handler, setValue];
};

export default useInput;

커스텀 훅을 통해 hook 사용 시 커스텀하게 바꿔서 사용할 수 있다.
또한 이번에 채팅기능 도입을 위해 타입스크립트를 공부하고 있는데 타입스크립트 같은 경우 매개변수와, 리턴값, 변수명에 타입을 적어줘야 된다. 따라서
커스텀 훅에 타입을 선언하여 다른 컴포넌트딴에서 사용한다면 많은 변수들을 여러번 타입을 선언 할 필요없이 효율적인 코드 작성이 가능하다.

 const [email, onChangeEmail] = useInput('');

이런식으로 email에 커스텀 훅을 사용하면 email이 어떤 타입인지 자동으로 인식하게 된다 !!