Skip to content

Coding Convention

Jump to bottom
류하준 edited this page Feb 3, 2022 · 14 revisions

✔️ Coding Convention

컴포넌트 작성 방식, 네이밍 규칙, 프로젝트 폴더와 파일 구조 등 필요한것들을 정하여 일관성 있게 개발했으면 좋겠어요!

  • ASI를 이용하지 않고 세미콜론을 필수적으로 써준다. (prettier로 관리).

  • 함수는 화살표 함수로만 작성한다. 만약 에디터가 JSX와 제네릭을 혼동할땐 <T extends unknown>사용, (프로토타입 메서드 제외)

  • var를 쓰지 않고, const와 let을 사용한다.(const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)

  • image, svg는 kebab-case 사용하여 네이밍한다.(ex. erase-check.svg).

  • 변수명은 camelCase로 작성한다. (issueLabel). 만약 서버에서 카멜케이스가 아닌 형태로 내려온다면 카멜케이스로 파싱하여 사용한다.

  • .tsx 파일의 파일(폴더)명은 PascalCase를 사용한다. ex) LoginPage.tsx 단, Next.js의 pages폴더 하위의 파일명은 예외로 한다.

  • webpack alias를 이용해서 파일 절대 경로로 import, export 사용한다. src: @ 단, 같은 depth를 가진 파일을 import 할 때만 상대경로를 사용해준다. (예를 들어 style.ts같은 스타일 컴포넌트)

  • components, container, pages를 export할때는 하나의 파일(ex. index.ts)에 모아서 export한다.

  • 만약 해야 할 일에 관한 주석이 필요 할 경우 // TODO:(이름) 해야 할 일을 적어준다

  • style은 emotion을 이용한 CSS in JS를 사용한다. 그리고 Component와 같은 depth에 style.ts을 만들어 관리한다.

  • 변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해준다.

  • z-index는 변수를 이용하여 관리하되 5단위로 사용해준다.

  • 컴포넌트에서 조건부 렌더링을 할때 렌더링을 하지 않아야 할 경우 return null; 을 사용해준다.

  • children prop의 Type은 ReactNode로 사용한다.

  • className에 값을 할당해줄때는 무조건 classNames함수를 사용해준다. (1개의 class를 할당하거나 정적인 className을 할당해줄때도)

  • Fragment는 Props가 존재하지 않을떄는<>/</>형태, 존재할땐 <Fragment prop=""></Fragment>형식으로 사용해준다.

  • 함수 컴포넌트의 return값은 무조건 추론이 가능하니 생략해준다.

// Bad case
const ExerciseChoice = ({}: Props): ReactElement => {
  return <div />;
}

// Good case
const ExerciseChoice = ({}: Props) => {
  return <div />;
}
  • 이벤트 핸들러를 정의할때 handle + 메서드명(동사 + 명사)로 정의한다.
const Button = ({ handleClickButton }: Props) => {
  return <button onClick={handleClickButton} />
}

const Calendar = ({}: Props) => {
  const handleClickDateType = () => {};
  const handleOpenModal = () => {};

  return (
    <>
      <Button handleClickButton={handleClickDateType} />
      <Button handleClickButton={handleOpenModal} />
    </>
  );
};
  • StyledComponent에 props가 존재 할 경우 아래와 같은 형식으로 작성해준다. Props에 대한 타입(제레닉)은 Styled + 컴포넌트명 + Props로 interface명을 지어준다.
interface StyledContainerProps {
  size: InputSize;
}

const Container = styled.div<StyledContainerProps>`
  ${({size, theme}) => css`
    ${theme.fonts.kr.regular15};
    ${getInputSizeStyle(size, theme)};
    color: ${theme.color.white};
    display: flex;
  `}
`
  • 만약 props가 없는 경우 아래처럼 일반적인 StyledComponent처럼 사용해준다.
const Container = styled.div`
  color: white;
`
Clone this wiki locally