React 개발을 위한 효과적인 프롬프트 패턴을 알아봅니다.
React 프롬프트 구조
UI 컴포넌트
기본 컴포넌트
React + TypeScript로 버튼 컴포넌트를 만들어줘.
컴포넌트: Button
Props:
- variant: 'primary' | 'secondary' | 'danger'
- size: 'sm' | 'md' | 'lg'
- disabled?: boolean
- loading?: boolean
- onClick?: () => void
- children: React.ReactNode
요구사항:
- 타입 정의 포함
- Tailwind CSS 스타일링
- 로딩 시 스피너 표시
- 접근성 (ARIA)
복합 컴포넌트
모달 컴포넌트를 만들어줘.
컴포넌트: Modal
Props:
- isOpen: boolean
- onClose: () => void
- title?: string
- size?: 'sm' | 'md' | 'lg'
- children: React.ReactNode
요구사항:
- Portal 사용
- ESC 키로 닫기
- 바깥 클릭으로 닫기
- 애니메이션 (fade in/out)
- 포커스 트랩
- 스크롤 방지
리스트 컴포넌트
가상화된 리스트 컴포넌트를 만들어줘.
컴포넌트: VirtualList
Props:
- items: T[]
- itemHeight: number
- renderItem: (item: T) => React.ReactNode
- containerHeight: number
요구사항:
- 대용량 데이터 처리
- 스크롤 성능 최적화
- 동적 아이템 높이 옵션
- 무한 스크롤 지원
커스텀 훅
데이터 페칭 훅
데이터 페칭 커스텀 훅을 만들어줘.
훅: useFetch<T>
파라미터:
- url: string
- options?: RequestInit
반환값:
{
data: T | null,
loading: boolean,
error: Error | null,
refetch: () => void
}
요구사항:
- 제네릭 타입 지원
- 요청 취소 (AbortController)
- 캐싱 옵션
- 자동 재시도
폼 훅
폼 관리 커스텀 훅을 만들어줘.
훅: useForm<T>
파라미터:
- initialValues: T
- validationSchema?: Schema
- onSubmit: (values: T) => void
반환값:
{
values: T,
errors: Partial<Record<keyof T, string>>,
touched: Partial<Record<keyof T, boolean>>,
handleChange: (name: keyof T) => (e: Event) => void,
handleBlur: (name: keyof T) => () => void,
handleSubmit: (e: FormEvent) => void,
reset: () => void,
isValid: boolean,
isSubmitting: boolean
}
상태 훅
로컬 스토리지 훅을 만들어줘.
훅: useLocalStorage<T>
파라미터:
- key: string
- initialValue: T
반환값:
[value: T, setValue: (value: T) => void, remove: () => void]
요구사항:
- JSON 직렬화/역직렬화
- SSR 지원 (window 체크)
- 에러 처리
- 다른 탭 동기화 (storage 이벤트)
폼 처리
로그인 폼
React Hook Form으로 로그인 폼을 만들어줘.
필드:
- email (이메일 유효성)
- password (최소 8자)
- rememberMe (체크박스)
요구사항:
- Zod 스키마 검증
- 에러 메시지 표시
- 로딩 상태
- 제출 핸들링
- Tailwind 스타일링
다단계 폼
다단계 회원가입 폼을 만들어줘.
단계:
1. 이메일/비밀번호
2. 프로필 정보
3. 약관 동의
요구사항:
- 단계 인디케이터
- 이전/다음 버튼
- 단계별 유효성 검사
- 상태 유지 (뒤로가기)
- 최종 제출
상태 관리
Context 설정
인증 Context를 만들어줘.
Context: AuthContext
상태:
- user: User | null
- isAuthenticated: boolean
- isLoading: boolean
액션:
- login(credentials)
- logout()
- refreshToken()
요구사항:
- Provider 컴포넌트
- useAuth 커스텀 훅
- 타입 정의
- 초기 로드 시 토큰 확인
Zustand 스토어
Zustand로 장바구니 스토어를 만들어줘.
상태:
- items: CartItem[]
- total: number
액션:
- addItem(product, quantity)
- removeItem(productId)
- updateQuantity(productId, quantity)
- clearCart()
요구사항:
- persist 미들웨어
- devtools 미들웨어
- 선택자 함수
- 타입 정의
성능 최적화
메모이제이션
성능 최적화된 리스트 컴포넌트를 만들어줘.
요구사항:
- React.memo 사용
- useMemo로 계산 캐싱
- useCallback으로 함수 메모이제이션
- key 최적화
- 불필요한 리렌더링 방지
코드에 최적화 이유 주석 포함
지연 로딩
코드 스플리팅과 지연 로딩을 구현해줘.
요구사항:
- React.lazy 사용
- Suspense 폴백
- 라우트 기반 스플리팅
- 컴포넌트 레벨 스플리팅
- 에러 바운더리
실전 프롬프트
데이터 테이블
데이터 테이블 컴포넌트를 만들어줘.
Props:
- data: T[]
- columns: Column<T>[]
- onSort?: (key: keyof T, direction) => void
- onRowClick?: (row: T) => void
- selectable?: boolean
- pagination?: PaginationConfig
기능:
- 정렬 (헤더 클릭)
- 체크박스 선택
- 페이지네이션
- 로딩 상태
- 빈 상태
Tailwind CSS, TypeScript 사용
검색 자동완성
검색 자동완성 컴포넌트를 만들어줘.
Props:
- onSearch: (query: string) => Promise<Result[]>
- onSelect: (item: Result) => void
- placeholder?: string
- debounceMs?: number
기능:
- 디바운스 입력
- 드롭다운 결과
- 키보드 네비게이션
- 로딩 표시
- 결과 하이라이트
- 외부 클릭으로 닫기
팁
| 팁 | 설명 |
|---|---|
| Props 상세히 | 타입과 설명 포함 |
| 요구사항 나열 | 기능 목록 작성 |
| 스타일 명시 | Tailwind, CSS-in-JS 등 |
| 접근성 언급 | ARIA, 키보드 지원 |
| 예시 코드 | 사용 예시 요청 |
명확한 컴포넌트 스펙이 좋은 코드를 만듭니다.