오늘의 개발 23.08.15 - debounce

input태그에 원하는 값을 받아서 해당 값으로 서버에 요청을 보내는 기능을 만들던중
onChange로 상태를 변경할때마다 서버로 요청을 보내는 비효율적인 상황이 발생해서
찾던중 debounce , throttle에 관해서 알게됨.

Debounce - 딜레이가 지난 후 하나의 이벤트만 발생
Throttle - 이벤트를 일정한 주기마다 발생시킴

-Debounce 처리 전

-Debounce 처리 후

해당 코드는 간단하게 input창에 입력을 받아서 debounce 처리를 해준 코드

"use client";

import React, { useEffect, useState } from "react";

const TestPage = () => {
  const [name, setName] = useState("");
  const DebouncedName = useDebounce(name, 1000);
  return (
    <div className="mt-4">
      <input
        className="border border-black "
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <div>{name}</div>
      <div>{DebouncedName}</div>
    </div>
  );
};

export default TestPage;

export function useDebounce(value: string, delayTime: number) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const debounce = setTimeout(() => {
      setDebounced(value);
    }, delayTime);

    return () => {
      clearTimeout(debounce);
    };
  }, [value, delayTime]);

  return debounced;
}

input으로 받은 값과 원하는 딜레이 시간을 useDebounce 함수에 전달해서
debounced 값을 setTimeout으로 원하는 시간만큼 지난후에 해당 값이 변경되게 하고 그값을 return 받아서 해당 값으로 서버에 전송하면 input값이 바뀔때마다 서버에 요청하는게 아닌 원하는 딜레이 시간만큼 입력시간이 주어진 값을 전송하기때문에 효율적

• 간단한 에러
  함수명을 소문자로 시작해서 만들면 useState에서 다음과 같은 에러가 발생함
  React Hook "useState" is called in function "test" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

간단하게 테스트하려고 rafce로 만들고 수정안했더니 에러가 발생해서 우연히 발견😁