Debounce

• 이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정시간이 지난 후에 함수를 호출하는 것

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

const fetchDataFromServer = (value) => {
  if (!value){
    return [];
  }
  console.log('fetchDataFromServer');
  const users = [
  {name: '김철수', age: "16"},
  {name: '이영희', age: "26"},
  {name: '김민수', age: "15"},
  {name: '홍길동', age: "20"},
  {name: '홍민영', age: "45"},
  {name: '김민영', age: "32"},
];

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

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

  useEffect(() => {
    // setTimeout은 생성된 타이머의 식별자 반환
    const timerID = setTimeout(() => {
      console.log('콜백 호출');
      setDebouncedInput(input);
    }, 1000);

    // 클린업 함수 리턴, input이 변경될 때마다 이전의 타이머를 정리
    return () => {
      clearTimeout(timerID);
    }
  }, [input]);

  // 검색어를 서버에서 조회하는 역할
  useEffect(() => {
    const users = fetchDataFromServer(debouncedInput);
    setResult(users);
  }, [debouncedInput]);

  return (
    <div className="container">
      <div className="search-container">
        <input placeholder="검색하기" 
          value={input}
          onChange={(event) => setInput(event.target.value)}/>
        <ul>
          {result.map((user) => (
            <li key={user.name}>
              <span>{user.name}</span>
              <span>{user.age} 세</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
};

export default App;

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

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

    useEffect(() => {
        // setTimeout은 생성된 타이머의 식별자 반환
        const timerID = setTimeout(() => {
          console.log('콜백 호출');
          setDebouncedValue(value);
        }, delay);
    
        // 클린업 함수 리턴, input이 변경될 때마다 이전의 타이머를 정리
        return () => {
          clearTimeout(timerID);
        }
      }, [value, delay]);

    return debouncedValue;
};

import React, { useEffect, useState } from "react";
import { useDebounce } from "./Component/debounce";

const fetchDataFromServer = (value) => {
  if (!value){
    return [];
  }
  console.log('fetchDataFromServer');
  const users = [
  {name: '김철수', age: "16"},
  {name: '이영희', age: "26"},
  {name: '김민수', age: "15"},
  {name: '홍길동', age: "20"},
  {name: '홍민영', age: "45"},
  {name: '김민영', age: "32"},
];

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

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

  // 검색어를 서버에서 조회하는 역할
  useEffect(() => {
    const users = fetchDataFromServer(debouncedInput);
    setResult(users);
  }, [debouncedInput]);

  return (
    <div className="container">
      <div className="search-container">
        <input placeholder="검색하기" 
          value={input}
          onChange={(event) => setInput(event.target.value)}/>
        <ul>
          {result.map((user) => (
            <li key={user.name}>
              <span>{user.name}</span>
              <span>{user.age} 세</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
};

export default App;