리액트 onChange axios

연속적인 검색 입력 처리를 위한 디바운싱과 타이머 관리

웹 애플리케이션에서 사용자가 검색 입력을 하는 경우, 연속적인 입력에 대해 효율적으로 반응하기 위해 디바운싱 기법을 사용할 수 있습니다. 이 글에서는 디바운싱을 구현하는 방법과, 이 과정에서 타이머를 사용하여 검색 로직을 어떻게 최적화할 수 있는지 설명합니다.

디바운싱이란?

디바운싱은 연속적인 이벤트 발생 시, 일정 시간 동안 추가 이벤트가 발생하지 않을 때만 특정 로직을 실행하는 기술입니다. 예를 들어, 사용자가 검색창에 타이핑을 할 때마다 바로 검색을 수행하는 대신, 사용자의 입력이 멈춘 후 짧은 시간이 지나면 검색을 실행합니다. 이 방식은 불필요한 서버 요청을 줄이고, 애플리케이션의 성능을 향상시킵니다.

디바운싱 구현 방법

디바운싱을 구현하기 위해, JavaScript의 setTimeout 함수와 React의 상태 관리 기능을 활용합니다. 사용자의 입력이 감지될 때마다 setTimeout을 이용해 검색 함수의 실행을 예약하고, 만약 사용자가 지정된 시간 내에 추가 입력을 하면 이전에 예약된 타이머를 취소하고 새로운 타이머를 설정합니다.

const [debounceTimer, setDebounceTimer] = useState(null);

const handleSearchInput = (value) => {
  // 이전 타이머가 있으면 취소
  if (debounceTimer) {
    clearTimeout(debounceTimer);
  }

  // 새로운 타이머 설정
  const newTimer = setTimeout(() => {
    // 검색 로직 실행
   
  }, 500); // 사용자 입력 후 500ms가 지나면 검색 실행

  // 새로운 타이머 ID를 상태에 저장
  setDebounceTimer(newTimer);
};

const executeSearch = (searchTerm) => {

컴포넌트 언마운트 시 타이머 관리

React 컴포넌트가 언마운트될 때 남아 있는 타이머를 적절히 정리하지 않으면, 메모리 누수가 발생할 수 있습니다. 따라서, 컴포넌트가 사라지기 전에 설정된 모든 타이머를 취소해야 합니다.

useEffect(() => {
  return () => {
    // 컴포넌트 언마운트 시 타이머 취소
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
  };
}, [debounceTimer]);