코딩 컨벤션

1. 변수, 함수명은 기본적으로 camelCase로 한다.

const postList = [];
const addNumber = () => {};

2. 상수명은 SNAKE_CASE로 하며, 내부 프로퍼티는 소문자로 한다. 또한 끝에 as const 선언을 추가한다.

const SOME_CONSTANT = 1;

const RANGE = {
  min: 3,
  max: 4,
} as const;

3. 컴포넌트 Props 타입명은 컴포넌트 이름 + Props로 한다.

interface ComponentProps { ... }

4.타입과 컴포넌트명이 겹치는 경우 타입명은 끝에 Data를 붙인다.

interface MissionListData {
 ...
}

export default function MissionList (data : MissionListData){}

5. Boolean 타입 변수는 is, has, can 과 같은 접두사를 붙인다.

const isValidValue = true;
const hasValue = false;
const canEnter = true;

6. 커스텀 훅의 인자 타입에는 끝에 Params를 추가한다.

type UseRangeParams = {
  min: number;
  max: number;
};

const useRange = ({ min, max }: UseRangeParams) => {};

7. 이벤트 핸들러명은 handle 접두사를 가진다.

const handleMissionLevelValue = () => {};

8. 이벤트 핸들러를 Props로 전달할때는 on 접두사를 가진다.

export default function Component() {
  const handleMissionLevelValue = () => {
    // ...
  };

  return <OtherComponent onHandleMissionLevelValue={handleMissionLevelValue} />;
}

9. children으로 감싸는 Wrapper 컴포넌트의 children 타입은 PropsWithChildren으로 통일한다.

import type { PropsWithChildren } from 'react';

export default function Wrapper({ children }: PropsWithChildren) {
  return <div>{children}</div>;
}

10. api 함수명은 각 api HTTP 메서드 명을 접두사로 사용한다.

const getMission = () => {};
const postMission = () => {};
const deleteComment = () => {};

11. 컴포넌트명 스타일링 네이밍

네이밍	설명
Container	컴포넌트의 최상단
Wrapper	여러 개의 요소든 단일 요소든 감싸줘야 할 때
List	ul, ol 태그를 사용할 때 권장
Item	li 태그, 반복되는 요소를 사용할 때 권장

각 항목은 Component명 + 네이밍 으로 조합한다.

12. 타입만을 import 할때는 type only import를 한다.

import type { ExampleType } from '@types/types';

13. 컴포넌트를 export 할때는 default export를 사용한다.

export default function Component() {}

14. 스타일 컴포넌트를 import 할때는 무조건 * as S 로 통일한다.

import * as S from './Component.styled';

15. 단일 스타일이더라도 무조건 별도의 파일로 분리한다.

┣ ┗ component
┣   ┗ index.tsx
┣   ┗ Component.styled.ts

16. 함수나 스타일링 파일, 상수 등 필요한 값들을 export 할때는 named export를 한다.

export const function = () => { ... };
export const Container = styled.div;


export const MESSAGE = {} as const;

17. 컴포넌트에서는 받아온 상태(데이터)를 그대로 받아온 표현하는 역할만 수행하는 것을 지향하자. 다만 아래와 같이 단일 상태인 경우 자유롭게 결정한다.

export default function Component() {
  const [data, setData] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  return (...);
}

18. 함수와 훅에는 인자 및 반환타입을 무조건 명시한다.

export const addNumber = (a: number, b: number): number => {
  return a + b;
};

19. 최상단의 폴더명은 복수형으로 한다.

src
┣ folderNames
┣ otherFolderNames
...

- Component 폴더 이름은 파스칼로!
- Component 폴더 내 메인이 되는 컴포넌트는 index.tsx로 네이밍!

20. 객체 타입인 경우에는 interface를 사용한다.

type SomeType  = {
asd: sasdad
}

interface PersonData {
  name: string;
  age: number;
  address: string;
}

export default function Person({ name, age, address }: PersonData) {}