20. React use

⚙️ React에서 비동기 데이터를 다루는 다양한 방식

🔄 useEffect를 활용한 비동기 데이터 로딩

'use client';

import { useEffect, useState } from 'react';
import { Product } from '@/libs/types/types';
import { fetchProducts } from '@/libs/fetchProducts';

export function Products() {
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    (async () => {
      const result = await fetchProducts();
      setProducts(result);
    })();
  }, []);

  return (
    <ul className="flex flex-col gap-4">
      {products.map((product) => (
        <li key={product.id} className="border border-green-400">
          <strong>{product.title}</strong>
        </li>
      ))}
    </ul>
  );
}

✅ 흐름 요약

1. products라는 초기 상태값을 빈 배열로 설정

2. useEffect 안에서 비동기 데이터를 호출

3. setState로 데이터를 갱신

4. 컴포넌트가 리렌더링되어 새로운 데이터가 화면에 표시됨

⛓️ 서버 사이드에서 비동기 데이터를 처리하려면?

🧩 비동기 컴포넌트와 Suspense

// ❌ 잘못된 사용 (클라이언트 컴포넌트에 async 사용)
'use client';

import { fetchProducts } from '@/libs/fetchProducts';

export async function Products() {
  const products = await fetchProducts();
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

이 방식은 잘못된 사용이다. async 컴포넌트는 서버에서만 사용할 수 있으며, 클라이언트 컴포넌트에는 async를 붙일 수 없다.

✅ 올바른 구조

// 클라이언트 컴포넌트
'use client';

import { Product } from '@/libs/types/types';

export function Products({ products }: { products: Product[] }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

// 서버 컴포넌트
import { fetchProducts } from '@/libs/fetchProducts';
import { Products } from './products';

export async function ProductsContainer() {
  const products = await fetchProducts();
  return <Products products={products} />;
}

💡 use 훅의 등장

✅ 구조를 단순하게

// 서버 컴포넌트
import { fetchProducts } from '@/libs/fetchProducts';
import { Suspense } from 'react';
import { Products } from './products';

export default function Page() {
  const productsPromise = fetchProducts();

  return (
    <div>
      <h1>Use Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Products productsPromise={productsPromise} />
      </Suspense>
    </div>
  );
}

// 클라이언트 컴포넌트
'use client';

import { Product } from '@/libs/types/types';
import { use } from 'react';

export function Products({ productsPromise }: { productsPromise: Promise<Product[]> }) {
  const products = use(productsPromise);

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

🧠 마무리

• useEffect는 클라이언트에서의 비동기 데이터 패칭에 적합

• 서버에서 데이터를 패칭할 땐 서버 컴포넌트를 분리하거나

• 실험적인 use를 활용하면 더욱 깔끔한 구조를 만들 수 있다

예제

1. client-component

2. async-component

3. use-component