JavaScript 및 React에서 Debounce 사용에 대한 자세한 토론-JS 튜토리얼-php.cn

JavaScript 및 React에서 Debounce 사용에 대한 자세한 토론

DDD

풀어 주다： 2024-09-30 12:38:02

원래의

944명이 탐색했습니다.

JavaScript এবং React এ Debounce ব্যবহার সম্পর্কে বিস্তারিত আলোচনা

debounce는 JavaScript 및 React의 기술로, 함수 반복을 빠르게 중지하고 지정된 시간 후에 함수를 실행합니다. 특히 사용자가 입력이나 스크롤과 같은 작업을 수행할 때 성능을 향상시키는 데 주로 사용됩니다.

디바운스는 어떻게 작동하나요?

Debounce는 기본적으로 타이머를 생성하며, 지정된 시간 내에 동일한 기능이 반복적으로 실행되면 마지막 기능을 실행하기 전에 나머지 기능을 취소합니다. 예를 들어, 검색창에 입력하는 동안 서버에 API 호출을 수행하려면 키를 누를 때마다 서버를 호출하는 대신 입력이 완료된 후 지정된 시간 후에 API 호출을 수행할 수 있습니다. 이는 서버 부하를 줄이고 애플리케이션 성능을 향상시킵니다.

JavaScript로 Debounce를 만드는 방법은 무엇입니까?

디바운스 기능은 만들기가 매우 쉽습니다.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

로그인 후 복사

위의 디바운스 함수는 다음을 수행합니다.

func: 디바운싱할 함수
지연: 함수가 실행될 때까지 기다리는 시간

예

사용자가 입력을 마쳤을 때 검색창에 API 호출을 한다고 가정해 보겠습니다.

function handleSearch(query) {
    console.log("Searching for:", query);
    // এখানে API কল হবে
}

const debouncedSearch = debounce(handleSearch, 500); // 500ms delay

// Input field এ টাইপ করার সাথে সাথে debounce ফাংশন কাজ করবে
document.getElementById('searchInput').addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});

로그인 후 복사

여기서 debouncedSearch 함수는 500밀리초를 기다린 후 함수를 호출하므로 여러 키를 눌러도 서버에 여러 요청이 전송되지 않습니다.

React에서 Debounce를 어떻게 사용하나요?

React 애플리케이션에서 디바운스 기능은 일반적으로 useEffect 후크와 함께 사용됩니다. 예:

import React, { useState, useEffect } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');
    const [debouncedQuery, setDebouncedQuery] = useState(query);

    // useEffect to handle debounced query update
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500); // 500ms delay

        // Cleanup the timeout when query changes
        return () => {
            clearTimeout(timer);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            console.log("Searching for:", debouncedQuery);
            // এখানে API কল হবে
        }
    }, [debouncedQuery]);

    return (
        <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)} 
            placeholder="Search..."
        />
    );
}

export default SearchComponent;

로그인 후 복사

이 예에서는 사용자가 입력하면 쿼리 상태가 업데이트됩니다. 그러나 debouncedQuery 상태는 사용자가 입력을 중지한 500밀리초 후에만 업데이트됩니다. 결과적으로 API 호출은 여러 번이 아니라 필요할 때만 이루어집니다.