코딩 컨벤션 - Kernel360/KFE3-bootup-SAJO GitHub Wiki
- 함수형 컴포넌트를 다음 형식으로 사용
const Component = () => {
return <div>Component</div>
}
export default Component
-
VSCode 익스텐션: ES7+ React/Redux/React-Native snippets 설치 ⇒
rafce
-
코드작성 순서(순서대로)
- import
- interface
- 외부 변수/함수
- 함수 컴포넌트
- export defalt -
-
export default는 맨 마지막에 한줄 띄고 넣기
// 함수는 화살표 함수로 선언
const add = (a, b) => a + b;
// Named Export는 const 앞에 export 키워드 사용
export const subtract = (a, b) => a - b;
// Default Export는 파일의 최하단에 작성
export default add;
-
컴포넌트 이름: 대문자로 시작하는
PascalCase
사용 (파일 및 폴더명도 PascalCase로 작성) -
이벤트 핸들러:
handle
로 시작 → 예) handleClick -
함수 및 변수명:
camelCase
사용- 일반적인 함수명은 동사로 시작
-
상수: 모두 대문자로 작성하고 단어 사이에
_
사용 ex)API_URL
-
커스컴 훅(Custom Hook):
use
로 시작 ex)useInput
타입 & 인터페이스명(PascalCase)
- export는 맨 앞에 붙인다
// 기본 인터페이스
export interface Auction {
id: string
title: string
startPrice: number
currentPrice: number
status: AuctionStatus
location: Location
}
// Union 타입
export type AuctionStatus = 'pending' | 'active' | 'ended'
// API 관련 타입
export interface CreateAuctionRequest {
title: string
description: string
startPrice: number
images: File[]
}
export interface AuctionListResponse {
auctions: Auction[]
totalCount: number
hasNext: boolean
}
인터페이스(interface)
-
기본:
User
,Auction
,Product
-
요청:
CreateAuction**Request**
,Login**Request**
-
응답:
AuctionList**Response**
,UserProfile**Response**
-
Props:
Button**Props**
,Modal**Props**
타입(type)
-
Union:
AuctionStatus
,UserRole
-
유틸리티:
AuctionWithBids
,PartialUser
-
!important
사용 금지 -
border: none;
대신border: 0;
사용 -
색상은 변수로 사용
-
font-size/padding/margin:
rem 단위
사용