React Ajax

목록 내 필터링을 구현하기 위해서는 두 가지의 접근이 있을 수 있다.

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

• 전체 목록 데이터를 불러오고, 목록을 검색어로 fiter하는 방법

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

• 컴포넌트 외부 API요청을 할 때, 필터링 한 결과를 받아오는 방법 (서버에 매번 검색어와 함께 요청하는 경우)

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

---

AJAX 요청

React에서는 이러한 Ajax 요청을 처리할 때, 훅을 사용하지 않고 네트워크 요청을 하면 그 동안에 페이지가 멈추거나 깜빡일 수 있기 때문에 Side Effect를 최소화하기 위해서 Effect Hook을 사용할 수 있다.

임의로 만든 데이터를 사용하는 것이 아닌 fetch API를 써서, 서버에 요청할 때

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

위와 같이 코드를 작성할 수 있고 외부 API접속이 느릴 경우로 위해 로딩화면의 구현은 필수적이다.
기본적으로 이러한 로딩화면의 구현에도 상태 처리가 필요하다.

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

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

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

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

---