React , TypeScript | 커스텀 훅 만들기, 제너릭 generics

커스텀 훅이란?

코드의 반복을 피하고 재사용성을 높이기 위해서 사용한다

 

사용 방법

우선 커스텀 훅은 항상 use로 시작해야 한다.

 

 

예제는 다음과 같다.

 

[useInput.tsx]

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

const useInput = <T = any>(initialData: T): [T, (e: any) => void, Dispatch<SetStateAction<T>>] => {
  const [value, setValue] = useState(initialData);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler, setValue];
};
export default useInput;

 

✅ T는 제러닉이다

<T>가 적힌 타입들의 의미는 initialData로 string이 오면 T가 자동으로 string이 되고, 리턴값도 string이 된다는 뜻이다. (이 부분이 any 타입과의 차이! any로 작성하면 인풋값과 아웃풋 타입이 다를 수 있음)

 

✅ 코드를 보면 알 수 있 듯 리턴값으로 JSX가 아닌 object나 배열값을 리턴한다.

 

✅ 커스텀 훅을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다.

 

 

 

import useInput from '@hooks/useInput';

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

커스텀 훅을 import 해서 반복되는 코드를 줄일 수 있다

 

 

커스텀 훅 만들 시 주의사항

• 커스텀 훅을 사용하지 않아도 되는 부분에서 조차 사용하지 않았는가?
• 만들어진 커스텀 훅은 한 가지 기능만을 하고 있는가?
• 혹시 사이드 이펙트를 일으킬 부분이 있지 않는가? 여러가지 경우의 수를 생각해서 작성할 것