react debounce 사용하기

debounce

특정 이벤트가 발생할때 연이어 호출되는 함수들이 한번에 막 발생되는것을 막아주는것

사용예시, 브랜드 찾기, 검색하기와 같이 인풋이 입력되었을때, 많은 정보가 유입될때, 일정 시간 후에 한번만 실행되게 할 수 있다.

아래는 내가 프로젝트를 하면서 적었던 코드를 가지고왔다.

import React, {useState} from 'react';
import {debounce} from 'lodash';  // 디바운스 선언

const DebounceTest = () => {
  const [query, setQuery] = useState('');
  
  const debouncing = debounce((_text) => {
    setQuery(_text);
  }, 200); // 0.2초 후에 검색 결과가 나옴

  const queryHandler = (e) => {
    let targetVal = e.target.value;
    debouncing(targetVal);
  };

  return (
    <input 
      className="input" 
      type="text" 
      placeholder="브랜드를 입력해주세요" 
      value={query} 
      onChange={queryHandler} />
  )
}

위와 같이 적었을때, 문제점이 있다.
인풋창에 인풋값을 넣을때, 자연스럽고(?) 부드럽게(?) 입력되지 않는다. 처음에 내가 만든 디바운스 로직이 잘 못된거라고 생각했는데, 디바운스에 문제가 아니라 input tag에 있었다.

위의 인풋 태그를 아래와 같이 변경해주어야한다.

<input 
      className="input" 
      type="text" 
      placeholder="브랜드를 입력해주세요" 
      /* value={query} */   // 밸류값을 지정하면 0.2초마다 적힌다.
      onChange={queryHandler} />

이하 최종코드

import React, {useState} from 'react';
import {debounce} from 'lodash';  // 디바운스 선언

const DebounceTest = () => {
  const [query, setQuery] = useState('');
  const debouncing = debounce((_text) => {
    setQuery(_text);
  }, 200); // 0.2초 후에 검색 결과가 나옴
  
  const queryHandler = (e) => {
    let targetVal = e.target.value;
    debouncing(targetVal);
  };
  
  return (
    <input 
      className="input" 
      type="text" 
      placeholder="브랜드를 입력해주세요" 
      onChange={queryHandler} />
  )
}