[React] Code Convention

최종 프로젝트를 진행하면서 code convention을 정리했는데 다른 프로젝트에서도 사용하기 좋아서

정리해보았다

---

• 컴포넌트 파일은 파스칼 케이스로 작성
  e.g) ComponentsTest.tsx
• 페이지명은 indexPage.ts (끝에 Page명 표기)
• 일반 .ts 파일은 케밥 케이스로 작성 (ex. common.ts, date-helper.ts)
• app 폴더 하위 페이지 파일 이름은 케밥 케이스로 작성

---

컴포넌트 & 분리

rafce 스니펫 사용

const Component () => {
    return <></>
}

export default Component;파일 이름

---

폴더 트리

project-root/
|📂 src/
|   |📂 assets
|   |📂 app
|   |   |📄 layout.tsx
|   |   |📄 not-found.tsx
|   |   |📄 page.tsx
|   |   |📂 login/
|   |   |   |📄 page.tsx
|   |📂 components/
|   |   |📂 layout/
|   |   |   |📄 Header.tsx
|   |   |   |📄 Content.tsx
|   |📂 types/
|   |   |📄 common.d.ts
|   |   |📄 supabase.d.ts

---

변수명 & 함수명

변수명

• 예약어는 const 로만 필요 시 let
• 상수 (not, const, 하드코딩 값)는 모두 대문자로 작성하되, 단어 구분 필요 시 _로 작성
  e.g) MAX_COUNT = 20
• Boolean 타입에 관해서는 접두사 ‘is’ 사용
  함수명
• 함수는 단일 책임 원칙 (only 기능 1개)
• 모든 함수 이름은 동사형으로 작성 (카멜 케이스)
  e.g) addComment, checkIsDone
• CRUD
  • create: 접두사 add e.g) addCart...
  • read: 접두사 fetch e.g) fetchData ...
  • update: 접두사 update e.g) updateCart ...
  • delete: e.g) reomveCart ...
• Handler
  • e.g) clickCartHandler ...
  • click기능명Handler
• React Query (Custom Hook) - 튜터님 찬스 필요
  • removeCartMutation = useMutaiton()…
    return { remove: removeCartMutation.mutate }

Custom Hooks

• hooks > user(폴더 - 페이지명) > useAuth(회원가입, 로그인 등등), useInput, useVaildate(파일)
  • 폴더 → 페이지명, 파일 → use기능명
  • 더불어, 전역적으로 사용되는 Hook일 경우 common 폴더로 분리합니다.