문제

코드 상에서 비슷하게 동작하는 input 기능을 커스텀 훅으로 만들어보는 것이 목표였다.

  let [toDoTitle, setToDoTitle] = useState(''); // 반복
  let [toDoComment, setToDoComment] = useState(''); // 반복

  const postRequest = (event) => {
	...
    setToDoTitle(''); // 반복
    setToDoComment(''); // 반복
  };
  return (
    	  ...
          /* (e) => setToDoTitle(e.target.value) 반복 */
          <ToDoInput ref={inputRef} onChange={(e) => setToDoTitle(e.target.value)} value={toDoTitle} placeholder="할 일을 입력하세요"></ToDoInput>
		  ...
          <ToDoInput onChange={(e) => setToDoComment(e.target.value)} value={toDoComment} placeholder="내용을 입력하세요"></ToDoInput>
		  ...
  );

반복되는 부분의 로직을 js파일로 따로 빼서 useInput 커스텀 훅으로 만들어 보는 것이 목표

진행

처음에는 위의 그림에서 reset은 넣지 않고 아래 처럼 코딩을 했다.

  const setStateHandler = useCallback((event) => {
    const { name, value } = event.target;
    setState((prev) => ({ ...prev, [name]: value }));
    setState('');
  }, []);

이렇게 되면 onChange가 될 때, 계속 setState('')가 실행되기 때문에 값이 입력되지 않는다. 따라서 reset해주는 함수를 따로 만들어서 따로 빼주고 return 했다.

...

const useInput = (intivalValue) => {
  ...
  const reset = useCallback(() => setState(intivalValue), [intivalValue]);
  return [state, setStateHandler, reset];
};

export default useInput;

그리고 AddInput.jsx에서 중복으로 사용되는 useInput을 객체로 만들어서 useInput에 값을 한번에 넣었다.

let [toDoTitle, setToDoTitle, resetTitle] = useInput('');
let [toDoComment, setToDoComment, resetComment] = useInput('');

최종

AddInput.jsx

...
let [toDoText, setToDoText, resetToDoText] = useInput({ title: '', comment: '' });
...

resetToDoText();
...

useInput.js

import { useState, useCallback } from 'react';

const useInput = (intivalValue) => {
  const [state, setState] = useState({ title: '', comment: '' });
  const setStateHandler = useCallback((event) => {
    const { name, value } = event.target;
    setState((prev) => ({ ...prev, [name]: value })); // 함수형 업데이트 사용
  }, []);
  const reset = useCallback(() => setState(intivalValue), [intivalValue]);
  return [state, setStateHandler, reset];
};

export default useInput;

react의 hook들을 조합해서 커스텀 hook을 만들어봤는데 아직 react의 훅들 사용이 미숙함을 많이 느꼈다.