Code Convention

🔌 Code Convention

Naming Convention

• 변수 & 함수명

  • camelCase 사용
  • 함수의 경우에는 ${동사+명사}의 형식으로 작성 ex) handleEvent(onEvent)

    const handleToggle()=>{setIsToggle(true)}

  • .map() 함수의 경우에도 동일(컴포넌트 외부로 분리)

    const mapList(item)=>{<ItemComponent item = {item.item} id = {item.id}>}

• type & interface명

  • PascalCase 사용
  • PascalCase + suffix Type
  • params 의 경우
    • PascalCase + suffix Params
    • item은 camelCase

    export interface ItemComponentParams {
    item: string,
    id: number,
    }

• 상수명

  • SNAKE_CASE 사용
  • component 단위로 파일분리

    COMMON_TEXTS {
    followBtn: '언팔하지마'
    }

• Atom명

  • camelCase 사용
  • toggleState

code Convention

• import 규칙

  • import 순서
    • library 먼저 import
    • 폴더 구조 순서대로 import
    • style 관련 import
  • /index로 import
  • import - jsx 사이 공백
  • import React from 'react'의 경우 React.Fragment등 명시적으로 필요한 경우가 아니라면 삭제

• export 규칙

  • export default활용, 컴포넌트 마지막 라인에 작성

• component 규칙

  • 함수 단위별 공백, return문 상단 공백
  • useParams() > useLocation() > customHook(state, effect) > useState(effect는 컴포넌트 내부에서 제외) 순으로 작성
  • const를 let보다 위에 선언
  • else, 삼항연산자(jsx내부, 로직 길어질 때 1줄등 코드 짧을 때는 허용)자제
    • else의 경우 early return등 활용
    • 삼항연산자의 경우 and(&&)연산자로 사용
  • Promise의 경우 async-await문법 활용
  • 주석
    • 설명하려는 구문에 맞춰 들여쓰기
    • 설명이 필요한 로직의 경우 작성
  • jsx return 내부 들여쓰기를 지양
    • 이중 map등=> 데이터 가공 후 1번만, html의 경우 컴포넌트 분리, item사용
  • 컴포넌트 레이아웃 설정 tagname의 경우 Container로 명명