---
id: n1e2x3t4-j5s6-4a7b-8c9d-0e1f2a3b4c5d
category: "10_Wiki/Topics/Development"
confidence_score: 0.98
tags: [nextjs, app-router, server-components, react, functional-programming, modern-web]
last_reinforced: 2026-05-01
github_commit: "wikification-nextjs-modern-react"
---

# Next.js & Modern React Design Patterns

## 📌 한 줄 통찰 (The Karpathy Summary)
> 현대 React 개발은 Next.js의 App Router와 Server Components를 통해 클라이언트-서버 경계를 재정의하며, 선언적 UI와 함수형 프로그래밍 패러다임을 결합하여 성능과 개발 생산성을 동시에 극대화하고 있다.

## 📖 구조화된 지식 (Synthesized Content)

### 1. Next.js App Router 및 RSC
- **React Server Components (RSC)**: 서버에서 데이터를 직접 페칭하고 렌더링하여 클라이언트로 전송함으로써 자바스크립트 번들 크기를 줄이고 초기 로딩 속도를 향상시킨다.
- **App Router**: 파일 시스템 기반 라우팅을 넘어 레이아웃, 에러 핸들링, 로딩 상태를 선언적으로 관리하는 아키텍처를 제공한다.

### 2. 현대적 React 패턴
- **함수형 컴포넌트 우선**: 모든 컴포넌트와 비즈니스 로직을 함수형으로 작성하며, 고차 컴포넌트(HOC) 대신 커스텀 훅과 합성을 사용하여 코드 재사용성을 높인다.
- **Props Drilling 방지**: 컴포넌트 합성(Composition)과 Context API, 또는 상태 관리 라이브러리를 통해 데이터 흐름을 최적화한다.
- **Rules of React**: 훅의 호출 순서 준수 등 React의 기본 원칙을 엄격히 지켜 예측 가능한 상태 전이를 보장한다.

### 3. 비동기 데이터 관리
- **Server Actions**: 별도의 API 엔드포인트 없이 서버 측 함수를 직접 호출하여 데이터 변조(Mutation) 및 폼 처리를 수행한다.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **클라이언트 vs 서버 경계**: 모든 것을 서버 컴포넌트로 만들 수는 없다. 상호작용(Event, State)이 필요한 부분은 'use client' 지시어를 사용하여 명확히 분리해야 한다.
- **추상화 오버헤드**: 함수형 패턴과 합성은 강력하지만, 과도하게 복잡한 합성은 컴포넌트 구조를 파악하기 어렵게 만든다.

## 🔗 지식 연결 (Graph)
- **Parent**: 10_Wiki/Topics/Development
- **Related**: Modern React & Frontend Engineering Standard (2025), [[Scalable Frontend Architecture|Scalable Frontend Architecture]]
- **Raw Source**: 00_Raw/Next.js App Router, 00_Raw/Next.js 및 Server Components 적용 프로젝트, 00_Raw/Functional Components, 00_Raw/Functional Programming in React

## 💻 GitHub 동기화 자동화 워크플로우
1. Stage: git add .
2. Commit: `git commit -m "[P-Reinforce] Wikify Next.js and Modern React Design Patterns"`
3. Push: `git push origin main`