요구사항

• 검색창에 있는 입력값에 대한 상태를 최신값으로 반영하여야 한다.
  • 제어 컴포넌트
• 입력값에 대한 상태는 디바운싱 처리를 하여야 한다. (불필요한 리렌더링 방지)
• 검색창에 있는 검색어에 대한 데이터를 불러와야 한다.
• 불러온 검색 결과 데이터를 보여줘야 한다.

구현결과

import { useEffect, useState } from 'react';
import { Input } from '../ui/input';

const SearchBar = () => {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState(query);
  const [searchResults, setSearchResults] = useState([]);

  // ✅ 디바운싱을 위한 useEffect
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 300); // 300ms 디바운싱 시간

    return () => {
      clearTimeout(handler);
    };
  }, [query]);

  // ✅ 디바운싱된 쿼리로 검색 요청
  useEffect(() => {
    if (debouncedQuery) {
      // ✅ API 요청을 보내는 함수
      const fetchResults = async () => {
        const response = await fetch(`/api/search?q=${debouncedQuery}`);
        const data = await response.json();
        setSearchResults(data);
      };

      fetchResults();
    } else {
      setSearchResults([]);
    }
  }, [debouncedQuery]);

  return (
    <div>
      <Input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="검색어를 입력하세요"
        className="w-full rounded border p-2"
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchBar;

추가적으로 디바운싱을 담당하는 로직을 따로 커스텀 훅으로 뺴서 추상적으로 만들 수 있습니다.

// src/hooks/useDebounce.ts

import { useState, useEffect } from 'react';

const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

검색 결과에 대한 불러오는 API가 없어서 단출한 점... 이해해주시길 바랍니다...

배운 점

• 검색창에 있는 검색어에 대한 결과값을 즉시적으로 보여주는 UI를 만들기 위해서는 최신값을 동기화하는 제어 컴포넌트를 사용하여야 했다. 여기서 검색어가 지속적으로 변경이 되어 불필요한 리렌더링을 야기하기 때문에 디바운싱을 이용해서 마지막에만 상태를 반영하여 UI를 업데이트하여야 한다.

• 검색창에 너무 많은 코드가 있으면 가독성과 유지보수성이 떨어지기 때문에 커스텀 훅으로 추상적인 코드를 만들면서 좋을 것 같다는 생각이 들었다.