블로그 인터랙션 추가 실습

이번 세션에서 할 일

Ch.1에서 만든 블로그 프로젝트에 서버/클라이언트 컴포넌트 설계를 적용합니다. 구체적으로:

1. BlogLayout 리팩터링 - 전체 클라이언트 → 서버 컴포넌트 + CategorySidebar 분리
2. 좋아요 버튼 추가 - 서버 페이지에 클라이언트 컴포넌트 배치
3. 검색 기능 추가 - SearchablePostList 클라이언트 컴포넌트
4. 최종 구조 점검 - 서버/클라이언트 경계 확인

Step 1: BlogLayout 리팩터링

Ch.1의 블로그 레이아웃은 useState 하나 때문에 전체가 클라이언트 컴포넌트였습니다. 인터랙션이 필요한 사이드바만 분리합니다.

CategorySidebar 클라이언트 컴포넌트 생성

  
    
  
  
    
  

// app/components/CategorySidebar.tsx
'use client';

import { useState } from 'react';

export function CategorySidebar() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>
        카테고리 {isOpen ? '닫기' : '열기'}
      </button>
      {isOpen && (
        <ul>
          <li>React</li>
          <li>Next.js</li>
          <li>TypeScript</li>
        </ul>
      )}
    </>
  );
}

BlogLayout을 서버 컴포넌트로 전환

  
    
  
  
    
  

// app/blog/layout.tsx - 블로그 레이아웃(이제 서버 컴포넌트)
import { CategorySidebar } from '../components/CategorySidebar';

export default function BlogLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <aside>
        <CategorySidebar />
      </aside>
      {children}
    </>
  );
}

사이드바와 본문의 구분감을 위해 약간의 스타일링을 추가하겠습니다.

  
    
  
  
    
  

// app/blog/layout.tsx - 블로그 레이아웃(이제 서버 컴포넌트)
import { CategorySidebar } from '../components/CategorySidebar';

export default function BlogLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <section className='flex'>
      <aside className='pr-8 mr-8 border-r'>
        <CategorySidebar />
      </aside>
      {children}
    </section>
  );
}

변경 전후를 비교하면:

Step 2: 좋아요 버튼 추가

블로그 글 상세 페이지에 좋아요 버튼을 추가합니다. 페이지는 서버 컴포넌트로 유지하고, 인터랙션이 필요한 작은 컴포넌트만 클라이언트로 분리하는 구조입니다.

LikeButton 클라이언트 컴포넌트

  
    
  
  
    
  

// app/components/LikeButton.tsx
'use client';

import { useState } from 'react';

export function LikeButton() {
  const [isLiked, setIsLiked] = useState(false);

  return (
    <button onClick={() => setIsLiked(!isLiked)}>
      {isLiked ? '❤️' : '🤍'}
    </button>
  );
}

서버 컴포넌트 페이지에서 사용

  
    
  
  
    
  

// app/blog/[slug]/page.tsx - 글 상세 페이지(서버 컴포넌트)
import { LikeButton } from '@/app/components/LikeButton';

export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  return (
    <div>
      <h1>{slug}</h1>
      <p>이 글의 내용이 여기에 표시됩니다.</p>
      <LikeButton />
    </div>
  );
}

페이지 자체는 서버 컴포넌트로 렌더링되고, 브라우저에서 실행되는 인터랙션 코드는 LikeButton 컴포넌트뿐입니다.

Step 3: 검색 기능 추가

글 목록을 실시간으로 필터링하는 검색 기능을 추가합니다. 검색은 사용자 입력에 반응해야 하므로 클라이언트 컴포넌트가 필요합니다.

SearchablePostList 클라이언트 컴포넌트

  
    
  
  
    
  

// app/components/SearchablePostList.tsx
'use client';

import { useState } from 'react';
import Link from 'next/link';

type Post = {
  id: number;
  slug: string;
  title: string;
};

export function SearchablePostList({ posts }: { posts: Post[] }) {
  const [query, setQuery] = useState('');

  const filtered = posts.filter((post) =>
    post.title.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <>
      <input
        type='text'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder='글 검색...'
      />
      <ul>
        {filtered.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.slug}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

서버 컴포넌트 페이지에서 데이터 전달

  
    
  
  
    
  

// app/blog/page.tsx - 글 목록 페이지(서버 컴포넌트)
import { SearchablePostList } from '../components/SearchablePostList';

const posts = [
  { id: 1, slug: 'nextjs-routing', title: 'Next.js 라우팅 이해하기' },
  { id: 2, slug: 'react-server-components', title: 'React 서버 컴포넌트란?' },
];

export default function Blog() {
  return (
    <div>
      <h1>글 목록</h1>
      <SearchablePostList posts={posts} />
    </div>
  );
}

Step 4: 최종 프로젝트 구조 점검

완성된 프로젝트의 서버/클라이언트 경계를 확인해볼까요?

  
    
  
  
    
  

app/
├── layout.tsx                    [서버] 루트 레이아웃
├── page.tsx                      [서버] 홈 페이지
├── about/
│   └── page.tsx                  [서버] 소개 페이지
└── blog/
    ├── [slug]/
    │   └── page.tsx              [서버] 글 상세 페이지
    ├── layout.tsx                [서버] 블로그 레이아웃 ✅ (리팩터링 결과)
    └── page.tsx                  [서버] 글 목록 페이지 (데이터 준비)
├── components/
│   ├── CategorySidebar.tsx       [클라이언트] 'use client' - 카테고리 토글
│   ├── LikeButton.tsx            [클라이언트] 'use client' - 좋아요 상태
│   └── SearchablePostList.tsx    [클라이언트] 'use client' - 검색 입력

컴포넌트 트리로 보면:

  
    
  
  
    
  

RootLayout [서버]
  └── BlogLayout [서버]
        ├── CategorySidebar [클라이언트] ← 'use client' 경계
        └── Blog [서버] 글 목록 페이지
        │     └── SearchablePostList [클라이언트] ← 'use client' 경계
        └── Post [서버] 글 상세 페이지
              └── LikeButton [클라이언트] ← 'use client' 경계

'use client' 경계가 모두 트리의 끝 가까이 위치한 것을 확인할 수 있습니다.

이 챕터에서 내린 설계 판단들

Ch.2 학습 정리

이번 챕터에서는 서버 컴포넌트와 클라이언트 컴포넌트를 언제, 왜 구분해서 쓰는지를 집중적으로 다뤘습니다.

• 서버 vs 클라이언트 컴포넌트의 역할 차이 - 서버 컴포넌트는 데이터 표시와 레이아웃을, 클라이언트 컴포넌트는 인터랙션(useState, onClick 등)을 담당합니다.
• 'use client' 경계는 트리 끝에 배치 - 클라이언트 경계를 최대한 작게 만들어서, 서버에서 처리할 수 있는 부분을 최대화하는 설계 원칙을 배웠습니다.
• children/props 전달 - Provider 래핑이나 인터랙티브 래퍼에서 children이나 다른 prop을 활용해 서버 컴포넌트를 클라이언트 컴포넌트 안에 배치하는 방법을 익혔습니다.
• 실습 - BlogLayout 리팩터링, LikeButton, SearchablePostList를 직접 만들며 경계 설계를 연습했습니다.