[react] 검색 API 사용할 때 딜레이 주기

Prologue

Search API를 통해 검색을 하고있던 찰나였다. onChange가 하나하나 바뀔 때 마다 통신을 하니 웹페이지가 너무 버벅이길래, 사용자의 입력이 끝난 후 지정한 시간을 초과하고 나서 통신을 할 수 있도록 구현했다.

What?

setTimeout & useEffect.

How?

useEffect 안에 setTimeout을 걸어놓고, 그 안에 실행되는 함수로써 request()를 넣어주면 완성!

async function request() {
    const res = await fetch(
      `http://10.58.1.43:3000/search/products?keyword=${searchValue}`
    );
    const result = await res.json();
    setSearchedValue(result.result);
  }

  useEffect(() => {
    const timeoutExecute = setTimeout(() => request(), 500);
    return () => clearTimeout(timeoutExecute);
  }, [searchValue]);