🌐 26. React에서의 비동기 처리 패턴 정리 — fetch부터 Suspense까지

---

React로 데이터를 불러오는 방법은 다양하다.
하지만 초보 때는 무조건 useEffect + fetch만 쓰다 보니
실제로 더 좋은 방법이나 효율적인 패턴이 있는 걸 모르고 지나치는 경우도 많다.

이번 글은 React에서 비동기 데이터를 불러오는 여러 가지 방식을
기본부터 고급까지 순서대로 정리한 내용이다.

---

✅ 1. 가장 기본: fetch + useEffect

useEffect(() => {
  fetch('/api/data')
    .then((res) => res.json())
    .then((data) => setData(data));
}, []);

• 가장 기본적인 방법
• 상태: useState로 직접 관리
• 단점: 로딩, 에러 처리 등 모든 것을 수동으로 처리해야 함

---

✅ 2. async/await + try-catch 패턴

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('/api/data');
      const json = await res.json();
      setData(json);
    } catch (e) {
      setError(true);
    }
  };
  fetchData();
}, []);

• 코드 가독성이 좋아짐
• 여전히 로딩 상태, 에러 상태를 직접 다뤄야 함

---

✅ 3. 사용자 정의 Hook으로 로직 분리

function useUserData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/user').then((res) => res.json()).then(setData);
  }, []);
  return data;
}

• 반복되는 fetch 로직을 custom hook으로 분리
• 실무에서 아주 자주 쓰임
• 하지만 에러, 로딩 상태도 별도로 만들어야 함

---

✅ 4. SWR, React Query 같은 라이브러리 활용

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

function App() {
  const { data, error, isLoading } = useSWR('/api/data', fetcher);
}

• 상태 관리, 캐싱, 리트라이까지 기본 내장
• 로딩/에러 처리도 깔끔
• 서버 상태를 다루는 가장 대표적인 방식

✅ React Query는 Mutation, Infinite Scroll 등도 지원

---

✅ 5. Suspense for Data Fetching (React 18+)

React 18부터 도입된 새로운 개념
컴포넌트가 데이터를 불러올 때까지 기다리는 방식을 React 자체가 지원

const Post = React.lazy(() => import('./Post'));

<Suspense fallback={<Loading />}>
  <Post />
</Suspense>

• 아직은 React Query, Relay 등과 함께 사용할 때 강력함
• 직접 fetch를 Suspense와 연동하려면 실험적 기능 사용 필요

---

🔁 요약: 어떤 상황에서 어떤 걸 쓰면 좋을까?

상황	추천 방법
단순한 fetch, 소규모 프로젝트	useEffect + fetch
코드 분리 및 재사용 필요	Custom Hook 활용
실무, 복잡한 서버 상태 관리 필요	SWR 또는 React Query
SSR + 비동기 처리 (Next.js)	getServerSideProps, useSWR
React 18, 실험적 렌더링 전략	Suspense + use

---

📝 내가 느낀 점

처음엔 useEffect만 쓰면 다 되는 줄 알았는데,
SWR이나 React Query를 써보고 나서야 상태 관리, 캐싱, 로딩 핸들링까지
모든 걸 손으로 관리할 필요가 없다는 걸 알게 됐다.

지금은 SWR이든 React Query든 프로젝트 크기에 맞춰 적절히 선택하고,
필요하면 Suspense까지 활용해보는 연습을 하고 있다.

---

⛓️ "비동기 처리는 단순히 데이터를 불러오는 게 아니라,
사용자 경험을 기다림 없이 연결하는 일이다."