[React.js] useInput 커스텀 Hooks 사용시 input 창 두 개 이상일 경우 앞서 작성한 내용이 사라지는 현상??

https://react.vlpt.us/basic/21-custom-hook.html

21. 커스텀 Hooks 만들기 · GitBook

"벨로퍼트와 함께하는 모던 리액트"로 학습 중에 궁금한 점이 있었다. useState의 setForm의 파라미터로 객체를 넣는 경우와 콜백함수를 넣는 경우에 어떤 차이점이 있을까? 테스트 결과 객체를 파라미터로 넣을 경우 useInput 커스텀 Hooks로 input 창을 두 개 이상 사용할 시 앞서 input 창에 작성한 내용이 초기화되었다. 테스트한 코드는 다음과 같다. 왜 이러한 차이가 발생하는지 알아봐야겠다!

import { useCallback, useState } from "react";

function useInput(initialForm) {
  const [form, setForm] = useState(initialForm);
  const onChange = (e) => {
    const { name, value } = e.target;
    setForm((form) => ({ ...form, [name]: value })); // 객체를 파라미터에 넣는 경우, 콜백함수를 파라미터에 넣는 경우의 차이점??
    // setForm({ ...form, [name]: value }); // 객체를 파라미터에 넣는 경우, 콜백함수를 파라미터에 넣는 경우의 차이점??
  };
  const reset = useCallback(() => setForm(initialForm), [initialForm]); // useCallback 적용 안할 시 Too many re-renders 발생
  return [form, onChange, reset];
}

export default useInput;

 

---

2023-04-23 추가

아래의 코드와 같이  setForm의 파라미터에 콜백함수가 아닌 객체를 넣었고, reset 함수의 경우에도  useCallback 훅을 사용하지 않았음에도 불구하고 전혀 문제가 없었다. 그렇다면 왜 그때는 위와 같은 문제가 발생했던 것일까? 이 문제는 계속 고민해 봐야겠다!

import { useState } from "react";

const useInput = (initialForm) => {
  const [form, setForm] = useState(initialForm);
  const onChange = (e) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };
  const reset = () => setForm(initialForm);
  return [form, onChange, reset];
};

export default useInput;