요구 사항 분석

// MemoForm.tsx
const handleMemoTextAreaChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
  setMemo(event.target.value);
  setIsSaved(false);

  throttle(async () => await saveMemo({ memo: event.target.value, category })
  );
};

사용자가 입력을 하면 스로틀을 실행한다. 기본값은 3초이며, 3초마다 사용자의 입력값이 저장된다.

원인 탐색

1. throttle 함수에서 console을 찍어본다.

   const handleMemoTextAreaChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setMemo(event.target.value);
     setIsSaved(false);
   
     console.log(1);
     throttle(async () => {
       console.log(2);
       await saveMemo({ memo: event.target.value, category });
     });
   };
   

   이건 또 잘 된다.

   둘의 차이점은 return이 함수냐, 아니냐이다. 아래 둘의 코드는 다른가?

   • A

     throttle(async () => {
       await saveMemo({ memo: event.target.value, category });
     });
     

   • B

     throttle(async () => await saveMemo({ memo: event.target.value, category }));
     

   이를 동일한 환경에서 실험하기 위해 아래와 같이 실행해 보았다.

   throttle(async () => {
     console.log(2);
     await saveMemo({ memo: event.target.value, category });
   });
   throttle(async () => {
     console.log(3);
     return await saveMemo({ memo: event.target.value, category });
   });
   

   결과는 놀랍게도 2만 콘솔에 찍혔다.

새롭게 배운 점

(await 비동기 함수)를 리턴하는 것과, 실행하는 것은 다르다.

추가 공부

(await 비동기 함수)를 리턴하는 것과, 실행하는 것이 다른 이유