React Custom Hooks 생성 (Debounce)

React Custom Hooks

검색 시 디바운스를 주는 Hooks를 생성해보자!

• 디바운스: 입력 결과가 나타날 떄 까지 지연을 주는 기능. (이벤트 처리를 지연시킴)

Hooks 코드 작성

/src/hooks/useDebounce.js

import { useState, useEffect } from 'react';

export const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceValue(value);
    }, dalay)
    
    // 만약 delay 시간이 지나기 전에 다시 입력하게 되면, clearTimeout으로 없애줌.
    return () => {
  	  clearTimeout(handler);
    }
  }, [value, delay]);
  
  return debounceValue;
}

• props로 value와 delay가 전달됨.

사용 방법

1. 기존 코드

• input이 onChange할 때 마다 API 호출함.

import { useDebounce } from './hooks/useDebounce';

const App = () => {
  const [searchTerm, setSearchTerm] = useSate("");
 
  const debouncedSearchTerm = useDebounce(searchTerm, 500); // 디바운스 된 값
  
  
  // Input Onchange Handler 
  const handleSearchInput = asynch (e) => {
  	setSearchTerm(e.target.value);
    if (e.target.value.length > 0) {
      try {
        const response = await axios.get(`~~~`);
        // 중략.
      } catch (error) {
        console.error(error);
      }
    }
  }
}

2. 변경 코드

• debouncedTerm이 변경될 떄 마다 호출해야 함.
• onChange에는 searchTerm만 바꿔주고, API 호출은 useEffect 이용. (Deps 배열)

import { useDebounce } from './hooks/useDebounce';

const App = () => {
  const [searchTerm, setSearchTerm] = useSate("");
 
  const debouncedSearchTerm = useDebounce(searchTerm, 500); // 디바운스 된 값
  
  // API 호출 
  const handleSearchInput = asynch (searchTerm) => {
  	 if (searchTerm.length > 0) {
      try {
        const response = await axios.get(`~~~`);
        // 중략.
      } catch (error) {
        console.error(error);
      }
    }
  }
  
  useEffect(() => {
    handleSearchInput(debouncedSearchTerm);
  }, [debouncedSearchTerm]);
  
  
  return (
    <div>
      <input type="text" 
             onChange={(e) =>setSearchTerm(e.target.value); }
        	 />
    </div>
  )
}