디바운싱과 쓰로틀링

디바운싱

💡 연속으로 호출되는 함수들 중에 마지막에 호출되는 함수 (또는 제일 처음 함수)만 실행되도록 하는 것

ex) resize 이벤트, 검색 input 창 이벤트

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

const debounce = () => {
    const [value1, setValue1] = useState("");
    const [value2, setValue2] = useState("");
    const handleChange1 = (event:any) => setValue1(event.target.value)
    const handleChange2 = (event:any) => setValue2(event.target.value)

    useEffect(() => {
        console.log('마운트 될 때만 실행된다.');
    }, []);

    useEffect(() => {
        console.log('리렌더링 될 때 마다 실행된다.');
    });

    // useEffect(() => {
    //     console.log(value1);
    //     console.log('업데이트 될 때 실행된다.');
    // }, [value1]);

    /**특정값이 업데이트 되기 전에 cleanup이라는 함수를 실행하고 싶을 때 */
    useEffect(() => {
        console.log('effect');
        console.log(value1);
        return () => {
            console.log('cleanup');
            console.log(value1);
        };
    }, []);

    useEffect(()=>{
        console.log("일반입력",value1)
    },[value1]);

    useEffect(()=>{
        const debounce = setTimeout(()=>{
            console.log("디바운스입력",value2)
        },1000);

        /**
         * clearTimeout: setTimeout함수를 취소하는 역할
         * ex)
         *   - 일정 시간 뒤 로그아웃 처리할 때
         *   - 몇초뒤에 이벤트 팝업을 띄울 경우
         * */

        return () => clearTimeout(debounce)
    },[value2]);

    return (
        <>
            <div>일반입력: <input value={value1} onChange={handleChange1}/></div>
            <div>디바운스입력: <input value={value2} onChange={handleChange2}/></div>
        </>
    );
}

export default debounce()

쓰로틀링

💡 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

ex) 스크롤 이벤트

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

const throttle = () => {
    const [page, setPage] = useState(10);
    const [books, setBook] = useState([]);
    const [throttle, setThrottle] = useState(false);

    const handleScroll = () => {
        if (throttle) return;
        if (!throttle) {
            setThrottle(true);
            setTimeout(async ()=>{
                if(page >= 50) setPage(page);
                else setPage((page) => page + 5)
                setThrottle(false)
            }, 300)
        }
    }

    useEffect(()=>{
        /**
         * 맵핑 함수의 첫 번째 인자 언더스코어(_) 는 특별한 인자가 아니라,
         * 불필요한 인자의 공간을 채우기 위한 용도입니다
         * */
        setBook(Array.from({length:page},(_,idx)=> idx +1))
    },[page])

    return(
        <>
            <div className="book" onScroll={handleScroll}>
                <div>
                    {books.map((page, idx) => (
                        <div className="page" key={idx}>
                            {page}
                        </div>
                    ))}
                </div>
            </div>
        </>
    )
}

export default throttle()

출처: https://velog.io/@skawnkk/debounce-throttle
출처 내 깃헙:https://github.com/ABC-TEAM-PRJ/main-service/commit/68272423b7fbc4d96c60e5a1e54e69dd609e1361
https://github.com/ABC-TEAM-PRJ/main-service/commit/2126c44b7a87900f72efa77dacbd5a1c6cacfea9