Code Convention

ESLint

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "prettier",
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["prettier", "react", "@typescript-eslint", "react-hooks"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

export

값을 내보낼 때에는 export 사용합니다. 
export default는 사용하지 않습니다.

Prettier

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

Router

router는 단어와 단어를 -으로 구분합니다.
ex) first-page

Folder

폴더 이름은 camelCase로 작성합니다. 복수 취급합니다.
ex) pages, components, hooks, utils

File

파일 이름은 PascalCase를 사용합니다. 용도에 따라 단수, 복수 취급합니다.
ex) File.tsx, Files.tsx

Variable

변수명은 CamelCase로 작성합니다.
ex) const variable:string = 'variableName'

Styled component

스타일 컴퍼넌트의 이름은 _(언더바) + PascalCase를 사용합니다.
ex) const _StyledComponent = styled.div``

Type, Interface

Type과 Interface, Component의 이름은 PascalCase를 사용합니다.
ex) type TypeName
interface InterfaceName
ComponentName

Function

함수명은 camelCase를 사용합니다. JSX를 리턴하는 컴포넌트 제외 arrow function만을 사용합니다.
ex) const functionName = () => {}

enum type

enum type 대신 union type을 사용합니다.
// enum 
ex)enum Fruit {
  Apple,
  Banana,
  Orange,
}
// union type
type Fruit = "apple" | "banana" | "orange";

async / await

async 함수 안에는 await을 필수로 사용합니다.

이전 값 참조

• useState 배열 혹은 객체의 값을 변화 시킬 때 이전 값 사용하기

//ex
const [form, setForm] = useState([]);
const a = "a"
    
setForm([...form, a]) ❌
setForm((prev) => [...prev, a]) ✅

익명함수

• onClick과 같은 이벤트에서 익명함수 넣지 않기

//ex

function a() {
	console.log('hello')
}

<div onClick={() => console.log('hello')}></div> ❌
<div onClick={a}></div> ✅

객체 리턴 값

• 객체 리턴 값들은 이름 바꿔서 사용하기

//ex
function a() {
	return {
		b: "data", 
		c: "jikwan"
	}

const {b, c} = a(); ❌
const {b: data, c: detail} = a(); ✅

props drilling

props drilling 횟수를 3회로 제한 합니다.