Skills
.Work. You
Rest

client-component-architecture

Community

React 컴포넌트 아키텍처를 구조화해 생산성 강화

Software Engineering#architecture#frontend#react#components#hooks#guidelines#code-review
Authorjuchanhwang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

React 애플리케이션의 UI를 페이지-레이아웃 셸(Page, Compositor), 자기 완결적 Feature 컴포넌트, 로직 추상화 계층인 Hook으로 구성하는 3계층 아키텍처를 강제하고 가이드합니다. 이 구조를 통해 설계 일관성, 코드 리뷰 효율성, 재사용성을 높이고 신규 팀원이 빠르게 온보드되도록 돕습니다.

Core Features & Use Cases

  • Page는 Compositor 역할을 맡아 레이아웃과 비동기 경계만 담당하고, 데이터 패칭이나 비즈니스 로직은 피합니다.
  • Feature Component는 자체 Hook으로 데이터와 상태를 소유하여 독립적으로 테스트·이동·삭제가 가능합니다.
  • Hook Layer는 데이터 패칭(useGet*), UI 상태(use*) 및 사이드 이펙트(use*Action)로 역할별로 분리됩니다.
  • Use Case: 새로운 페이지를 도입할 때 Page-일관성 유지, 각 Feature의 재사용성, 팀 간 협업 효율을 확보합니다.

Quick Start

Adopt the three-tier React architecture by designating a Page as the Compositor, self-contained Feature components, and a Hook layer for logic.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: client-component-architecture
Download link: https://github.com/juchanhwang/missionary/archive/main.zip#client-component-architecture

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.