[React]CustomHook (재활용성 form만들기)

import { useState } from "react";

const useForm = (initialState = {}) => {
  const [formData, setFormData] = useState(initialState);

  const InputChangeHandler = (e) => {
    const { name, value } = e.target;

    setFormData({ ...formData, [name]: value });
  };

  return {
    formData,
    InputChangeHandler,
  };
};
export default useForm;

Custom Hook을 이용해 form을 만들때 재활용이 가능하게 만들어봤다.

• 우선 initaialState의 Default 값을 빈 객체로 만들어 formData의 기본값으로 넣어준다.
• Input값들을 업데이트 해주는 함수 InputChangeHandler 를 만들어 준다.
• event 객체를 이용해 name과 value를 구조분해할당(destructuring) 해주고 setFormData에 기존의 formData와 사용할 컴포넌트의 name[key]과 value[inputValue]를 할당해주고 formData와 InputChangeHandler를 반환해준다.

 

예시 ex)

 

• useForm을 불러와서 사용할 input 기본값을 작성해주고 handleInputChange함수와 formData를 LoginModal 컴포넌트에 전달

 

• formData에서 해당하는 값을 구조분해할당으로 value에 넣어주고 onChange 함수에 props로 전달된 handleInputChange 함수를 넣어주고 저장한 뒤 콘솔로그에 formData를 찍어보면

• 아주 잘나온다.
• 이런식으로 useForm 이라는 커스텀훅을 만들게 되면 form 을 이용하는 곳에 매번 State와 onChange를 만들 필요가 없다. 아주 좋은 방법인거 같다 👍👍👍