70 lines
1.9 KiB
Markdown
70 lines
1.9 KiB
Markdown
|
# TypeScript/React 코드 스타일 규칙
|
||
|
|
|
||
|
|
## TypeScript 일반
|
||
|
|
- strict 모드 필수 (`tsconfig.json`)
|
||
|
|
- `any` 사용 금지 (불가피한 경우 주석으로 사유 명시)
|
||
|
|
- 타입 정의: `interface` 우선 (type은 유니온/인터섹션에만)
|
||
|
|
- 들여쓰기: 2 spaces
|
||
|
|
- 세미콜론: 사용
|
||
|
|
- 따옴표: single quote
|
||
|
|
- trailing comma: 사용
|
||
|
|
|
||
|
|
## React 규칙
|
||
|
|
|
||
|
|
### 컴포넌트
|
||
|
|
- 함수형 컴포넌트 + hooks 패턴만 사용
|
||
|
|
- 클래스 컴포넌트 사용 금지
|
||
|
|
- 컴포넌트 파일 당 하나의 export default 컴포넌트
|
||
|
|
- Props 타입은 interface로 정의 (ComponentNameProps)
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
interface UserCardProps {
|
||
|
|
name: string;
|
||
|
|
email: string;
|
||
|
|
onEdit?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const UserCard = ({ name, email, onEdit }: UserCardProps) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h3>{name}</h3>
|
||
|
|
<p>{email}</p>
|
||
|
|
{onEdit && <button onClick={onEdit}>편집</button>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UserCard;
|
||
|
|
```
|
||
|
|
|
||
|
|
### Hooks
|
||
|
|
- 커스텀 훅은 `use` 접두사 (예: `useAuth`, `useFetch`)
|
||
|
|
- 훅은 `src/hooks/` 디렉토리에 분리
|
||
|
|
- 복잡한 상태 로직은 커스텀 훅으로 추출
|
||
|
|
|
||
|
|
### 상태 관리
|
||
|
|
- 컴포넌트 로컬 상태: `useState`
|
||
|
|
- 공유 상태: Context API 또는 Zustand
|
||
|
|
- 서버 상태: React Query (TanStack Query) 권장
|
||
|
|
|
||
|
|
### 이벤트 핸들러
|
||
|
|
- `handle` 접두사: `handleClick`, `handleSubmit`
|
||
|
|
- Props로 전달 시 `on` 접두사: `onClick`, `onSubmit`
|
||
|
|
|
||
|
|
## 스타일링
|
||
|
|
- CSS Modules 또는 Tailwind CSS (프로젝트 설정에 따름)
|
||
|
|
- 인라인 스타일 지양
|
||
|
|
- !important 사용 금지
|
||
|
|
|
||
|
|
## API 호출
|
||
|
|
- API 호출 로직은 `src/services/`에 분리
|
||
|
|
- Axios 또는 fetch wrapper 사용
|
||
|
|
- 에러 처리: try-catch + 사용자 친화적 에러 메시지
|
||
|
|
- 환경별 API URL은 `.env`에서 관리
|
||
|
|
|
||
|
|
## 기타
|
||
|
|
- console.log 커밋 금지 (디버깅 후 제거)
|
||
|
|
- 매직 넘버/문자열 → 상수 파일로 추출
|
||
|
|
- 사용하지 않는 import, 변수 제거 (ESLint로 검증)
|
||
|
|
- 이미지/아이콘은 `src/assets/`에 관리
|