컴포넌트 내에서 AJAX 요청

우리가 흔히 데이터를 받아와 필터링을 해야하는 로직을 짜아할 때가 있다. 이때 필터링을 구현하기 위해서는 다음과 같은 두가지 접근이 있을 수 있다!

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

1. 컴포넌트 내에서 필터링

처음 단 한번, 외부 API로부터 명언 목록을 받아오고, filter 함수를 이용한다.

2. 컴포넌트 외부에서 필터링

검색어가 바뀔 때마다, 외부 API를 호출한다.

이 둘의 각각 장단점은 무엇일까? 앞서 예저에서는 storageUtil.js에서 LocalStorage API를 직접 구현하였지만 이는 외부 API처럼 구현했다고 말할 수 있습니다. 즉, 서버 요청으로 대체할 수 있습니다. 만일 서버에서 수십만개의 명언을 제공한다고 가정해본다면 클라이언트가 필터링 구현을 생각하지 않아도 되지만, 번번한 HTTP 요청이 일어나게 될 것이며, 서버에 부담이 되어진다. 하지만 컴포넌트 내부에서 처리하게 된다면, HTTP 요청의 빈도를 줄일 수 있다는 장점이 있지만, 브라우저(클라이언트)의 메모리에 많은 부담이 늘어나게 된다.

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

AJAX 요청을 보내자!

임의로 구현한 storageUtil.js 대신에 fetch API를 써서, 서버에 요청한다면 코드는 어떻게 될까? 명언을 제공하는 API의 엔드포인트가 http://서버주소/proverbs라고 가정해보자

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

AJAX 요청이 매우 느릴경우?

모든 네트워크 요청이 항상 즉각적인 응답을 가져다주는 것은 아니다. 외부 API 접속이 느릴경우를 고려하여, 로딩 화면(loading indicator)의 구현은 필수적이다.

[그림] loading indicator

[그림] loading placeholder

우리가 보다 나은 UX를 구현하기 위해서는 위의 그림처럼 표시해주는 것이 좋다. 이때에는 상태처리를 이용해서 작성하면 된다!

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

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

fetch 요청의 전후로 setLoading을 설정해주어서 보다 나은 UX를 구현할 수 있다!

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