프론트엔드(8)
-
React로 타이머 hooks 간단히 개발하기
import React, { useRef, useState } from 'react';export const useTimer = () => { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(); const startTimer = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } }; const..
2024.11.18 -
디바운스와 쓰로틀링
디바운스(Debounce)와 쓰로틀링(Throttling)은 웹 개발에서 이벤트 처리를 최적화하기 위해 사용되는 두 가지 기법이다. 이들은 연속적으로 발생하는 이벤트를 효율적으로 관리하여 성능을 향상시키는 데 도움을 준다. 디바운스(Debounce) 디바운스는 연속적으로 발생하는 이벤트 중 마지막 이벤트만을 처리하는 기법이다. 즉, 일정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 발생한 이벤트를 실행한다. 이는 사용자가 입력을 멈춘 후에만 처리를 수행하므로, 불필요한 연산을 줄일 수 있다. 사용 사례검색 자동완성 : 사용자가 입력을 멈춘 후에만 서버에 요청을 보내어 검색 결과를 가져온다.창 크기 조절 : 사용자가 창 크기 조절을 멈춘 후에 레이아웃을 재계산한다. 쓰로틀링(Throttl..
2024.11.14