React - 이벤트 핸들러 효율적으로 처리하기

이벤트 핸들러의 동작방식

EventHandlerTest.js

export default function EventHandlerTest() {

    const onChange = e => {
            console.log(e.target.value);
    };

    return <input type="text" onChange={onChange} />;
}

 

onChange같은 이벤트는 값이 변경될 때마다 발생합니다.

 

즉 키보드를 한번 누를때마다 “H”, “He”, “Hel”, “Hell”, “Hello” 같이 불필요한 이벤트가 실행됩니다.

 

이렇게 연속으로 이벤트가 발생하면 Application의 성능이 저하될 수 있습니다. 그래서 이런 이벤트를 다루는 두가지 방법을 알아보겠습니다.

 

Debounce

Debounce란 특정 이벤트가 발생할 때 작동하는 핸들러가 과도하게 작동하는 것을 방지하기 위해 연이어 호출되는 이벤트중 가장 마지막 이벤트만 핸들러를 호출하도록 해줍니다. 아무리 많은 이벤트가 발생해도 마지막 이벤트 딱 한번만 발생시킵니다.

 

EventHandlerTest.js

import { debounce } from "lodash";

export default function EventHandlerTest() {

    const onChange = debounce((e) => {
            console.log(e.target.value);
    }, 300);

    return <input type="text" onChange={onChange} />;
}

 

Throttle

Throttle이란 이벤트가 발생하면 즉시 실행되고 지정한 시간동안 이벤트가 발생하지 못하도록 막아줍니다. 즉, 핸들러가 주어진 시간동안 딱 한번만 실행되도록 해줍니다.

 

EventHandlerTest.js

import { debounce } from "lodash";

export default function EventHandlerTest() {

    const onChange = debounce((e) => {
            console.log(e.target.value);
    }, 300);

    return <input type="text" onChange={onChange} />;
}

 

Debounce와 Throttle을 사용하면 좋은점

클라이언트에서 불필요한 함수를 호출하지 않고, 서버에 불필요한 Api 요청을 보내지 않아서 리소스와 비용을 절약할 수 있습니다.

불필요한 호출을 막아주기 때문에 사용자들에게 좀 더 좋은 부드러운 서비스를 제공할 수 있습니다.

 

Debounce는 주로 Api를 요청하는 자동완성, 버튼 중복클릭 방지에 사용합니다.

 

Throttle은 무한 스크롤을 구현할 때 사용합니다.