[React] 리액트로 실시간 검색창 구현하기

 

Debounce는 이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리하는 것을 말하며, Memoize는 이전 연산 결과를 재사용하는 것을 말한다. Debounce와 Memoize를 활용해 불필요한 API 요청을 방지할 수 있다.

 

Animichan은 일본 애니메이션에 등장한 인용문(Quotes)을 제공하는 OpenAPI다. title 매개변수에 애니메이션 제목을 쿼리스트링 보내서 요청하면, 해당 애니메이션의 인용문 세트를 받아올 수 있다. 이 API를 이용해 간단한 검색 어플리케이션을 구현할 수 있다.

// Request
'https://animechan.vercel.app/api/quotes/anime?title=naruto'

// Output
[{ anime: "Naruto", character: "...", quote: "..." }, ...]

 

 

HOW TO WORK ⭐️

---

1. App : quotes(인용문 세트) 상태 관리
   • 검색창(SearchBar)에서 입력을 마친 검색어(term)를 받아
   • 해당 검색어로 API 요청(onSearchSubmit 핸들러 실행)
   • 인용문 세트를 받아온 후, 인용문 리스트(quotes) 렌더
2. SearchBar : term(검색어) 상태 관리
   • 검색어(debouncedTerm; 임시 검색어) 입력 후 1초간 추가 입력이 없을 경우
   • 해당 검색어를 요청 검색어(term)로 저장한 후
   • App 컴포넌트에 있는 API 요청 핸들러 실행
3. Quote : 1개 인용문에 대한 컨테이너
4. animeChan : API 요청 (Lodash 라이브러리의 Memoize 활용)
   • 이미 검색했던 키워드라면 캐시 데이터(Map 객체) 재사용
   • 이전에 검색하지 않았던 키워드라면 API 요청진행

 

App

import React, { useState } from 'react';

import '../styles/App.css';
import Quote from './Quote';
import SearchBar from './SearchBar';
import { requestQuotes } from '../apis/animeChan';

const App = function () {
  const [quotes, setQuotes] = useState([]);
  const [noResults, setNoResults] = useState(false);

  const onSearchSubmit = async (term) => {
    const quotesArray = await requestQuotes(term.toLowerCase());

    setNoResults(quotesArray.length === 0);
    setQuotes(quotesArray);
  };

  const clearResults = () => setQuotes([]);

  const renderedQuotes = quotes.map((quote, i) => {
    return <Quote quote={quote} key={i} />;
  });

  return (
    <div className="app">
      <h1 className="title">Search Quotes</h1>

      <div className="disclaimer-container">
        <p className="disclaimer">
          Get 10 quotes from your favorite{' '}
          <span className="highlight">anime</span>!
        </p>
      </div>

      <SearchBar onSearchSubmit={onSearchSubmit} clearResults={clearResults} />

      {noResults && <p className="no-results">No results found.</p>}
      <div className="main-content">{renderedQuotes}</div>
    </div>
  );
};

export default App;

 

State

const [quotes, setQuotes] = useState([]);
const [noResults, setNoResults] = useState(false);

 

• quotes : 인용문 세트 데이터
• noResults : 검색어 키워드에 대한 인용문 유무 여부

 

Handler

const onSearchSubmit = async (term) => {
  const quotesArray = await requestQuotes(term.toLowerCase());
  setNoResults(quotesArray.length === 0);
  setQuotes(quotesArray);
};

const clearResults = () => setQuotes([]);

 

• onSearchSubmit : 검색어에 대한 API 요청 후 결과를 받아 quotes noResults 상태 업데이트
• clearResults : 검색어가 '' 빈 문자열일 경우 quotes 상태를 빈 배열로 변경하는 핸들러.

 

Render

SearchBar 컴포넌트에 정의한 두 핸들러를 넘기고, 검색어에 대한 인용문 세트가 1개 이상이라면 Quote 컴포넌트를 통해 각 인용문을 렌더한다.

// Quote, SearchBar 컴포넌트 import 구문 생략

const renderedQuotes = quotes.map((quote, i) => {
  return <Quote quote={quote} key={i} />;
});

return (
  <div className="app">
    <SearchBar onSearchSubmit={onSearchSubmit} clearResults={clearResults} />
    {noResults && <p className="no-results">No results found.</p>}
    <div className="main-content">{renderedQuotes}</div>
  </div>
);

 

SearchBar ⭐️

import React, { useEffect, useState } from 'react';

import '../styles/SearchBar.css';

const SearchBar = function ({ onSearchSubmit, clearResults }) {
  const [term, setTerm] = useState('');
  const [debouncedTerm, setDebouncedTerm] = useState(term);

  // update 'term' value after 1 second from the last update of 'debouncedTerm'
  useEffect(() => {
    const timer = setTimeout(() => setTerm(debouncedTerm), 1000);
    return () => clearTimeout(timer);
  }, [debouncedTerm]);

  // submit a new search
  useEffect(() => {
    if (term !== '') {
      onSearchSubmit(term);
    } else {
      clearResults();
    }
  }, [term]);

  return (
    <div className="searchbar">
      <input
        className="searchbar-input"
        type="text"
        placeholder="Search by title. . ."
        onChange={(e) => setDebouncedTerm(e.target.value)}
        value={debouncedTerm}
      />
    </div>
  );
};

export default SearchBar;

 

State

const [term, setTerm] = useState('');
const [debouncedTerm, setDebouncedTerm] = useState(term);

 

• term : 1초간 추가적인 검색어 입력이 없을 때의 검색어 상태. 이 검색어로 API 요청이 진행된다
• debouncedTerm : input 창에 변화가 일어날 때마다 저장될 임시 검색어 상태

 

Effect

useEffect for debouncedTerm

useEffect(() => {
  const timer = setTimeout(() => setTerm(debouncedTerm), 1000);
  return () => clearTimeout(timer);
}, [debouncedTerm]);

 

1. 검색창(input)에 키워드 입력 → onChange 이벤트 발생
2. debouncedTerm 상태 변경
3. useEffect 실행 (종속성 배열에 debouncedTerm을 명시했으므로)
   1. 클린업 함수 실행 → 이전 timer 제거
   2. 1초 후 term 상태를 변경하는 timer 등록
4. 1초가 지나기전 검색창에 onChange 이벤트가 발생한다면 3번 반복. 등록한 timer는 실행되지 않으므로 term 상태는 그대로 유지

 

useEffect for term

useEffect(() => {
  if (term !== '') {
    onSearchSubmit(term);
  } else {
    clearResults();
  }
}, [term]);

 

1. 1초 후 등록한 timer가 실행돼서 term 상태 변경
2. useEffect 실행 (종속성 배열에 term을 명시했으므로)
   • term 상태가 빈 문자열이 아니라면 onSearchSubmit 핸들러 실행(API 요청)
   • term 상태가 빈 문자열이라면 clearResults 핸들러 실행(App의 quotes 상태를 빈 배열로 변경)

 

Render

term이 아닌 debouncedTerm을 input 태그에 바인딩한다.

return (
  <div className="searchbar">
    <input
      className="searchbar-input"
      type="text"
      placeholder="Search by title. . ."
      onChange={(e) => setDebouncedTerm(e.target.value)}
      value={debouncedTerm}
    />
  </div>
);

 

API ⭐️

사용자가 a → b → a → b 순서로 검색어를 입력했다면 총 4번의 API 호출이 이뤄진다.

1) a 검색어 입력 : a 검색어에 대한 API 요청
2) b 검색어 입력 : b 검색어에 대한 API 요청
3) a 검색어 입력 : a 검색어에 대한 API 요청
4) b 검색어 입력 : b 검색어에 대한 API 요청

 

Lodash의 Memoize 메서드를 사용하면 API 호출을 두 번으로 줄일 수 있다.

1) a 검색어 입력 : a 검색어에 대한 API 요청
2) b 검색어 입력 : b 검색어에 대한 API 요청
3) a 검색어 입력 : 1번 결과 재사용
4) b 검색어 입력 : 2번 결과 재사용

 

_.memoize 메서드의 첫 번째 인자는 연산을 수행할 로직이 담긴 콜백 함수를 받는다. 만약 해당 콜백 함수가 받은 파라미터의 값으로 연산을 수행한 적이 있다면 해당 연산 결과를 재사용한다. 이전에 받은 적이 없었던 파라미터 값이라면, 연산을 수행하고 캐시에 저장된다. Memoize 관련 포스팅은 링크 참고.

// apids/animeChan.js
import _ from 'lodash';

export const requestQuotes = _.memoize(async (title) => {
  const res = await fetch(
    `https://animechan.vercel.app/api/quotes/anime?title=${title}`,
  );
  if (res.status !== 200) return [];

  const quotesArray = await res.json();
  return quotesArray;
});

 

저장된 캐시는 requestQuotes.cache에서 확인할 수 있다. world 검색어로 입력해보면 아래처럼 나온다.

 

 

 

페이지네이션

---

더보기 버튼이나 무한 스크롤 등을 구현하려면 term 상태를 SearchBar가 아닌 App에서 관리하는 게 유지보수하기 더 편하다. term 상태 외에 현재 페이지에 대한 정보를 담는 currentPage 상태도 필요하다.

// App.js
const [term, setTerm] = useState('');
const [currentPage, setCurrentPage] = useState(0); // 페이지 정보
// ...생략

useEffect(() => {
  if (term === '') {
    setRenderData([]);
    setNoResults(false);
  }
}, [term]);

return (
  // ...생략
  <SearchBar term={term} setTerm={setTerm} setCurrentPage={setCurrentPage} />
);

 

SearchBar 컴포넌트의 useEffect에선 debouncedTerm(현재 입력되어 있는 검색어)와 term이 같지 않을 때만 실행되도록 한다. 검색어가 달라졌다면 페이지(currentPage)도 0(혹은 1)부터 다시 시작해야 한다.

// SearchBar.js
const [debouncedTerm, setDebouncedTerm] = useState(term);

useEffect(() => {
  // isChanged는 term과 debouncedTerm이 같은지 확인하는 유틸 함수(trim 적용 후 같은지 확인)
  const isChanged = checkIsTermChanged(term, debouncedTerm);
  let timer;

  if (isChanged) {
    timer = setTimeout(() => {
      setTerm(debouncedTerm);
      setCurrentPage(0); // 검색어(debouncedTerm)가 바뀌었으면 0페이지 부터 다시 시작
    }, 1000);
  }

  return () => clearTimeout(timer);
}, [debouncedTerm, term]);

 

 

REFERENCE

---

How to Create an Optimized Real-Time Search with React