4관문. Hook Composition

관문 4 / 7

useDebounce + useFetch를 조합하여 타이핑 중 자동완성 검색 기능을 구현하라.

📖 이론 비급

Hook Composition: 작은 훅들의 조합

리액트 훅의 진정한 강점은 조합 가능성이다. 각 훅이 단일 책임을 가지면 조합으로 복잡한 기능을 구성할 수 있다.

useSearchHistory = useDebounce + useFetch + useLocalStorage 각 훅을 독립적으로 테스트하고, 조합해서 비즈니스 로직을 완성한다. 복잡한 컴포넌트를 여러 단일 책임 훅으로 분해하는 습관을 기르자.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debouncedValue;
}

// TODO: useSearch 훅을 구현하라
// useDebounce(query, 400)으로 타이핑 딜레이 처리
// debouncedQuery가 빈 문자열이면 fetch 안 함
// jsonplaceholder.typicode.com/posts?q={query} 사용
function useSearch(query) {
}

export default function SearchBox() {
  const [query, setQuery] = useState('');
  const { data, loading } = useSearch(query);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="검색어 입력..." />
      {loading && <p>검색 중...</p>}
      <ul>{data?.slice(0, 5).map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

Open Sandbox