2023-08-31 00:00

자동 임시 저장 기능을 구현해보자 (Debounce)

사용자가 글을 쓰다가 어떤 예상치 못한 일로 웹페이지가 닫혔다! 그러면 사용자의 글은 날아가 버린다.. 아주 화가 나는 일이다

이래서 자동으로 임시 저장되는 기능이 필요하다

임시저장이라는 기능은 구현되었다고 가정하고 그러면 자동으로 임시저장을 어떻게 구현할 수 있을까?

어떠한 시점에 임시저장 API를 서버에 요청하면 될 것이다! 언제 임시저장 API를 보낼까??

가장 단순하게는 타이핑할 때마다 보낼 수 있다

그러나 이 방법은 불필요하게 서버에 요청을 많이 보낸다

그래서 대안책으로 하나의 긴 타이핑이 끝나고 몇 초가 지난 후에 임시저장 API를 서버에 요청하면 된다!

여기서 debounce라는 것이 사용되는데 debounce가 무엇일까? 우리 AI한테 물어보자

debounce가 뭐야?? debounce는 일정 시간 동안 연속적으로 발생하는 이벤트들을 하나의 이벤트로 결합하는 기술입니다. 이를 통해 불필요한 이벤트 호출을 방지하고 성능을 최적화할 수 있습니다. 예를 들어, 사용자가 버튼을 여러 번 클릭하는 경우, debounce를 사용하여 마지막 클릭만 처리할 수 있습니다. 이를 통해 원하는 동작을 보다 정확하게 수행할 수 있습니다.

리액트 훅으로 작성한 코드를 봐보자

import { useEffect, useState } from 'react';

export const useDebounce = <T>(value: T, delay: number): T => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

위 함수를 해석해보면.. value값이 delay 시간 내에 변하면 기존 값이 return 되고 delay시간이 지나면 setDebouncedValue()가 호출되어 새로운 값이 return된다.

debounce

react