[URH-43] useDebounce 신규

[suhyeoonn]

👾 Pull Request

• 티켓: useDebounce 신규
• 상태: 신규

1️⃣ Spec

• useDebounce 훅은 주어진 콜백 함수가 일정 시간(delay) 동안 호출되지 않을 때까지 콜백 함수의 실행을 지연시킵니다.

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

function App() {
  const [searchText, setSearchText] = useState('');
  const [debouncedText, setDebouncedText] = useState(searchText);
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setSearchText(newValue);
    debounceSearchText(newValue);
  };

  const debounceSearchText = useDebounce((text: string) => {
    setDebouncedText(text);
  }, 200);

  const filteredUsers = users.filter((u) =>
    u.name.toLowerCase().includes(debouncedText.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={searchText} onChange={handleChange} />
      <ul>
        {filteredUsers.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
}

4️⃣ 관련 문서 (선택 사항)

• 없음