컴포넌트 내에서 AJAX 요청

목록 내 필터링 구현의 2가지 방법

1. 컴포넌트 내에서 필터링 : 전체 목록 데이터를 불러오고, 목록을 검색어로 filter하는 방법

2. 컴포넌트 외부에서 필터링 : 컴포넌트 외부로 API 요청을 할 때, 필터링한 결과를 받아오는 방법(보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당)

 

두 방식의 차이점

분류	장점	단점
컴포넌트 내부에서 처리	HTTP 요청의 빈도를 줄일 수 있다	브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다
컴포넌트 외부에서 처리	클라이언트 필터링 구현을 생각하지 않아도 된다	빈번한 HTTP 요청이 일어나게 되며, 서버의 필터링을 처리하므로 서버가 부담을 가진다

 

AJAX 요청이 느릴 경우

1. 기본적으로 Loading indicator의 구현은 상태 처리가 필요하다

const [isLoading, setLoading] = useState(true);

//생략, LoadingIndicator 컴포넌트는 별도로 구현 가정
return {isLoading ?  <LoadingIndicator /> : <div>로딩 완료 화면</div>}

2. fetch 요청 전후로 setIsLoading을 설정해 주어 보다 나은 UX를 구현 할 수 있음

useEffect(() => {
  setIsLoading(true);
  fetch('http://서버주소/proverbs?q=${filter}')
  .then(res => res.json())
  .then(result => {
    setProverbs(result);
    setIsLoading(false);
  })
},[filter]);