디바운스와 쓰로틀링

 

디바운스와 쓰로틀링은 둘다 이벤트 처리를 제어하기 위해 사용되는 기술이다.

둘 다 연속적인 이벤트 발생을 제어하여 성능 개선이나 사용자 경험 향상을 위해 활용됨. 그러나 사용 목적과 동작 방식에 차이가 있습니다.

 

디바운스:

• 디바운스는 연속적인 이벤트 발생 시, 일정 시간 동안 마지막 이벤트만 처리하도록 제어하는 기술
• 디바운스를 적용하면 사용자가 연속해서 키를 입력할 때마다 쿼리를 전송하는 대신, 마지막 키 입력 이후 일정 시간 동안 대기한 후 한 번만 쿼리를 전송함. 이를 통해 불필요한 서버 요청을 줄이고 성능을 개선할 수 있다.

디바운스 코드

import {  useState } from "react"

export default function Debounce(){
    const [text,setText]=useState("")
    let timer
    const onChangeText=(event)=>{ 
        if(timer){
            clearTimeout(timer) //input 필드에 값을 입력중일때는 시간 초기화
        }
        timer=setTimeout(()=>{ //입력중이 아닐때는 1초 뒤에 콘솔출력
            setText(event.target.value)
            console.log(text)
        },1000)
    }
    return (
        <input type="text" onChange={onChangeText}/>
    )
}

콘솔창

콘솔창과 같이 인풋필드에 무언가를 입력중일때는 콘솔출력이 되지 않다가 입력을 마치면 1초 후에 해당 내용이 출력됨

이로써 입력 중 일때는 불필요한 서버 요청을 줄일수 있음

 

쓰로틀링:

• 일정한 주기로 이벤트를 제어하는 기술. 연속적인 이벤트 발생 시, 일정한 주기마다 이벤트를 처리하도록 제어한다

쓰로틀링 코드

 

import { useState } from "react"

export default function Throttle(){ //이벤트를 일정한 주기마다 실행하도록함
    const [text,setText]=useState("")
    let timer=null
    const onChangeText=(event)=>{
        console.log(timer) //setTimeout 함수가 리턴하는 타임아웃 아이디라는 정수형태의 값 확인하기 위함
        if(!timer){ //1초에 한번씩 실행됨
            timer=setTimeout(()=>{
                setText(event.target.value)
            },1000)
        }
    }
    return (
        <div>
            <input type="text" onChange={onChangeText}/>
        </div>
    )
}

콘솔창

키패드 1을 계속 누른 상태로 출력해 보았다

출력창의 랜덤한 정수값은 setTimeout함수가 반환하는 타임아웃 아이디라는 값이다,

인풋필드에 키패드 하나를 꾹 누른 상태로 출력해서 1초에 같은 횟수(29번)로 출력되는 것을 확인 할 수 있다

현재 인풋필드의 값을 출력하는 코드를 setTimeout함수 안에 넣어보면 출력코드가 1초에 한번씩 출력되는 것 또한 확인 할 수 있다.