React 19 서버 컴포넌트 완벽 가이드

블로그 관리자
2분 읽기
ReactServer ComponentsPerformance

React 19 서버 컴포넌트 완벽 가이드

React Server Components(RSC)는 React 애플리케이션을 구축하는 새로운 방식을 제시합니다. 이 가이드에서는 RSC의 핵심 개념과 실제 활용 방법을 알아봅니다.

서버 컴포넌트란?

서버 컴포넌트는 서버에서만 실행되는 React 컴포넌트입니다. 이는 다음과 같은 장점을 제공합니다:

  • 제로 번들 크기: 서버 컴포넌트의 코드는 클라이언트로 전송되지 않습니다
  • 직접 데이터 접근: 데이터베이스나 파일 시스템에 직접 접근 가능
  • 자동 코드 분할: 더 나은 성능을 위한 자동 최적화

서버 vs 클라이언트 컴포넌트

서버 컴포넌트 사용 시기

다음과 같은 경우 서버 컴포넌트를 사용하세요:

  • 데이터 페칭이 필요한 경우
  • 백엔드 리소스에 접근해야 하는 경우
  • 민감한 정보를 다루는 경우
  • 큰 의존성을 서버에 유지하고 싶은 경우
// 서버 컴포넌트 예시
export default async function BlogPosts() {
  const posts = await db.posts.findMany()
  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}

클라이언트 컴포넌트 사용 시기

다음과 같은 경우 클라이언트 컴포넌트를 사용하세요:

  • 상호작용이 필요한 경우
  • 이벤트 리스너가 필요한 경우
  • 상태나 라이프사이클 효과를 사용하는 경우
  • 브라우저 전용 API를 사용하는 경우
'use client'

import { useState } from 'react'

export function LikeButton() {
  const [likes, setLikes] = useState(0)
  return (
    <button onClick={() => setLikes(likes + 1)}>
      좋아요 {likes}
    </button>
  )
}

모범 사례

1. 컴포넌트 경계 최소화

클라이언트 컴포넌트는 트리에서 가능한 한 아래쪽에 배치하세요:

// ✅ 좋은 예
export default function Page() {
  return (
    <div>
      <Header /> {/* 서버 컴포넌트 */}
      <MainContent /> {/* 서버 컴포넌트 */}
      <InteractiveButton /> {/* 클라이언트 컴포넌트 */}
    </div>
  )
}

// ❌ 나쁜 예
'use client'

export default function Page() {
  // 전체 페이지가 클라이언트 컴포넌트가 됨
  return <div>...</div>
}

2. 서버 컴포넌트를 Props로 전달

서버 컴포넌트를 클라이언트 컴포넌트의 children이나 props로 전달할 수 있습니다:

// ClientComponent.tsx
'use client'

export function ClientComponent({ children }) {
  return <div className="wrapper">{children}</div>
}

// ServerComponent.tsx
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent /> {/* 서버 컴포넌트 유지 */}
    </ClientComponent>
  )
}

성능 최적화

서버 컴포넌트를 사용하면 다음과 같은 성능 이점을 얻을 수 있습니다:

  1. 더 작은 자바스크립트 번들: 서버 코드는 클라이언트로 전송되지 않음
  2. 빠른 초기 페이지 로드: 서버에서 HTML을 직접 렌더링
  3. 향상된 SEO: 서버 렌더링으로 검색 엔진 최적화

결론

React Server Components는 성능과 개발자 경험 모두를 개선하는 강력한 기능입니다. 서버와 클라이언트 컴포넌트를 적절히 조합하여 최적의 애플리케이션을 만들어보세요.

React 19 서버 컴포넌트 완벽 가이드 | 블로그