React 앱에서 검색어를 입력시 debouce를 적용하는 방법에 대하여 알아보려고 합니다.



# React 앱에서 debouce 적용하는 방법
검색 등의 여러 번 이벤트가 계속해서 반복하는 경우 debounce를 적용하여 여러 번 호출 될 경우 일정 시간에 발생한 횟수에 상관없이 한 번만 호출되도록 제한을 걸어두어 많이 사용합니다. react 앱에서도 마찬가지입니다. 아래는 debounce를 적용한 예제, 방법에 대하여 알아봅니다.

debounce 예제는 검색어 입력시의 상황으로 코드가 작성되었습니다. 먼저 필요한 모듈을 추가합니다.
import React from 'react';
import _ from 'lodash';

다음으로 검색을 수행할 react 컴포넌트를 하나 만듭니다. 여기서는 class 타입 컴포넌트로 생성하였습니다.
class searchComponent extends React.Component {
  actionSearch = (keyword) => {
    console.log(keyword);

    // Code ...
  };

  searchKeyword = _.debounce(this.actionSearch, 500);

  render() {
    return (
      <input
        onkeyup={event => { this.searchKeyword(event.target.value); }}
      />
    )
  }
}

코드 작성이 완료되었습니다.


! react debounce 예제 순서대로 알아보기
위의 과정들을 하나하나 순서대로 알아보면 다음과 같습니다.


1. 필요한 모듈 선언하기
위에서는 debouce 기능을 사용하기 위해서 lodash를 사용하였습니다. 물론 바닐라JS 등 다른 debouce 방법을 사용하여도 됩니다. debouce의 값은 500ms으로 설정하였습니다.


2. 컴포넌트 내부 input에 이벤트 추가하기
이벤트 호출을 위해서 여러 이벤트 핸들러가 있지만 여기에서는 onkeyup을 사용하였습니다. 이 이벤트는 키가 눌러진 후 올라갈 때에만 호출됩니다. 호출시 this.searchKeyword 함수를 호출하게 되고 인자로 입력된 값을 전달합니다.


3. 호출된 함수에 debouce 적용하기
코드를 보면 searchKeyword에 바로 debouce를 적용하였습니다. 이렇게해야만 내부 콜백이 호출됩니다.


여기까지 모든 과정이 끝났습니다. debounce를 사용하지 않아도 검색 기능에 문제가 발생하지는 않습니다. 다만 검색 키워드에 따라 api를 호출하는 경우라면 반드시 debounce 등의 기능이 필요할 것입니다.