React Debounce 최적화 경험 👨🔧
Debounce? 🙄
Debounce는 특정 시간 동안 연속적으로 호출되는 이벤트 중 마지막 이벤트만 호출할 때 사용하는 기법이다.
어디에 적용할까? 🧐
현재 진행하고 있는 토이 프로젝트에서 AutoComplete(자동완성) 컴포넌트에 lodash의 debounce를 적용했다. 사용자가 입력한 문자열을 네이버 책 검색 Open API의 Query String으로 전달하고, 응답받은 책 목록 데이터를 자동 완성 목록에 반영했다.
그런데, 사용자가 타이핑을 할 때마다 API를 호출하게 되면 짧은 시간 동안 너무 많은 API를 호출하게 되고 이는 네트워크 트래픽 증가로 이어져 이를 방지하고자 도입했다.
적용 💡
function AutoCompleteBook(props) {
const { value, width, onChange, isReadOnly } = props;
const [inputValue, setInputValue] = useState('');
const [options, setOptions] = useState([]);
const [isLoading, setIsLoading] = useState(false);
// ... 로직
const lazyFetchBooks = useCallback(
debounce(async (bookTitle) => {
try {
const res = await apiCall({
url: `/ext/book?bookTitle=${bookTitle}`,
method: 'get',
});
const result = getAjaxData(res);
setOptions(result.map(item => ({ ...item, key: item.isbn, text: item.title })));
} catch (error) {
handleAjaxError(error);
} finally {
setIsLoading(false);
}
}, 750),
[],
);
return (
<Autocomplete
// ... props
onInputChange={(_e, newInputValue) => {
setIsLoading(true);
lazyFetchBooks(newInputValue);
setInputValue(newInputValue);
}}
noOptionsText={
isLoading ? (
<div style={{ textAlign: 'center' }}>
<CircularProgress size={25} />
</div>
) : (
'검색결과가 없습니다.'
)
}
/>
);
}
마지막 이벤트 발생 이후 750ms 동안 추가 이벤트가 발생하지 않을 경우 debounce 콜백 함수 실행하도록 코드를 작성했다. 이를 통해 타이핑을 할 때마다 ajax 통신이 발생하는 것을 예방할 수 있었다.
여기서 한 가지 주의할 점은 useCallback hook api를 사용하지 않으면, state 변경으로 렌더링이 발생할 때마다 debounce 함수가 생성된다. 이는 여러 개의 debounce 함수가 병렬로 실행되니 주의하도록 하자.
이 경험을 통해 📝
React에서 ajax call을 최소화하는 최적화 방법을 구현할 수 있게 되었다.
Author And Source
이 문제에 관하여(React Debounce 최적화 경험 👨🔧), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wslee94/React-Debounce-최적화-경험저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)