클라이언트 컴포넌트에서 데이터 페칭

클라이언트 컴포넌트에서의 데이터 페칭은 동적이고 인터랙티브한 UI를 구현할 때 중요합니다.

이 절에서는 클라이언트 컴포넌트에서의 데이터 페칭 방법과 서버 컴포넌트와의 차이점, 그리고 효율적인 데이터 관리 전략에 대해 알아보겠습니다.

클라이언트 컴포넌트에서의 데이터 페칭

클라이언트 컴포넌트에서 데이터를 페칭할 때는 주로 React의 훅을 사용합니다.

기본적인 방법은 다음과 같습니다.

'use client'
 
import { useState, useEffect } from 'react'
 
export default function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
 
  useEffect(() => {
    async function fetchUser() {
      const res = await fetch(`/api/users/${userId}`)
      const data = await res.json()
      setUser(data)
    }
    fetchUser()
  }, [userId])
 
  if (!user) return <div>Loading...</div>
 
  return <div>Hello, {user.name}!</div>
}

SWR 사용하기

SWR은 데이터 페칭을 위한 React 훅 라이브러리입니다.

캐싱, 재검증, 포커스 시 재페칭 등의 기능을 제공합니다.

'use client'
 
import useSWR from 'swr'
 
const fetcher = (url) => fetch(url).then((res) => res.json())
 
export default function UserProfile({ userId }) {
  const { data: user, error } = useSWR(`/api/users/${userId}`, fetcher)
 
  if (error) return <div>Failed to load user</div>
  if (!user) return <div>Loading...</div>
 
  return <div>Hello, {user.name}!</div>
}

SWR을 사용하면 코드가 간결해지고, 자동으로 데이터를 최신 상태로 유지할 수 있습니다.

React Query 사용하기

React Query는 더 강력한 기능을 제공하는 데이터 페칭 및 상태 관리 라이브러리입니다.

'use client'
 
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
const queryClient = new QueryClient()
 
function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery(['user', userId], 
    () => fetch(`/api/users/${userId}`).then(res => res.json())
  )
 
  if (isLoading) return <div>Loading...</div>
  if (error) return <div>An error occurred: {error.message}</div>
 
  return <div>Hello, {user.name}!</div>
}
 
export default function App({ userId }) {
  return (
    <QueryClientProvider client={queryClient}>
      <UserProfile userId={userId} />
    </QueryClientProvider>
  )
}

React Query는 복잡한 데이터 의존성과 백그라운드 업데이트를 쉽게 관리할 수 있게 해줍니다.

서버 컴포넌트와 클라이언트 컴포넌트의 데이터 페칭 전략 비교

실행 환경 : 서버 컴포넌트는 서버에서, 클라이언트 컴포넌트는 브라우저에서 실행됩니다.
보안 : 서버 컴포넌트는 API 키 등을 안전하게 사용할 수 있지만, 클라이언트 컴포넌트는 주의가 필요합니다.
성능 : 서버 컴포넌트는 초기 로드 시 데이터를 포함하여 전송하므로 더 빠를 수 있습니다.
인터랙티비티 : 클라이언트 컴포넌트는 사용자 상호작용에 따른 실시간 데이터 업데이트에 적합합니다.
캐싱 : 클라이언트 컴포넌트는 SWR이나 React Query를 통해 효율적인 클라이언트 사이드 캐싱을 구현할 수 있습니다.

8장 상태 관리 및 폼 처리와의 연결

클라이언트 컴포넌트에서의 데이터 페칭은 8장에서 다루는 상태 관리 및 폼 처리와 밀접하게 연관됩니다.

페치한 데이터는 종종 전역 상태의 일부가 되며, 폼 제출 후 데이터를 업데이트하는 등의 작업에서 클라이언트 사이드 데이터 페칭이 사용됩니다.

실습 : 실시간 대시보드 위젯 구현

다음 요구사항을 만족하는 실시간 대시보드 위젯을 클라이언트 컴포넌트로 구현해보세요.

현재 온라인 사용자 수를 표시
5초마다 데이터 자동 업데이트
SWR을 사용하여 데이터 페칭 및 캐싱 구현
에러 처리 및 로딩 상태 표시

구현 예시

'use client'
 
import useSWR from 'swr'
 
const fetcher = (url) => fetch(url).then((res) => res.json())
 
export default function OnlineUsersWidget() {
  const { data, error } = useSWR('/api/online-users', fetcher, {
    refreshInterval: 5000 // 5초마다 재페칭
  })
 
  if (error) return <div className="widget error">Failed to load data</div>
  if (!data) return <div className="widget loading">Loading...</div>
 
  return (
    <div className="widget">
      <h2>Online Users</h2>
      <p className="count">{data.onlineUsers}</p>
    </div>
  )
}
 
// 사용 예:
// <OnlineUsersWidget />

이 실습을 통해 클라이언트 컴포넌트에서 SWR을 사용하여 실시간 데이터를 효율적으로 페칭하고 표시하는 방법을 경험할 수 있습니다. 이는 대시보드, 실시간 모니터링 시스템, 소셜 미디어 피드 등에서 유용하게 사용될 수 있는 패턴입니다.

클라이언트 컴포넌트에서의 데이터 페칭은 서버 컴포넌트와 함께 사용될 때 가장 효과적입니다. 초기 데이터는 서버 컴포넌트에서 로드하고, 그 이후의 실시간 업데이트나 사용자 상호작용에 따른 데이터 페칭은 클라이언트 컴포넌트에서 처리하는 방식으로 최적의 성능과 사용자 경험을 제공할 수 있습니다.

이전으로 다음으로