INTRO

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

App

• 🔍️ 전체 코드

State

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

• quotes : 인용문 세트 데이터