2023-12-04 본캠프 43일차 / 62일차 TIL

2023-12-04 본캠프 43일차 / 62일차 TIL

주요 진행사항

- React 강의 듣기 

 

React 강의 듣기 (throttling & debouncing)

 

React에서 불필요한 state의 변경을 최소화 하기 위한 기법으로, 각 방식은 다음과 같은 특징이 있다.

 

- Throttling : 빈도를 제어하는 방식

- Debouncing : 마지막 이벤트만 처리하는 기술

 

두가지 방식은 상황에 따라서 사용할 수 있으며, 

이를 설명하기 위한 예시코드는 다음과 같다.

 

Throttling

const throttle = (delay) => {
    if (timerId) {
      return;
    }
    console.log(`API 요청 실행 : ${delay}ms 동안 추가요청은 안받습니다`);
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남, 추가요청 받아요!`);
      timerId = null;
    }, delay);
  };

 

Debouncing

const debounce = (delay) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      console.log(`마지막 요청으로부터 ${delay}ms 지났으므로 API 요청 실행`);
      timerId = null;
    }, delay);
  };

 

위와 같은 로직은 lodash (_) 라이브러리로 간단히 사용도 가능하다. 

사용 법은 다음과 같다.

_.debounce( func, wait, options )