Frontend Academy · 강의

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

React 서버 컴포넌트를 이해하고, 'use client' 디렉티브를 추가해야 하는 경우와 서버에서 렌더링된 HTML에 인터랙티브 클라이언트 아일랜드를 결합하는 방법을 알아봅니다.

서버 컴포넌트와 클라이언트 컴포넌트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

하나의 앱에 존재하는 두 세계

React 서버 컴포넌트(RSC)를 사용하면 트리를 서버에서 렌더링되는 부분과 클라이언트에서 상호작용하는 부분으로 나눌 수 있습니다. Next.js 앱 라우터에서는 컴포넌트가 기본적으로 서버 컴포넌트입니다. 'use client'를 사용해 클라이언트 컴포넌트로 전환합니다.

서버 컴포넌트의 역할

서버 컴포넌트는 서버에서만 실행됩니다. 다음 작업을 수행할 수 있습니다: 데이터를 직접 가져오기, 파일 시스템에 접근하기, 서버 전용 비밀 값 사용하기, React를 클라이언트로 전송하지 않고 HTML로 렌더링하기. 다음 작업은 수행할 수 없습니다: 후크 사용, 상태 관리, 이벤트 처리.

클라이언트 컴포넌트의 역할

클라이언트 컴포넌트는 SSR(초기 HTML)을 위해 서버에서 실행되고, 상호작용을 위해 클라이언트에서 실행됩니다. 다음을 사용할 수 있습니다: useState, useEffect, 이벤트 처리기, 브라우저 API.

기본값은 서버

Next.js 앱 라우터에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다. 앱의 대부분이 정적으로 렌더링되므로 매우 유리합니다.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

클라이언트로 전환하기

파일의 맨 위에 'use client'를 추가하면 해당 파일의 컴포넌트와 가져온 하위 컴포넌트가 클라이언트 컴포넌트로 표시됩니다.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

서버와 클라이언트 구성하기

서버 컴포넌트는 클라이언트 컴포넌트를 렌더링할 수 있지만, 클라이언트 컴포넌트는 서버 컴포넌트를 가져올 수 없습니다. 서버에서 렌더링한 콘텐츠를 클라이언트 래퍼에 자식 요소로 전달하십시오.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

이 패턴이 중요한 이유

더 작은 JS 번들 — 클라이언트 컴포넌트만 브라우저로 전송됩니다. DB/파일에 직접 접근 — 읽기 전용 데이터에는 API 계층이 필요하지 않습니다. 더 나은 SEO와 더 빠른 LCP — HTML이 완전히 렌더링된 상태로 도착합니다.

클라이언트 경계 규칙

파일에 'use client'가 표시되면 해당 파일의 모든 컴포넌트와 가져온 모든 자식 컴포넌트가 클라이언트 컴포넌트가 됩니다. 'use client'는 서버와 클라이언트 사이의 경계를 표시합니다.

서버 액션

'use server'가 표시된 함수는 서버에서만 실행되지만 클라이언트 컴포넌트에서 호출할 수 있습니다. RPC와 비슷하며, 폼 제출과 변경 작업에 자주 사용됩니다.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

서버에서 클라이언트로 props 전달하기

서버에서 클라이언트로 전달하는 props는 JSON으로 직렬화할 수 있어야 합니다. 함수, 클래스, 사용자 정의 형태의 Date는 전달할 수 없습니다. 전달하기 전에 변환하십시오.

각 유형 식별하기

가져온 항목을 살펴보십시오. useState, useEffect, onClick 처리기를 사용하면 컴포넌트가 클라이언트 컴포넌트가 됩니다. 순수한 데이터 표시만 수행한다면 서버 컴포넌트로 유지할 수 있습니다.

성능 향상

서버 컴포넌트는 JS 번들을 크게 줄여 줍니다. 대부분 정적 콘텐츠이고 상호작용하는 위젯이 몇 개뿐인 페이지는 상호작용하는 부분의 JS만 전송하므로, 때로는 90% 더 작아집니다.

빠른 확인

Next.js 서버 컴포넌트에서 허용되지 않는(NOT) React 후크는 무엇입니까?

복습: 서버와 클라이언트 비교

서버 컴포넌트: 서버에서만 실행되며, async/await OK이고 후크/상태/처리기를 사용할 수 없으며 번들이 더 작습니다. 클라이언트 컴포넌트: 'use client'로 선택하고 useState/useEffect/이벤트를 사용해 상호작용을 구현합니다. 서버는 클라이언트를 렌더링할 수 있지만, 클라이언트는 서버를 가져올 수 없습니다(단, 자식 요소로 받을 수는 있습니다). 서버 액션('use server')은 RPC 방식의 변경 작업에 사용됩니다.

자주 묻는 질문

“서버 컴포넌트와 클라이언트 컴포넌트” 강의는 무료인가요?

네 — “서버 컴포넌트와 클라이언트 컴포넌트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“서버 컴포넌트와 클라이언트 컴포넌트”에서 뭘 배우나요?

React 서버 컴포넌트를 이해하고, 'use client' 디렉티브를 추가해야 하는 경우와 서버에서 렌더링된 HTML에 인터랙티브 클라이언트 아일랜드를 결합하는 방법을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“서버 컴포넌트와 클라이언트 컴포넌트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기