# React Component

> React 컴포넌트 생성, shadcn/ui 통합 작업 시 사용. component, 컴포넌트, UI, shadcn 키워드에 자동 활성화.

- Skill: `majiayu000/react-component-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/react-component-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/react-component-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/react-component-3

---


# React Component Helper

## 컴포넌트 구조

- 위치: `src/components/`
- 네이밍: PascalCase
- 파일: `.tsx` 확장자

### 디렉토리 구조

```
src/components/
├── ui/           # shadcn/ui 컴포넌트
├── shared/       # 공통 컴포넌트
├── layout/       # 레이아웃 컴포넌트
├── forms/        # 폼 관련 컴포넌트
└── features/     # 기능별 컴포넌트
```

## shadcn/ui 통합

- 설치: `npx shadcn@latest add [component]`
- 위치: `src/components/ui/`
- 커스터마이징: Tailwind CSS

### 자주 사용하는 컴포넌트

```bash
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add table
```

## 컴포넌트 템플릿

```tsx
import { cn } from "@/lib/utils"

interface ComponentProps {
  className?: string
  children?: React.ReactNode
}

export function Component({ className, children }: ComponentProps) {
  return (
    <div className={cn("base-styles", className)}>
      {children}
    </div>
  )
}
```

## 패턴

- Compound Components: 복합 컴포넌트 패턴
- Render Props: 필요시 사용
- Custom Hooks: 로직 분리 (`src/hooks/`)
- forwardRef: DOM 참조 필요시