커스텀 훅

지난 게시물 (input 커스텀훅)에서 커스텀훅을 만들어보고 나서 매니저님에게 코드 리뷰를 받았다. 우선 코드를 보면서 설명하자면,

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]); // useCallback을 굳이 사용할 필요가 없을 것 같음..!
  return [state, setStateHandler, reset];
};

export default useInput;

리뷰 내용

1. 커스텀훅이란 본디 사용이 많은 로직(?)들을 커스텀으로 만들어 사용하는 것인데, 이전에 쓴 코드는 내가 useState({title: '', comment: ''})로 지정해버려서 사용범위가 매우 한정적이라는 것이 문제였다. 다양한 input을 하는 곳에서 활용을 하지 못할 것..!
2. reset에서 굳이 useCallback()을 사용할 필요가 없을 것 같다고 하셨다. 자세하게는 모르겠지만, 일단 내가 배워서 기억하는걸로 유추를 해보자면 useCallback() 훅은 함수를 메모이제이션하는 훅이다. 리뷰를 받고나서 다시 생각해보니 굳이 state를 초기화하는 로직을 메모이제이션할 필요가 없다고 느껴졌다.

코드 수정

따라서 아래와 같이 수정하였다..!

hook > useInput.js

import { useState, useCallback } from 'react';

const useInput = (initialValue) => {
  // 초기값을 넣어줘야 아래의 setState가 정상적으로 동작함
  const [state, setState] = useState(initialValue);

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

  const reset = () => {
    setState(initialValue);
  };
  return [state, setStateHandler, reset];
};

export default useInput;

src > components > AddInput.jsx

...

//초기값을 넣어주고, 구조분해할당으로 key값을 받아와 사용!
let [{ title, comment }, setToDoText, resetInput] = useInput({ title: '', comment: '' });

...

const postRequest = (event) => {
  
  ...
  
  resetInput();
};

...

return (
  <>
    <FormContainer action="/" onSubmit={postRequest}>
      <InputContainer>
        <InputHead>To Do</InputHead>
        <ToDoInput ref={inputRef} onChange={setToDoText} value={title} name="title" placeholder="할 일을 입력하세요"></ToDoInput>
      </InputContainer>
      <InputContainer>
        <InputHead>Comment</InputHead>
        <ToDoInput onChange={setToDoText} value={comment} name="comment" placeholder="내용을 입력하세요"></ToDoInput>
      </InputContainer>
      <ToDoSubmitBtn>등록</ToDoSubmitBtn>
    </FormContainer>
    </>
);