[React.js] debounce 사용하기

const debounce 사용하기 = ( Param ) => {

💻 return Result;

import _ from "lodash";
import React, { useMemo } from "react";

// state에 의해 페이지가 다시 렌더링 되었을 때 debounce가 초기화 되므로 정상적인 동작 X
// 따라서 Memoization 필요
const debounceFunc = useMemo(
    () =>
        _.debounce(
            () => {
                // debounce 처리할 함수
            },
            
            // 임계시간(ms): debounce 처리할 시간간격
            300,
            
            // leading: 함수가 호출됐을 때 함수 실행
            // trailing: 마지막으로 함수가 호출된 후 임계시간 만큼 지나면 함수 실행
            // defualt: leading=false, trailing=true
            { leading: false, trailing: true }
        ),
    []
);

 

📝 console.log( history )

 대학 동기들끼리 모여 사이드 프로젝트를 진행 중이다. 서로 프로젝트를 진행하면서 지식과 기술을 공유하다 보니 여러 정보들을 얻을 수 있었다. 그중 하나가 debounce이다.

 

 회사에서 프로젝트를 진행하다가 유저의 입력에 대한 검증을 api를 통해 진행했어야 했다. 입력 시 계속 api 호출하는 것은 불필요하다고 생각했다. 그래서 고민하다가 debounce에 대한 이야기가 생각이 났다.

 

 직접 debounce를 구현할 수도 있지만 lodash 라이브러리를 쓰고 있어 라이브러리의 debounce를 사용했다. 유저가 입력 중에는 임계시간 내에 함수가 호출되기 때문에 유저가 입력을 어느 정도 완료했을 때 api 호출하도록 할 수 있었다.

 

 다만 처음에 적용했을 때 예상한 대로 동작하지 않았다. 유저가 입력을 한다면 state가 변경되어 해당 컴포넌트가 새로 렌더링 되는 것이다. 컴포넌트가 렌더링 되면서 debounce 함수도 초기화되어 정상적인 동작을 하지 않았다. 그래서 useMemo를 통해 Memoization을 하여 컴포넌트가 다시 렌더링 되더라도 debounce 함수가 초기화되는 것을 막았다.

 

 만약 debounce 개념을 모르는 상태에서 문제를 해결하려 했으면 비용을 많이 소비했을 것 같다. 사이드 프로젝트에서 정보를 알려준 동기에게 감사함을 느낀다.

 

 최근 회사에서 다른 프로젝트를 진행 중인데 해당 프로젝트에서도 함수 호출에 대한 최적화가 필요하여 debounce를 사용했다. 비슷한 다른 부분에서도 최적화가 필요하다면 debounce 개념을 도입해 보는 것이 좋다고 생각한다.

 

/ /  Improvements

 debounce와 비슷한 최적화 방식으로 throttle이 있다. throttle은 함수가 여러 번 호출되면 임계시간마다 호출하는 방식이다. debounce와 옵션은 비슷하지만 leading과 trailing 동작이 다르다.

 

 throttle을 통해 해결할 수 있는 상황과 옵션이 적용되는 방식에 대해 이해할 수 있으면 최적화 방법을 하나 더 얻어갈 수 있을 것 같다.

}