[리액트 React] 쓰로틀링, 디바운싱_2 (Throttling & Debouncing)

 throttling & debouncing_1에 화면 렌더링을 위해 state를 넣으면 setTimeout 이벤트가 2초 뒤 실행이 아닌 계속 실행된다 이것을 해결하기 위해 Lodash를 이용해야한다.

 

<내용 정리>

• lodash : _.debounce(함수, ms가 인자로 들어간다)
• *클로저 함수에 대한 이해가 필요하다

1. input에 값을 입력하면 handleChange에서 handleSearchText 함수가 실행됨
2. debounce 함수를 호출함 useCallback과 2000을 매개변수로 보냄
3. debounce함수의 초기 timerId 값은 null로 설정
4. ...args 이전값(callback, delay)을 매개변수로받아 timerId값이 있으면 지워주고 timerId 값이 없으면 setTimeout함수를 실행(클로저 함수)
5. setTimeout함수에 설정된 시간(2000)이 지나면 Search Text에 입력한 text가 들어간다
6. useCallback으로 메모이제이션 해줬기때문에 리렌더링 돼도 이전 값을 기억하고(...args) setSearchText에 새로운 값이 들어가게됨

function App() {
  const [searchText, setSearchText] = useState("");
  const [inputText, setInputText] = useState("");

  const debounce = (callback, delay) => {
    let timerId = null;
    return (...args) => {
      if (timerId) clearTimeout(timerId);
      timerId = setTimeout(() => {
        callback(...args);
      }, delay);
    };
  };

  // useCallback - 캐시에 함수 저장
  const handleSearchText = useCallback(
    debounce((text) => {
      setSearchText(text);
    }, 2000),
    []
  );

  // 공통함수
  const handleChange = (e) => {
    setInputText(e.target.value);
    handleSearchText(e.target.value);
  };
  return (
    <div
      style={{
        paddingLeft: "20px",
        paddingRight: "20px",
      }}
    >
      <h1>디바운싱 예제</h1>
      <input
        type="text"
        placeholder="입력값을 넣고 디바운싱 테스트를 해보세요"
        style={{ width: "300px" }}
        onChange={handleChange}
      />
      <p>Search Text : {searchText}</p>
      <p>Input Text : {inputText}</p>
    </div>
  );
}