spinny:~/writing $ vim mastering-react-server-components.md
1~2React Server Components (RSC)는 React 애플리케이션을 구축하는 방식을 근본적으로 변화시켰습니다. 렌더링 로직을 서버로 이동함으로써 클라이언트에 전송되는 JavaScript 번들을 크게 줄일 수 있으며, 이는 더 빠른 로드 시간과 더 나은 사용자 경험으로 이어집니다. 이 글에서는 2026년에 RSC를 활용하기 위한 고급 패턴과 모범 사례를 살펴보겠습니다.3~4## Server Components란 무엇인가?5~6전통적으로 React 컴포넌트는 클라이언트에서 완전히 렌더링(CSR)되거나 서버에서 HTML로 사전 렌더링(SSR)된 후 클라이언트에서 hydration되었습니다. **Server Components**는 컴포넌트를 _서버에서만_ 렌더링할 수 있게 해줍니다. 이 코드는 절대 브라우저로 전송되지 않습니다.7~8### 이점9~101. **제로 번들 사이즈**: Server Components에서 사용되는 의존성(마크다운 파서나 무거운 날짜 라이브러리 등)은 서버에 남습니다.112. **직접적인 백엔드 접근**: API 엔드포인트를 노출하지 않고도 컴포넌트 내에서 직접 데이터베이스를 쿼리할 수 있습니다.123. **자동 코드 분할**: 서버 사이드에서 임포트된 Client components는 자동으로 코드 분할됩니다.13~14## 데이터 페칭 패턴15~16RSC를 사용하면 컴포넌트를 `async`로 만들고 데이터를 직접 await할 수 있습니다.17~18```tsx19// app/users/page.tsx20import { db } from '@/lib/db';21~22export default async function UsersPage() {23 const users = await db.user.findMany();24~25 return (26 <main>27 <h1>Users</h1>28 <ul>29 {users.map((user) => (30 <li key={user.id}>{user.name}</li>31 ))}32 </ul>33 </main>34 );35}36```37~38### 스트리밍을 위한 Suspense39~40데이터 페칭이 느릴 수 있으므로, 데이터가 로드되는 동안 즉시 폴백 UI를 표시하기 위해 컴포넌트를 `<Suspense>`로 감싸세요.41~42```tsx43import { Suspense } from 'react';44import UserList from './UserList';45import LoadingSkeleton from './LoadingSkeleton';46~47export default function Page() {48 return (49 <section>50 <h1>My Users</h1>51 <Suspense fallback={<LoadingSkeleton />}>52 <UserList />53 </Suspense>54 </section>55 );56}57```58~59## Server와 Client Components 혼합하기60~61가장 혼란스러운 부분 중 하나는 Server와 Client components를 어떻게 조합하는가입니다.62~63**기본 규칙**: Server Components는 Client Components를 임포트할 수 있습니다. Client Components는 Server Components를 직접 임포트할 수 _없습니다_. 하지만 Server Component를 Client Component에 `children`으로 전달할 수 있습니다.64~65### "Children" 패턴66~67```tsx68// ClientComponent.tsx69'use client';70~71import { useState } from 'react';72~73export default function ClientWrapper({ children }) {74 const [count, setCount] = useState(0);75~76 return (77 <div onClick={() => setCount((c) => c + 1)}>78 Count: {count}79 {children} {/* This can be a Server Component! */}80 </div>81 );82}83```84~85```tsx86// ServerPage.tsx87import ClientWrapper from './ClientWrapper';88import ServerContent from './ServerContent';89~90export default function Page() {91 return (92 <ClientWrapper>93 <ServerContent /> {/* This works perfectly */}94 </ClientWrapper>95 );96}97```98~99## 일반적인 함정100~1011. **Server Components에서 Context 사용**: Context는 클라이언트 사이드 개념입니다. 서버 사이드에서 데이터를 공유해야 한다면 props로 전달하거나 전문적인 요청 범위 캐시를 사용하세요.1022. **이벤트 핸들러 추가**: Server Component에 `onClick`이나 `onChange`를 추가할 수 없습니다. 해당 로직은 일반 Client Component 리프 노드에 속합니다.103~104## 결론105~106React Server Components는 단순한 기능이 아닙니다. 패러다임의 전환입니다. 서버와 클라이언트의 경계를 이해함으로써, 높은 상호작용성과 놀라운 속도를 동시에 갖춘 애플리케이션을 구축할 수 있습니다.107~
NORMAL · mastering-react-server-components.md [readonly]107 lines · :q to close