코드 컨벤션

들어가며

• 웹 접근성을 준수해주세요❗️
• React 공식문서 읽기

네이밍

• 네이밍은 길어도 괜찮다. 타인이 봤을 때 이해할 수 있는 표현이 더 중요하다.
• Boolean 변수는 is-로 시작해야 한다.
• 함수는 동사로 시작한다.
• 이벤트 핸들러 네이밍은 함수를 만드는 경우 handleAddButtonClick, Prop의 경우 onAddButtonClick의 형식을 따른다.
• 배열 변수는 -Array, -List 보다 -s을 사용한다.

폴더명, 파일명

• 컴포넌트는 PascalCase, 나머지의 경우 camelCase를 사용한다.
• 상수가 담겨있는 파일이더라도 camelCase를 유지한다.
• 타입 파일의 경우 .d.ts를 사용한다.

컴포넌트 구현

• 코드 순서 (개행으로 구분)
  • 외부 hook (ex. useTheme)
  • useState, useRef 등의 hook
  • handler
  • useEffect
  • return
• 1파일 1컴포넌트를 원칙으로 한다.
• 같은 파일에 작성했으나 다른 파일로 빼지 않을 컴포넌트는 export할 메인 컴포넌트 아래에 둔다.
• 컴포넌트 내부 변수가 필요없는 로직은 최대한 컴포넌트 바깥으로 뺀다.

interface vs type

• 대부분의 경우 type을 사용한다.
• 컴포넌트의 Prop 타입의 경우, type ComponentProps = { ... }의 형식으로 사용한다.

import

• 외부 deps와 우리 파일 import 사이에는 빈 개행을 두어 구분한다.
• 상대 경로를 이용한 import는 사용하지 않는다. (반드시 @/, @shared/ 접두를 이용한다.)
• type import 의 경우 import type { ... }을 정확히 지킨다.

export

• default export를 지양한다. 최대한 named export를 사용한다. (파일명이 바뀌었을 때 에러를 제대로 내게 하기 위한 목적)
• index.ts를 두어 모아 export 하는 방식을 남용하지 않는다. ui-kit과 같이 모아서 export하는 것이 가독성에 좋다고 판단될 때만 적절히 사용한다.

타입은 가능한 좁히면 좋다

• 단순 string, number 보다 더 적절한 타입을 지정해주면 가독성과 Type Safety 유지에 좋다.

이벤트 핸들러 타입

• 이벤트 핸들러는 다음의 방식으로 선언한다.

// ✅
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
 ...
};

// ❌
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
 ... 
};

상수 하드코딩 지양

• 단위, 에러 메시지, 경로 등을 문자로 직접 쓰지 않고 상수화한다.
• 재사용 가능한 상수는 constants 폴더에 모아둔다.

function 대신 화살표 함수 사용

• let과 const만 사용한다. (var 사용 금지)
• 주석 없이도 이해되는 코드가 가장 좋지만, 그럴 수 없다면 주석을 달아 동료가 이해할 수 있도록 한다.

한 줄짜리 블록일 경우라도 {}를 생략하지 않고, 명확히 줄 바꿈 하여 사용한다

// ❌
if (true) return 'hello'

// ✅
if (true) {
  return 'hello'
}