Next.js 앱에서 외부 백엔드와 API 로직 중앙 집중화를 구현하는 방법

Next.js와 외부 백엔드: API 로직 중앙 집중화의 필요성

Next.js 애플리케이션을 개발할 때, 외부 백엔드와의 원활한 데이터 교환은 유지보수성과 확장성을 높이기 위해 필수적입니다. API 로직을 중앙 집중화하면 유지보수의 편리성과 코드의 일관성을 보장할 수 있는 반면, 분산된 로직은 복잡성과 버그를 증가시킵니다.

왜 API 로직을 중앙 집중화해야 할까요?

• 유지보수성: API 호출을 하나의 중앙 함수에서 관리하면 업데이트나 버그 수정을 한 곳에서 간단히 처리할 수 있습니다.
• 재사용성: 한 번 작성한 코드를 어디에서나 활용할 수 있어, 서버 사이드 및 클라이언트 사이드 컴포넌트 모두에서 사용이 가능합니다.
• 일관성: 중앙화된 에러 처리로 예측 가능한 앱 동작을 보장할 수 있습니다.

API 서비스 레이어 생성하기

먼저 API 호출을 한 장소에서 관리하기 위해, services/userService.js와 같은 서비스를 작성합니다. 주요 데이터 처리 로직을 이곳에 모아둡니다.

// services/userService.js
export async function fetchUserData(userId) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.statusText}`);
  }
  return response.json();
}

위 코드는 API 데이터 호출 로직을 중앙화하여 필요시 언제든지 수정 가능합니다.

서버 측 컴포넌트에서의 서비스 사용

서버 렌더링 페이지에서는 서비스 함수를 getServerSideProps 혹은 getStaticProps 안에서 직접 호출합니다. 이는 클라이언트 측 JavaScript의 오버헤드 없이 서버 측에서 데이터를 처리할 수 있는 장점이 있습니다.

// pages/user/[id].js
import { fetchUserData } from '@/services/userService';

export async function getServerSideProps({ params }) {
  const { id } = params;
  try {
    const user = await fetchUserData(id);
    return { props: { user } };
  } catch (error) {
    console.error(error);
    return { notFound: true };
  }
}

export default function UserPage({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

위와 같은 접근은 서버 사이드에서 데이터 처리를 최적화하여 높은 성능을 보장합니다.

클라이언트 측 컴포넌트에서의 서비스 사용

동적이고 인터렉티브한 클라이언트 컴포넌트에서 API 데이터를 사용하기 위해, 별도의 커스텀 훅을 작성하여 로딩 및 에러 상태를 관리합니다.

// hooks/useUser.js
import { useState, useEffect } from 'react';
import { fetchUserData } from '@/services/userService';

export function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!userId) return;

    const getUserData = async () => {
      setLoading(true);
      try {
        const data = await fetchUserData(userId);
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    getUserData();
  }, [userId]);

  return { user, loading, error };
}

이후 클라이언트 컴포넌트에서 커스텀 훅을 활용할 수 있습니다.

// components/UserProfile.js
'use client';

import { useUser } from '@/hooks/useUser';

export default function UserProfile({ userId }) {
  const { user, loading, error } = useUser(userId);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading user data</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

이렇게 API 로직을 잘 설계하면 클라이언트 측 데이터 활용이 더욱 수월해집니다.

결론

Next.js 애플리케이션에서 API 로직의 중앙 집중화는 데이터 통합 관리에 유익합니다. 하나의 서비스 레이어 안에서 데이터 접근 로직을 중앙화함으로써 업데이트가 수월해지고, 코드 재사용과 일관성을 높여주는 이점이 있습니다. 이를 통해 서버와 클라이언트 컴포넌트 모두에서 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있게 됩니다.

참고 자료

• Next.js 공식 문서
• React 공식 문서

추가적인 정보는 위의 공식 문서를 통해 확인할 수 있습니다.