React Debounce, Throttle 실습으로 배워보기

 

 

const onChangeEvent = (e) => {
	setInputValue(e.target.value);
}

return(
	<input onChange={onChangeEvent}></input>
)

 

 

input onChange이벤트는 input의 current.value가 달라질 때마다 일어나는 이벤트이다.

우리는 위의 코드를 이용해서 input에 들어있는 value를 state에 저장할 수 있다.

 

 

 

 

네이버의 검색엔진 또한 onChange 이벤트를 이용해 검색바 밑에 연관검색어를 추천해준다.

그런데 value가 달라질 때마다 onChange 이벤트를 발생하게 되면 자원낭비와 부자연스러운 연출이 일어난다.

 

우리는 위에 사진처럼 감사합니다 를 입력했을 때 정확히는 감사합니다의 연관검색어를 원하는데

value값이 달라질때마다 이벤트를 일어나게 한다면

 

ㄱ -> 가 -> 감 -> 감ㅅ -> 감사 -> ... -> 감사합니다

에 대한 무수히 많은 이벤트가 일어나게 되고 연관검색어 화면도 무수히 많은 변화가 생기게 되어

눈에도 보기 좋지 않다. 

즉 사용자가 검색어를 모두 입력할 때까지 발생한 이전 이벤트는 필요 없다.

그래서 사용되는 것이 Debounce와 Throttle이다

 

 

Debounce는 이벤트가 일어나면 일정 시간 기다렸다가 이벤트를 수행하게 한다.

기다리고 있는 시간에 같은 이벤트가 또 들어오면 이전 이벤트를 취소된다.

 

Throttle은 일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다

 

이 두 가지 기능은 자바스크립트 유틸리티 라이브러리에 들어있다

 

npm i lodash
yarn add lodash

 

 

import React from 'react'

const Search = () => {

	const onChange = (e) => {
    	console.log(e.target.value);
    }
    
    return (
        <div>
                <input type="text" onChange={onChange}/>
        </div>
    )
}

export default Search

 

 

여기 아주 간단한 코드의 결과를 보자

input창의 감사합니다를 입력했을 때이다.

 

 

 

 

보시다시피 이벤트가 일어날 때마다 모든 변화 내역을 바로 콘솔에 찍어준다.

 

먼저 Debounce부터 해보자

 

 

import React from 'react'
import _ from "lodash"		// lodash 모듈 불러오기
const Search = () => {

    const debounce = _.debounce((e) => {
    	console.log("debounce ::: ", e.target.value);
    }, 1000);		// 첫번째 인자는 실행해야할 함수 두번째 인자는 주기를 말한다. 단위는 ms
    // 이 코드를 해석하자면 onChange 이벤트가 일어난 후 1초후에 함수가 실행되는 것이며
    // 1초가 지나기 전 onChange 이벤트가 발생하면 이전 이벤트는 실행되지 않고 취소된다.
   

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

export default Search

 

 

 

 

 이런 식으로 실행된다.

 

그다음 Throttle 차례이다.

 

 

import React from 'react'
import _ from "lodash"

const Search = () => {

    const throttle = _.throttle((e) => {
    	console.log("throttle ::: ", e.target.value);
    }, 1000);
	// throttle의 입력인자는 Debounce와 똑같다

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

export default Search

 

 

 

 

이런 식으로 주기적으로 발생한다.

 

검색 엔진이나 onChange이벤트를 세세하게 다루려 할 때 사용하는 것을 추천한다.