[React] 실시간 검색 - debouncing 기능 구현하기

[React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

[React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

추천 글 보러가기

🚩소개

안녕하세요! 대학생 개발자 주이어입니다! 오늘은 React에서 실시간 검색 기능, debouncing 기능을 구현하는 방법에 대해서 적어보려고 합니다. 제가 최근에 진행하고 있는 프로젝트에서 유저를 검색하는 기능이 필요했었는데, 실시간으로 검색되게 만들고 싶어서 찾아보니 debouncing 이라는 기법이 있더라구요. 생각보다 자주 쓰이는 기능이니 한번 씩 읽어보시길 바랍니다!

---

❓Debouncing 기능이란?

🔍 개념

Debouncing은 짧은 시간 동안 반복해서 발생하는 이벤트를 하나의 이벤트로 묶어 처리하는 기술 입니다.

예를 들어 실시간 검색 기능에서, 사용자가 입력할 때마다 API를 호출한다면 서버에 너무 많은 요청이 발생하게 되면서 서버 부화가 생길 수도 있습니다.
Debouncing은 이런 상황에서 사용자의 입력이 멈춘 시점에 한 번만 동작하도록 하여 문제점을 해결할 수 있도록 도와줍니다.

---

🤔 왜 사용할까?

• 불필요한 API 호출 방지
• 성능 최적화
• UX 향상 (입력 중 버벅임 없이 부드럽게 작동)

---

💡사용 예시

• 검색창에서 실시간 검색 결과 보여주기
• 버튼 연속 클릭 방지
• 브라우저 창 크기 조절 이벤트 처리

---

💿 구현하기

useEffect(() => {
  const delayDebounce = setTimeout(() => {
    if (input.trim() !== "") {
      axios.get(`http://localhost:5000/searchuser/${input}`).then((res) => {
        setResults(res.data);
      });
    } else {
      setResults([]);
    }
  }, 300);

  return () => clearTimeout(delayDebounce);
}, [input]);

위 코드는 React의 useEffect 훅과 setTimeout을 이용해 debouncing 기능을 구현한 예시입니다.(실제 프로젝트에 사용한 코드)

간단하게 코드를 설명하자면,

• 사용자가 입력할 때 마다 useEffect가 실행된다.(input 값이 바뀌므로)
• 입력이 멈추고 300ms가 지난 후에만 서버에 요청을 보낸다.(setTimeout 사용)
• 만약 사용자가 입력을 계속하고 있다면 이전 setTimeout은 clearTimeout으로 취소되어, 마지막 입력 이후에만 요청이 실행된다.(useEffect안에서 return문은 다음 useEffect가 실행되기 전에 실행되는 클리어 함수 역할)
• 입력값이 공백인 경우에는 요청을 보내지 않고 결과를 초기화한다.

구현 화면

위 사진은 debouncing 기능을 사용하여 실시간 검색 기능을 구현한 화면이다.
sa를 입력하고 나서 입력이 정지했을 때, 위와 같이 검색 결과가 나오는 것을 알 수 있다.

---

😊 마무리

• Debouncing은 사용자의 입력이나 이벤트 발생이 일정 시간 이상 멈췄을 때만 동작하도록 하는 기법이다.
• API 호출이 잦은 상황에서 사용하면 성능을 최적화할 수 있다.
• 실시간 검색, 자동완성, 창 크기 조절 등 다양한 상황에서 유용하게 사용된다.

오늘은 이렇게 debouncing 기능에 대해서 알아보았습니다! 저는 실시간 검색 기능을 구현하기 위해 사용했지만, 이 기능 뿐만 아니라 반복해서 발생하는 이벤트를 하나의 이벤트로 묶는 상황에서는 언제든 사용 가능하니 유연하게 사용하시길 바랍니다!

 

다음 글에서는 Notification System 기능, 흔히 말하는 알림 시스템을 구현하는 것을 소개해보려고 합니다! 
지금까지 읽어주셔서 감사합니다!

[Express] GET 요청으로 유저 검색 기능 구현하는 깔끔한 방법(w. React)

[Express] GET 요청으로 유저 검색 기능 구현하는 깔끔한 방법(w. React)

유저 검색 기능 백엔드 API 구현 보러가기

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!