[NextJS] 클라이언트 측에서 백엔드 API 데이터 가져오기 (feat. useEffect)

 

Next.js 프로젝트에서 별도로 구동 중인 백엔드 API 서버의 데이터를 클라이언트 컴포넌트에서 가져오는 방법에 대해 알아봅니다. 이 방식은 일반적인 React 애플리케이션의 데이터 페칭 방식과 동일합니다.

 

1.  서버 구성 및 준비

데이터를 가져오기 전에, 백엔드 서버와 Next.js 서버가 각각 별도의 터미널에서 실행 중이어야 합니다.

서버	실행 명령어	기본 주소
백엔드 API	(backend 폴더에서) npm start	http://localhost:8080
Next.js	(frontend 폴더에서) npm run dev	http://localhost:3000

* Next.js 앱의 컴포넌트에서 백엔드 주소 http://localhost:8080/news로 요청을 보낼 것입니다.

 

 

2.  클라이언트 컴포넌트에서 데이터 가져오기

useEffect Hook을 사용하려면, 해당 컴포넌트는 반드시 클라이언트 컴포넌트여야 합니다.

 

a. use client와 상태 관리

컴포넌트 파일 상단에 "use client"; 디렉티브를 추가하고, 데이터 로딩 상태, 에러 상태, 최종 데이터를 관리하기 위해 'useState Hook'을 선언합니다.

"use client";

import { useEffect, useState } from 'react';
import NewsList from '@/components/news-list'; // 가상의 뉴스 리스트 컴포넌트

export default function NewsPage() {
  const [isLoading, setIsLoading] = useState(false); // 로딩 상태
  const [error, setError] = useState();            // 에러 메시지
  const [news, setNews] = useState();              // 뉴스 데이터
  // ... (이하 생략)
}

 

 

b. useEffect를 사용한 데이터 페칭 로직

컴포넌트가 마운트될 때 한 번만 ([]) 실행되는 useEffect 내부에서 비동기 함수를 정의하고 데이터를 가져옵니다.

1. 요청 시작 시 isLoading을 'true'로 설정합니다.
2. fetch 함수를 사용하여 백엔드 API 주소로 요청을 보냅니다.
3. 응답 상태 response.ok를 확인하여 에러 발생 여부를 처리합니다. 에러 시 error 상태를 설정하고 로딩을 종료합니다.
4. 성공 시 response.json()으로 데이터를 파싱하고, setNews로 상태를 업데이트한 후 로딩을 종료합니다.

 useEffect(() => {
    async function fetchNews() {
      setIsLoading(true);

      // 1. 백엔드 API로 요청
      const response = await fetch('http://localhost:8080/news'); 

      // 2. 에러 처리
      if (!response.ok) {
        setError('Failed to fetch news.');
        setIsLoading(false);
        return; // 에러 발생 시 이후 코드 실행 중단
      }

      // 3. 데이터 파싱 및 상태 업데이트
      const news = await response.json();
      setIsLoading(false);
      setNews(news);
    }
    fetchNews();
  }, []); // 빈 배열: 컴포넌트 마운트 시 1회 실행

 

 

c. 조건부 UI 렌더링

isLoading이나 error 상태에 따라 적절한 폴백 UI를 먼저 반환하고, 모든 상태가 정상일 때만 최종 뉴스 목록을 렌더링합니다.

  if (isLoading) {
    return <p>Loading...</p>; // 로딩 중 UI
  }

  if (error) {
    return <p>{error}</p>; // 에러 발생 UI
  }

  let newsContent;
  
  if (news) {
    // news 데이터가 있을 때만 NewsList 컴포넌트 생성
    newsContent = <NewsList news={news} />
  }

  return (
    <>
      <h1>News Page</h1>
      {newsContent} {/* 최종 뉴스 목록 또는 초기값 (undefined) 렌더링 */}
    </>
  );
}

 

중요: useEffect를 사용한 클라이언트 측 데이터 페칭 방식은 React에서는 일반적이지만, Next.js의 서버 컴포넌트 기능을 활용하지 못한다는 단점이 있습니다. Next.js에서는 서버 컴포넌트에서 직접 fetch를 사용하거나 서버 액션(Server Actions)을 사용하는 것이 더 권장됩니다.