커스텀 hook을 이용해 입력값 저장하기

import { useState } from "react";

export const useForm = () => {
  const [value, setValue] = useState("");
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return [value, onChange];
};

1. useForm()

내장된 useState, useEffect와 같은 hook을 커스텀하여 재사용성을 높이기 위해 사용

 

2. onChange()

입력된 값을 저장해야되는 input이나 textarea에 onChange함수로 넣어서 입력값의 변경이 이루어질 때마다 함수 실행

입력 요소의 현재값을 매번 value에 저장하는것

 

3. return [ value, onChange ]

입력된 값을 저장하는 value와 입력값을 setValue를 통해 value에 저장하는 onChange 함수가 포함된 배열을 return

 

 

const [answer, onChangeAnswer] = useForm();

useForm에서 return한 배열을 위에 선언한 배열에 분해하여 할당

answer = value = 입력 요소의 현재값

onChangeAnswer = onChange = 입력 요소의 값이 변경될 때 호출하여 answer에 저장

 

이 hook을 이용하여 input이나 textarea에 입력 값에 접근이 가능하게 함