[React] 디바운싱을 활용한 검색 최적화

필자는 최근에 리액트로 프로젝트를 진행하면서 실시간 검색 기능을 구현하게 되었다.

처음에는 단순히 onChange 이벤트에 검색 함수를 연결해서 사용했는데, 타이핑할 때마다 API 요청이 발생하는 문제를 발견했다.

이를 해결하기 위해 디바운싱(Debouncing)이라는 기술을 알아냈고 적용했는데 정말 이런 실시간 검색 기능에 유용할 것 같아 정리해보기로 했다!

---

디바운싱이란?

디바운싱은 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 프로그래밍 기법이다.

예를 들어 사용자가 "hello"라는 단어를 입력할 때, 각 알파벳마다 API를 호출하는 대신 타이핑이 완전히 끝난 후에만 한 번 호출하도록 제어할 수 있다.

---

검색 기능에서의 문제점은 무엇일까?

일반적인 검색 구현은 다음과 같이 작성된다.

const SearchComponent = () => {
    const handleSearch = (e) => {
        const searchTerm = e.target.value;
        fetchSearchResults(searchTerm); // 매 입력마다 API 호출
    };

    return <input onChange={handleSearch} />;
};

이 코드는 사용자가 키보드를 누를 때마다 API를 호출하게 된다.

"react"라는 단어를 검색한다면 총 5번의 불필요한 API 호출이 발생하는 것이다.

누구든지 상식적으로 생각해보면 이 상황이 서버에 불필요한 부하를 주고, 성능 저하를 일으킬 수 있다는 것을 알 것이다. (데이터가 특히 상당히 많을 때!)

---

디바운싱 구현하기

그럼 이제 위 문제를 디바운싱을 통해서 해결하면 좋지 않을까?

디바운싱은 useEffect와 setTimeout을 활용하여 구현할 수 있다.

const SearchComponent = () => {
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        const debounceTimer = setTimeout(() => {
            if (searchTerm) {
                fetchSearchResults(searchTerm);
            }
        }, 300);

        return () => clearTimeout(debounceTimer);
    }, [searchTerm]);

    return (
        <input 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)} 
        />
    );
};

이 코드에서는 사용자의 입력이 300ms 동안 없을 때만 API를 호출한다.
clearTimeout을 통해 이전 타이머를 제거하므로, 연속된 입력 중에는 API 호출이 발생하지 않을 것이다!
또한 useEffect의 클린업 함수를 통해 컴포넌트가 언마운트되거나 searchTerm이 변경될 때 이전 타이머를 정리한다.

 

프로젝트를 계속 진행하면서 느끼는게 어떻게 하면 서버에 부하를 주지 않고 최적화 된, 효율적인 코드로 프론트엔드 코드를 유지할 수 있는지가 정말 중요하다고 생각이 든다.