프론트엔드 개발 패턴

React, Next.js 및 고성능 사용자 인터페이스를 위한 모던 프론트엔드 패턴.

활성화 시점

• React 컴포넌트를 구축할 때 (합성, props, 렌더링)
• 상태를 관리할 때 (useState, useReducer, Zustand, Context)
• 데이터 페칭을 구현할 때 (SWR, React Query, server components)
• 성능을 최적화할 때 (메모이제이션, 가상화, 코드 분할)
• 폼을 다룰 때 (유효성 검사, 제어 입력, Zod 스키마)
• 클라이언트 사이드 라우팅과 네비게이션을 처리할 때
• 접근성 있고 반응형인 UI 패턴을 구축할 때

컴포넌트 패턴

상속보다 합성

// PASS: GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Usage
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>

Compound Components

interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: string) => void
}

const TabsContext = createContext<TabsContextValue | undefined>(undefi…