[React] 🛋️AJAX 사용법

▷ 데이터 필터링 예제

목록의 필터링을 구현하기 위해서는
컴포넌트의 내부나 외부에서 필터링 하는 방법이 있다.

---

🛋️ 컴포넌트 내부에서 필터링

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

/* storageUtil.js */
localStorage.setItem(
  "proverbs",
  JSON.stringify([
    "좌절감으로 배움을 늦추지 마라",
    "Stay hungry, Stay foolish",
    "Memento Mori",
    "Carpe diem",
    "배움에는 끝이 없다"
  ])
);

export function getProverbs(filterBy = "") {
  const json = localStorage.getItem("proverbs");
  const proverbs = JSON.parse(json) || [];
  return proverbs.filter((prvb) =>
    prvb.toLowerCase().includes(filterBy.toLowerCase())
  );
}

------------------
/* App.js */
import { useEffect, useState } from "react";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까?");
    const result = getProverbs();
    setProverbs(result);
  }, []);

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs
          .filter((prvb) => {
            return prvb.toLowerCase().includes(filter.toLowerCase());
          })
          .map((prvb, i) => (
            <Proverb saying={prvb} key={i} />
          ))}
      </ul>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

---

🛋️ 컴포넌트 외부에서 필터링

/* storageUtil.js */
localStorage.setItem(
  "proverbs",
  JSON.stringify([
    "좌절감으로 배움을 늦추지 마라",
    "Stay hungry, Stay foolish",
    "Memento Mori",
    "Carpe diem",
    "배움에는 끝이 없다"
  ])
);

export function getProverbs(filterBy = "") {
  const json = localStorage.getItem("proverbs");
  const proverbs = JSON.parse(json) || [];
  return proverbs.filter((prvb) =>
    prvb.toLowerCase().includes(filterBy.toLowerCase())
  );
}

------------------
/* App.js */
import { useEffect, useState } from "react";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

---

🔥 컴포넌트 내부 vs 외부

컴포넌트 내부에서 처리
HTTP 요청의 빈도를 줄일 수 있다.
But, 브라우저(클라이언트)의 메모리상에
많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다.

컴포넌트 외부에서 처리
클라이언트가 필터링 구현을 생각하지 않아도 된다.
But, 빈번한 HTTP 요청이 일어나게 되며,
서버가 필터링을 처리하므로 서버가 부담을 가져간다.

---

▷ AJAX

🛋️ AJAX란?

Asynchronous Javascript And XML

AJAX란 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며,
자바스크립트를 통해서 서버에 데이터를 요청하는 것을 말한다.(비동기 통신)

---

🛋️ AJAX 요청 보내기

// 명언을 제공하는 API의 엔드포인트가 http://서버주소/proverbs 라고 가정.
useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then((response) => response.json())
    .then((json) => {
      setProverbs(json);
    });
}, [filter]);
// filter가 변경될 때마다 실행된다.

---

🛋️ 로딩 화면 구현하기

외부 API 접속이 느릴 경우를 고려하여,
로딩 화면(loading indicator)을 구현.

1️⃣ 상태 값 만들기

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

2️⃣ 삼항 연산자 사용

// 생략, LoadingIndicator 컴포넌트는 별도로 구현했다고 가정한다.
// true라면 로딩 화면을 보여주고, false라면 로딩 완료화면을 보여준다.
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

3️⃣ fetch 요청 전후로 setIsLoading을 설정

useEffect(() => {
  setIsLoading(true); // 로딩 화면을 보여준다.
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then((response) => response.json())
    .then((json) => {
      setProverbs(json);
      setIsLoading(false); // 로딩 완료 화면을 보여준다.
    });
}, [filter]);
// filter가 변경될 때마다 실행된다.

👉 Side Effect, Effect Hook 보러가기