실전 활용: 검색, 스크롤, 크기 조정

실시간 검색 구성 요소에서는 서로 다른 두 상태 변수를 유지하십시오. inputValue는 원시 입력을 나타내며, 키를 입력할 때마다 업데이트되어 입력 필드의 반응성을 유지합니다. debouncedQuery는 useDebounce(inputValue, 300)에서 가져오며, 입력이 멈춘 후 300ms가 지나면 업데이트되어 API 호출을 실행합니다. 이렇게 분리하면 과도한 요청 없이 즉각적인 시각적 피드백을 제공할 수 있습니다.

API 호출이 시작될 때만이 아니라 사용자가 입력을 시작하는 즉시 로딩 표시기를 보여 주십시오. inputValue !== debouncedQuery인 동안에는 언제나 isLoading: true로 설정하십시오. 디바운스가 처리되는 동안 두 값이 동기화되지 않은 상태이기 때문입니다. 쿼리가 안정되고 데이터를 가져오는 작업이 완료되면 다시 false로 설정하십시오. 그러면 사용자는 검색 과정 내내 반응성 있는 로딩 표시를 볼 수 있습니다.

시차 효과나 읽기 진행률 표시줄은 스크롤 위치에 따라 업데이트됩니다. 16ms 지연을 사용해 스크롤 처리기를 최대 60fps로 제한하십시오. const throttledScrollY = useThrottle(scrollY, 16)을 사용하면 스크롤이 발생할 때마다 위치를 다시 계산하는 비용 없이 사용자 인터페이스를 부드럽게 업데이트할 수 있습니다.

레이아웃을 다시 계산하기 위해 창 크기 변경을 감지할 때는 스로틀보다 디바운스를 사용하는 것이 좋습니다. 사용자가 크기 변경을 끝낸 후 한 번만 레이아웃을 계산하면 됩니다. 창 크기에는 200ms 디바운스를 사용하십시오. 크기를 끌어서 변경하는 동안에는 사용자 인터페이스에 단순화된 상태를 표시하고, 크기 변경이 멈추면 다시 계산된 레이아웃을 표시할 수 있습니다.

debouncedQuery가 변경되면 새 AbortController를 만들고 해당 signal을 fetch(url, { signal })에 전달하십시오. controller.abort()를 호출하는 정리 함수를 반환하십시오. 이렇게 하면 새로운 디바운스 쿼리가 도착할 때 이전 쿼리의 진행 중인 요청을 취소하여, 느린 이전 응답이 더 빠른 이후 응답을 덮어쓰는 경쟁 상태를 방지할 수 있습니다.

AbortController가 없으면 사용자가 "re"를 입력하고 기다린 다음 "react"를 입력할 때 두 번째 쿼리가 첫 번째 쿼리보다 먼저 반환될 수 있습니다. 이는 캐시 때문일 수 있습니다. 그러면 검색 결과에 잠시 React 결과가 표시되었다가 오래된 "re" 결과로 덮어쓰입니다. AbortController는 이전 요청을 완전히 취소하여 이 문제를 방지합니다.

드롭다운은 API 호출에는 디바운스를 사용하고 입력 표시에는 즉시 반영되는 상태를 사용합니다. inputValue가 텍스트 필드에 표시되는 내용을 제어합니다. useDebounce(inputValue, 250)가 추천 항목을 가져오는 요청이 실행되는 시점을 제어합니다. 추천 목록은 두 입력 상태와 분리된, 가져온 결과 상태에서 렌더링됩니다.

이메일이 이미 등록되어 있는지 확인하는 작업과 같은 비동기 양식 검증은 키를 입력할 때마다 서버에 요청을 보내지 않도록 디바운스해야 합니다. 필드 값에 400ms 디바운스를 적용하고, 디바운스된 값에 의존하는 useEffect에서 검증 요청을 실행하십시오. 검증이 처리되는 동안 필드에 로딩 표시기를 보여 주십시오.

디바운스는 사용자가 입력하는 동안 양식 내용을 자동 저장하는 데 적합합니다. 양식 값 객체에 1000ms 디바운스를 설정하십시오. 디바운스된 값이 변경되면 localStorage 또는 서버 엔드포인트에 저장을 실행하십시오. 디바운스가 처리되는 동안 사용자에게 "저장 중..." 표시를 보여 주고, 요청이 완료되면 "저장됨"을 표시하십시오.

지연 시간은 사용자 경험에 관한 결정입니다. 검색에는 200~300ms가 반응성과 요청 감소 사이의 균형을 맞춥니다. 크기 변경에는 150~200ms가 적절합니다. 사용자는 크기 변경 후 레이아웃이 안정되기를 기대하기 때문입니다. 자동 저장에는 1000ms를 사용하면 사용자가 문장 하나를 입력할 시간을 준 후 저장할 수 있습니다. 예상되는 상호작용 속도에 따라 조정하십시오.

실제 애플리케이션에는 여러 최적화가 동시에 필요한 경우가 많습니다. 문서 편집기에서는 자동 저장에 디바운스(1초)를 적용하고, 단어 수 계산에는 스로틀(500ms)을 적용하며, 분석에는 IntersectionObserver를 사용할 수 있습니다. 각 기법이 고유한 타이머와 범위에서 독립적으로 작동하므로 서로 잘 결합됩니다.

디바운스를 적용한 검색 쿼리와 함께 AbortController를 사용해야 하는 이유는 무엇입니까?

검색 입력, 크기 변경 처리기, 양식 자동 저장에는 useDebounce를 사용하십시오. 스크롤과 마우스 이동에는 useThrottle을 사용하십시오. 경쟁 상태를 방지하려면 디바운스된 API 호출을 항상 AbortController와 결합하십시오. inputValue !== debouncedQuery인 동안에는 언제나 로딩 상태를 표시하여 사용자 인터페이스를 반응성 있고 이해하기 쉽게 유지하십시오.