[JUICEPlanner] 성능개선, Form onChange 없이 Submit 제어, Custom hook 제작

미루고 미루던 맘속에 담아두던 JUICEPlanner의 코드 리팩토링을 진행하겠다!
성능 이슈는 없지만 쓸데없이 메모리를 사용하고 있는 부분이 있었는데, 그 부분을 처리하도록 하겠다!

코드 리팩토링

계획

문제가 되는 부분은 두 부분이 있었는데 첫번째는 Form 의 input tag에서 onchange를 통해서 새로운 상태에 저장 후 submit 버튼을 눌렀을 때, list에 상태들을 넣는 로직이었다.
어차피 form에서 submit 하는데, 굳이나 새로운 상태를 만들고, input이 변할 때 마다 상태의 set 함수가 발동하는 것은 누가봐도 기괴하고 문제가 된다고 생각했다!
기존의 onchange Event

  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    setUserInputs({
      ...userInputs,
      [event.currentTarget.name]: event.currentTarget.value,
    });
  };

이 부분을 제거하고 새롭게 하도록 하겠다!

두번째로는 디데이를 표기하는 DDayBox 컴포넌트에서 남은 날을 계산하는 로직이 문제라고 생각했다.
컴포넌트내의 useEffect 로 인해서 각종 마운트가 일어나면 계속적으로 콜백함수를 작동시켜서 이 또한 쓸데없는 낭비라고 생각하였고, 따라서 custom hook을 사용해서 useEffect 사용을 없애 성능 향상을 기대해보았다!

  useEffect(() => {
    const today = new Date();
    const dDay = new Date(`${date}T00:00:00`);
    const gapNum = dDay.getTime() - today.getTime();
    setDays(Math.ceil(gapNum / (1000 * 60 * 60 * 24)));
  }, [date]);

1. Input의 onchange 이벤트 제거

간단하게 해결했다. Input Tag에 붙은 onchange 이벤트 모두 제거하고

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { dday, date } = event.currentTarget;

    if (validation(list, dday.value)) return setIsError(true);
    else setList([...list, { dday: dday.value, date: date.value }]);

    event.currentTarget.reset();
  };

form submit 함수에 해당 코드를 추가함으로써 빙 돌아가는 로직을 개선했다!

const { dday, date } = event.currentTarget;

console.log(dday.value, date.value);
// Input name="dday"의 value, Input name="date"의 value

2. useEffect 제거 후 custom hook 사용

useEffect의 사용 이유는 dependency 값이 이 변할 때 마다 디데이의 변화를 관측하기 위해서 사용했던 것이다. 값이 하나가 바뀌면 모든 컴포넌트의 useEffect 콜백함수가 발동해서 쓸데 없는 계산을 하게 되는 것이었다!
따라서, 굳이나 값이 변할 때 하지말고, 아예 처음부터 componenet의 값을 박아두자는 생각으로 useEffect 제거하였고, custom hook

을 제작하여서 object 형태로 return 하여 추후 확정성을 고려하였다!

기존의 성능 평가인데, 2점 성장? 시켰다,, ?