3주차 - Debounce, Throttle

👉 우리가 감사합니다를 검색 할 때, ㄱ, ㅏ, ㅁ, ㅅ, ㅏ 하나하나 입력할 때마다 검색을 새로 하면

(=검색 api를 호출한다고 해봅시다!), 연관 검색어 같은 걸 빨리 바꿔줄 수 있어서 좋죠.

그런데 감사합니다를 빨리 검색한다고 생각해보세요.

1초도 안되는 시간에 이미 감사합까지 쳤다면, ㄱ,ㅏ,ㅁ,..., ㅎ,ㅏ,ㅂ까지 엄청나게 많이 검색을 해야해요. 😢

→ 이럴 땐 특정 시간마다 1번씩, 혹은 키보드 입력을 멈췄을 때만 1번 해주는 게 검색 횟수를 줄일 수 있어요!

특히 api를 불러야 할 때는, 순식간에 엄청 많은 서버 요청이 날아가는 걸 막아줄 수 있어요!

→ 물론 연관검색어 부분의 엄청난 랜더링도 막아줄 수 있겠죠!

 

이벤트를 관리 할 수 있는 두가지 방법

 

1) debounce

👉 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행해요!

일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소해요.

2) throttle

👉 일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해줘요.

---

lodash로 이벤트 관리하기

👉 Lodash는 자바스크립트 유틸리티 라이브러리예요!

배열 관리부터 모듈화, 성능 향상과 관련된 것까지 엄청 많은 기능을 제공해요!

오늘 배울 debounce와 throttle도 제공합니다!

공식 문서 보러 가기 (링크→)

 

1) lodash 설치

yarn add lodash

 

2) 함수로 따로 빼서 쓸 때

import React from "react";
import _ from "lodash";

const Search = () => {
  
  const debounce = _.debounce((e) => {
    console.log(e.target.value);
  }, 1000);

  const throttle = _.throttle((e) => {
      console.log(e.target.value)
  }, 1000)

  const onChange = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={throttle}></input>
    </div>
  );
};

export default Search;

 

3) debounce - callBack 함수로 부를 때

// shared/Search.js
import React from "react";
import _ from "lodash"; // lodash 부르기

const Search = () => {
  const debounce = _.debounce((k) => console.log("디바운스! :::", k), 1000);
  const keyPress = React.useCallback(debounce, []);

  const onChange = (e) => {
    keyPress(e.target.value);
  };

  return (
    <div>
      <label>Search:</label>
      <input onChange={onChange} />
    </div>
  );
};

export default Search;

 

4) throttle - callBack 함수로 부를 때

// shared/Search.js
import React from "react";
import _ from "lodash"; // lodash 부르기

const Search = () => {
  const throttle = _.throttle((k) => console.log("쓰로틀! :::", k), 1000);
  const keyPress = React.useCallback(throttle, []);

  const onChange = (e) => {
    keyPress(e.target.value);
  };

  return (
    <div>
      <label>Search:</label>
      <input onChange={onChange} />
    </div>
  );
};

export default Search;

---

+ useCallback()이란?

: 함수형 컴포넌트에서는 state가 변하거나 props가 변하면 재렌더링이 일어나면서 함수가 초기화 되기 때문에 throttle과 debounce 사용 시 함수가 엉망이 됩니다. 이럴 때 useCallback()을 사용하면 해당 함수를 메모리제이션 해줍니다. (해당 함수를 어딘가에 저장 해둔다.) 그렇기 때문에 컴포넌트가 리렌더링 되어도 함수는 초기화 되지 않고 계속 사용 할 수 있도록 해준다.

 

첫번째 인자에는 구동 시킬 함수를 넣는다.

두번째 인자에는 array 형태로 이 함수를 초기화 할 조건을 넣는다.