frontend-patterns

帮助用户掌握 React 与 Next.js 前端架构、状态管理和性能优化模式。

星标

★ 209,790

来源

GitHub

更新于

2026-06-07

// 安全评估低风险

仅提示词，不执行代码
开源可审计
社区验证· 209.8k

正在进行安全审计…

凭证密钥
网络外发
代码执行
数据访问
来源供应链

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "frontend-patterns" 技能：
1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/docs/ko-KR/skills/frontend-patterns/SKILL.md
2. 保存为 ~/.claude/skills/frontend-patterns/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 用法示例

设计组件状态方案

输入

请针对一个使用 React 开发的电商商品详情页，比较 useState、useReducer、Context 和 Zustand 的适用场景，并给出推荐的状态管理方案与组件拆分建议。

预期产出

输出各状态方案的适用条件、优缺点，以及推荐的页面状态设计与组件结构建议。

优化 Next.js 首屏性能

输入

请检查一个 Next.js 页面常见的性能瓶颈，列出影响首屏加载速度的原因，并给出可执行的优化模式，包括代码拆分、图片优化、缓存和服务端渲染策略。

预期产出

输出首屏性能问题清单，并给出按优先级排序的优化建议与实现方向。

建立可复用 UI 模式

输入

请为一个后台管理系统总结适合 React 的 UI 开发最佳实践，包括表单、表格、弹窗、错误提示、加载态与无障碍设计，并整理成可复用的前端模式清单。

预期产出

输出一份可复用的 UI 模式清单，说明每种模式的适用场景和实现要点。

// 文档

프론트엔드 개발 패턴

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>(undefined)

export function Tabs({ children, defaultTab }: {
  children: React.ReactNode
  defaultTab: string
}) {
  const [activeTab, setActiveTab] = useState(defaultTab)

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  )
}

export function TabList({ children }: { children: React.ReactNode }) {
  return <div className="tab-list">{children}</div>
}

export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
  const context = useContext(TabsContext)
  if (!context) throw new Error('Tab must be used within Tabs')

  return (
    <button
      className={context.activeTab === id ? 'active' : ''}
      onClick={() => context.setActiveTab(id)}
    >
      {children}
    </button>
  )
}

// Usage
<Tabs defaultTab="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="details">Details</Tab>
  </TabList>
</Tabs>

Render Props 패턴

interface DataLoaderProps<T> {
  url: string
  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}

export function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false))
  }, [url])

  return <>{children(data, loading, error)}</>
}

// Usage
<DataLoader<Market[]> url="/api/markets">
  {(markets, loading, error) => {
    if (loading) return <Spinner />
    if (error) return <Error error={error} />
    return <MarketList markets={markets!} />
  }}
</DataLoader>

커스텀 Hook 패턴

상태 관리 Hook

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue)

  const toggle = useCallback(() => {
    setValue(v => !v)
  }, [])

  return [value, toggle]
}

// Usage
const [isOpen, toggleOpen] = useToggle()

비동기 데이터 페칭 Hook

import { useCallback, useEffect, useRef, useState } from 'react'

interface UseQueryOptions<T> {
  onSuccess?: (data: T) => void
  onError?: (error: Error) => void
  enabled?: boolean
}

export function useQuery<T>(
  key: string,
  fetcher: () => Promise<T>,
  options?: UseQueryOptions<T>
) {
  const [data, setData] = useState<T | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const [loading, setLoading] = useState(false)
  const successRef = useRef(options?.onSuccess)
  const errorRef = useRef(options?.onError)
  const enabled = options?.enabled !== false

  useEffect(() => {
    successRef.current = options?.onSuccess

…

查看完整文档 ↗