[최종프로젝트] 커스텀인풋 (UseInput)

hook

useInput.ts

• 제네릭 타입으로 확장
• 키에는 영향을 안 주고 값에만 확장이 가능함
• 애초에 인터페이스 값이 언노운이면 의미 없음

import { ChangeEvent, useCallback, useState } from "react";

interface initialFormType {
  [key: string]: unknown;
}
// 하지만 이미 값이 unknown(모든 타입 허용)인 경우, 아래처럼 제네릭타입으로 확장해주지않아도된다.

const useInput = <T extends initialFormType>(initialForm: T) => {
  // <T extends initialFormType> = initialFormType 타입을 제네릭 타입으로 확장한다
  // (타입이 확정된게 아닌, unknown처럼 다른 타입을 넣을 수 있다)
  // 제네릭 타입 확장은 값에만 영향을 주기 때문에 키는 동일하게 string으로 유지된다
  const [form, setForm] = useState<T>(initialForm);

  const onChange = useCallback(
    (
      e:
        | ChangeEvent<HTMLInputElement>
        | ChangeEvent<HTMLSelectElement>
        | ChangeEvent<HTMLTextAreaElement>
    ) => {
      const { name, value } = e.target;
      setForm((preForm) => ({ ...preForm, [name]: value }));
    },
    []
  );
  const reset = useCallback(() => setForm(initialForm), [initialForm]);

  return { form, setForm, onChange, reset };
  // 원래는 배열로 감싸 리턴했지만, 반환하는 값의 관계를 명확하게 하고자 객체 리턴
};

export default useInput;

 

커스텀 인풋 사용 시 객체 리턴이기 때문에 아래와 같이 사용하면 됨

 const {
   form: todoInput,
   setForm: setTodoInput,
   onChange,
   reset,
 } = useInput(init);