React-Debounce

 

Debounce 란?

개발을 하다 보면 너무 자주 호출되는 함수가 있다면 서버 비용이 너무 많이 들 수 있습니다.
따라서 특정 이벤트가 여러번 발생한 경우 해당 이벤트 안에 함수가 일정 시간이 지나야 실행되고
그 전에 이벤트에 의해 발생한 함수들은 없애주는 기능이라고 생각하시면 됩니다.

 

언제 사용할까?

제가 사용하는 경우는 검색어 입니다.

우리가 입력창에 새우 볶음밥 만드는 방법이라고 입력을 할 때 새우만 입력을 해도 새우에 관한 검색어 예시들이 밑에 나오는 모습을

경험해 본 적이 있으실 것입니다. 그럴 때 만약 Debounce 를 적용하지 않는다면 해당 검색어 예시들을 찾기 위해 이벤트가 발생하고

우리의 타자 속도가 너무 빠르다면 해당 이벤트는 ㅅ, 새, 새ㅇ, 새우 라고 입력할 때마다 이벤트가 발생해 서버에 비용이 증가합니다.

따라서 debounce 라는 기능을 적용하는 것이 필수적이라고 할 수 있습니다.

 

그림 예시

Debounce  ❌

 

Debounce  ⭕️

 

사용법

const fetchDataFromServer = (value) => {
	const users = [
		{name: "홍길동", age: 20},
		{name: "홍길동", age: 20},
		{name: "홍길동", age: 20},
	]

	return users.filter(user => user.name.startsWith(value))
}

function App() {
	const [input, setInput] = useState("");
	const [debouncedInput, setDebouncedInput] = useState("");
	const [result, setResult] = useState("");

	useEffect(() => {
		const timerID = setTimeout(() => {
			setDebouncedInput(input);
		}, 1000)

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

	useEffect(() => {
		const users = fetchDataFromServer(debouncedInput);
		setResult(users);
	},[debouncedInput]);
	
}

 

코드를 보시면 1초마다 함수를 호출하게 만들어 준 모습입니다. 하지만 해당 이벤트가 반복적으로 발생하게 된다면 useEffect 의 return

으로 clearTimeout 함수가 실행함으로써 그 전의 이벤트들은 다 취소하는 모습을 보실 수 있습니다.

custom Hook

// ./Hooks/debounce.js

import {useState, useEffect} from "react";

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

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

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

	return debouncedValue;
}

// ./app.js

function App() {
	const [input, setInput] = useState("");
	const [result, setResult] = useState("");
	const debouncedInput = useDebounce(input, 1000);

	useEffect(() => {
		const users = fetchDataFromServer(debouncedInput);
		setResult(users);
	},[debouncedInput]);
	
}