TIL: 2023-02-26

⚙️ 오늘 학습한 내용

debounce, throttle

 

🗝 키워드

debounce, throttle

 

🗣 스스로에게 설명

Debounce와 Throttle

자바스크립트에서 성능 상의 이유로 이벤트를 제어하는 방법
이벤트의 과도한 실행으로 이벤트 핸들러가 DOM 조작과 같은 작업을 많이 수행하게 되면 성능 문제가 발생 => 사용자 경험 저하

제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함

 

사례

• 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event를 사용하기 위해
• 사용자가 키보드 입력을 중지할 때까지 비동기 요청을 발생시키지 않기 위해
• 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 때
• 앱에서 요소를 드래그할 때 좋은 성능을 보장하기 위해

debounce와 throttle은 유사한 기술이지만 서로 다르다.

Debounce

언어의 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

Debounce는 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술
순차적 호출을 하나의 그룹으로 그룹화할 수 있음.

브라우저 창 리사이징, 키보드 입력 비동기 요청에 적합

 

브라우저 창 리사이징: 사용자가 화면 줄이기를 멈추면 그 때 동작을 실행하는 형식

키보드 입력: 사용자가 키보드 입력을 멈추면 그 때 비동기 요청을 보내는 형식

Throttle

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

이벤트를 일정한 주기마다 발생하도록 하는 기술, 실행 횟수에 제한을 거는 것
Throttle의 설정 시간으로 1ms를 주게되면 해당 이벤트는 1ms 동안 최대 한 번만 발생하게 된다.

1ms 안에 무수히 많은 이벤트가 발생한다고 해도 한 번으로 처리하는 것이다.
scroll 이벤트에서 많이 사용한다. 

 

이 링크의 코드펜 예제가 설명이 굉장히 잘 되어있다.

Debouncing and Throttling Explained Through Examples | CSS-Tricks

 

이건 그 예제 가지고 한글로 어떤 분이 정리해주신 글이다

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

 

사용하기

보통 debounce와 throttle은 lodash 라이브러리로 사용하는 편이다.

npm i --save lodash

import { debounce, throttle } from 'lodash';

// debounce
debounce(실행할 함수, 지연시킬 시간);

// throttle
throttle(실행할 함수, 지연시킬 시간);

필요한 메소드만 import해와서 쓰면 된다.

 

🔍 공부가 더 필요한 부분

리액트 useMemo와 useCallback 좀 찾아봐야겠다. 

CSR, SSR 제대로 이해하기