디바운싱과 스로틀링.

디바운싱 - 제일 마지막(또는 처음) 호출만 적용하는 방식

let timer;
document.querySelector('#input').addEventListener('input', () => 
  if (timer) { // 이전 요청의 timer가 남아있다면 지우기
    clearTimeout(timer);
  }
  timer = setTimeout(() => { // 초기설정 혹은 덮어쓰기
    //API 요청
  }, 400);
);

스로틀링 - 일정 시간이 지나기전에 다시 호출되지 않도록 하는것

let timer;
document.querySelector('#input').addEventListener('input', () => 
  if (!timer) { // timer 없으면 실행
    timer = setTimeout(() => {
      timer = null; // 시간 지난 후 timer 해제
      // timer 해제 후 API 요청
    }, 400);
  });

리액트 디바운싱 간단 구현

Parent.js
import { useState } from 'react';
// API
import { updateMemberById } from '../../lib/api/memberApi';

function parent() {
  
  // 데이터 관리
  const [memberState, setMemberState] = useState({
    member: null,
  });
  
  const [timer, setTimer] = useState(0); // 디바운싱 타이머

  const onChangeInputs = async evt => {
    ...
    setMemberState({ // client data는 바로 변경
      member: memberData,
    });
    ...
    // 디바운싱 - 마지막 호출만 적용 (put api)
    if (timer) {
      console.log('clear timer');
      clearTimeout(timer);
    }
    const newTimer = setTimeout(async () => {
      try {
        await updateMemberById(match.params.id, memberData);
      } catch (e) {
        console.error('error', e);
      }
    }, 800);
    setTimer(newTimer);
  };
  ...
  return (
      <Child
      onChangeInputs={onChangeInputs}
      memberState={memberState}
      />
  );
}

Child.js
function child({ onChangeInputs, memberState }) {
  return (
    <Input
    name="introduction"
    value={memberState.member.introduction}
    onChange={onChangeInputs}
    />
  )
}

리액트 디바운싱 간단 구현 - react debounce

🤔 input창을 사용할 때 onchange 이벤트나 scroll 이벤트등 한꺼번에 많이 일어나는 이벤트들을 처리하는 경우 최적화해줄 필요가 있다. 🧚 라이브러리를 사용할 수도 있지만 간단하니 디바운싱을 직접 구현해보자 노션같이 onchange시 변경사항이 바로바로 저장되는 것을 원할 때 사용하고자 함.

https://velog.io/@tjdud0123/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1-%EA%B0%84%EB%8B%A8-%EA%B5%AC%ED%98%84-react-debounce

Debounce 와 Throttle 리액트로 구현하기

새로운 과제를 하면서 debounce를 접할 일이 생겼다. 예전 쇼핑하우 프로젝트를 할 때 처음 썼던 debounce.. 제대로 정리하지 못하고 넘어간 것 같아 항상 머리 속에 정리해야지라는 미련(?)이 떠나질 않았는데 이번 과제를 정리할 기회를 얻게 되어 기쁜 마음으로 과제를 했다. 그리고 리액트로 직접 디바운스나 쓰로틀링을 정리한 자료는 거의 찾기 힘들었었는데, loadash나 underscore를 사용하지 않고 나처럼 직접 구현하는 사람들에게 도움이되는 자료가 되길 바란다.

https://velog.io/@skawnkk/debounce-throttle