[React] React로 Debounce 적용하기

🚪들어가며 

 

 

위의 사진은 검색어를 입력하면 그 검색어가 포함된 문자만 필터되도록 설정한 컴포넌트입니다. "가나다라"를 검색할 때, 검색어의 상태인 search가 어떻게 변하는지 보겠습니다. 

 

 

그런데, 꼭 이렇게 한글자 한글자마다 상태를 변화시킬 필요가 있는지 의문이 들었습니다. 위의 예시는 간단하기 때문에 성능 상 큰 문제가 없을 것입니다. 하지만, 만약 저렇게 상태가 변화할 때마다 API 요청을 보내는 상황이라면 성능에 큰 문제가 생길 것입니다. 이럴 때, Debounce 개념을 통해 성능을 개선할 수 있습니다. 

 

 

📗 디바운스 (Debounce)란?

디바운스는 짧은 시간 동안 여러 번 발생하는 이벤트를 하나로 합쳐서 처리하는 기술입니다. 주로 사용자 입력, 창 크기 조정, 스크롤 이벤트와 같은 빈번한 이벤트를 최적화하는 데 사용됩니다.

 

주요 특징은 다음과 같습니다. 

 

• 이벤트가 연속적으로 발생할 때, 가장 마지막 이벤트만 실행됩니다.
• 지정된 시간 동안 추가 호출이 없으면 실행됩니다.
• 불필요한 함수 호출을 줄이고 성능을 향상시킵니다.

위의 예시에서는 입력이 시작되고 1초마다 상태를 변화시키는 식으로 디바운스 개념을 적용할 수 있을 것입니다. 

 

 

🖥️ 예시 코드

 

우선, 디바운스 검색어를 저장할 상태를 하나 만듭니다. 

const [search, setSearch] = useState<string>(""); // 입력된 검색어
const [debounceSearch, setDebounceSearch] = useState<string>(""); // 디바운스된 검색어

 

 

 

그 이후, useEffect 훅을 사용하여, 디바운스를 적용시킵니다. 

// search 값이 변경될 때마다 디바운스를 적용
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounceSearch(search); // 디바운스된 값을 적용
    }, 1000); // 1초 후에 디바운스된 값 적용

    return () => {
      clearTimeout(timer); // 이전 타이머를 정리하여 불필요한 호출 방지
    };
  }, [search]); // search가 변경될 때마다 useEffect 실행

 

 

1. useEffect와 의존성 배열 [search]
   • useEffect는 search 값이 변경될 때마다 실행됩니다.
   • 즉, 사용자가 입력 필드에서 값을 변경할 때마다 search 값이 바뀌면 이 useEffect가 호출됩니다.
2. setTimeout을 사용하여 디바운스
   • setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행합니다. 여기서는 1000ms(1초) 후에 setDebounceSearch(search)를 실행하여 debounceSearch 값을 업데이트합니다.
   • 1초 동안 입력이 없으면 debounceSearch가 search 값을 반영하게 됩니다.
3. clearTimeout(timer)
   • 만약 search 값이 변경될 때마다 useEffect가 다시 실행되면, 이전에 설정된 타이머가 여전히 남아 있을 수 있습니다.
   • clearTimeout(timer)는 새로운 useEffect가 실행되기 전에 이전 타이머를 취소하여 불필요한 작업을 방지합니다. 즉, 입력이 계속될 경우, 이전 타이머를 취소하고 새로운 타이머를 설정하게 됩니다.
4. 효과적으로 디바운스를 구현
   • 디바운스의 핵심은 "입력이 멈춘 후에만 작업을 실행" 하는 것입니다.
   • 사용자가 계속 입력을 하면 타이머가 계속 초기화되므로, 마지막 입력 후 1초가 지나면 debounceSearch가 업데이트됩니다.
   • 결과적으로, 사용자가 빠르게 입력할 때마다 setDebounceSearch가 자주 호출되지 않고, 1초간의 입력이 멈추었을 때만 실행되므로 불필요한 필터링 작업을 줄일 수 있습니다.

 

 

📚 결론

위의 과정을 요약하면 다음과 같습니다.

1. 사용자가 텍스트를 입력하면 search 값이 즉시 변경됩니다.
2. search 값이 변경될 때마다 useEffect가 실행되고, 새로운 setTimeout이 설정됩니다.
3. 입력이 멈춘 후 1초가 지나면 setDebounceSearch가 실행되어, debounceSearch에 search 값이 저장됩니다.
4. debounceSearch 값을 기반으로 필터링 작업이 이루어집니다.

 

결과적으로, 아래와 같이 1초마다 검색 상태가 바뀌고 이에 따라 필터되도록 설정하여 성능을 개선했습니다.