useDebounce

입력값의 변경을 지연시키는 Hook입니다. 연속된 변경이 발생할 때 마지막 변경 이후 지정된 시간이 경과한 후에만 값을 업데이트합니다.

Props

이름	타입	설명	기본값
value	`T`	디바운스할 입력 값	-
delay	`number`	지연 시간 (밀리초)	`500`

Return

디바운스된 값 (T)

Usage

import { useDebounce } from '@teamsparta/react';
 
function Example() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
 
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="입력하세요..."
      />
      <div>입력값: {value}</div>
      <div>디바운스된 값: {debouncedValue}</div>
    </div>
  );
}

Example

실시간 검색

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);
 
  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="검색어를 입력하세요..."
      />
      <div>검색 중인 키워드: {debouncedQuery}</div>
    </div>
  );
}

자동 저장

function AutoSaveEditor() {
  const [content, setContent] = useState('');
  const debouncedContent = useDebounce(content, 1000);
 
  useEffect(() => {
    if (debouncedContent !== content) {
      saveToServer(debouncedContent);
    }
  }, [debouncedContent]);
 
  return (
    <div>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="내용을 입력하세요..."
      />
      <div>마지막 저장된 내용: {debouncedContent}</div>
    </div>
  );
}

폼 유효성 검사

function ValidatedInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const debouncedEmail = useDebounce(email, 500);
 
  useEffect(() => {
    const validateEmail = async () => {
      try {
        await checkEmailAvailability(debouncedEmail);
        setError('');
      } catch (err) {
        setError('이미 사용 중인 이메일입니다');
      }
    };
 
    if (debouncedEmail) {
      validateEmail();
    }
  }, [debouncedEmail]);
 
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="이메일을 입력하세요"
      />
      {error && <div className="error">{error}</div>}
    </div>
  );
}

주의사항

연속적인 입력이 예상되는 경우에 사용하면 효과적입니다 (예: 검색, 입력 폼).
모든 입력값의 변경을 추적해야 하는 경우에는 사용을 피해야 합니다.
지연 시간은 사용자 경험과 서버 부하를 고려하여 적절히 설정해야 합니다.
네트워크 요청과 함께 사용할 때는 에러 처리를 고려해야 합니다.

useClickAway useDocumentVisibility