[React] TypeScript 로 프로젝트 기본 세팅

🎈 리액트 설치

npx create-react-app --template typescript

🎈 ESLint, Prettier 설치

1. ESlint, prettier 설치

npm install --save-dev eslint prettier

2. 타입스크립트에 ESlint를 적용하기 위한 플러그인 설치

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser    

3. ESlint와 prettier 를 함께 사용하기 위한 플러그인 설치

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

🎈 ESLint 적용

package.json 에서 아래 부분을 삭제한다.

// package.json

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

root 경로에 .eslintrc.json 파일을 생성하고 아래 내용을 입력한다.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint",
		"prettier",
        "react"
    ],
    "rules": {
        "prettier/prettier": [
            "error", {
                "endOfLine": "auto"
            }
        ]
    }
}

🎈 prettier 적용

root 경로에 .prettierrc 파일을 생성하고 아래 내용을 입력한다.

{ 
  "parser": "typescript",
  "singleQuote": true,       // 작은 따옴표 사용    
  "semi": true,              // 문장 끝 세미콜론 여부
  "useTabs": false,          // 공백 대신 탭 사용 여부
  "tabWidth": 2,             // 들여쓰기 칸 수
  "printWidth": 120,         // 라인의 최대 길이
  "arrowParens": "always"    // 화살표 함수에서 매개변수를 괄호로 감쌀지 여부
}

prettier 상세 설정 참고

🎈 VSCode 자동 저장 옵션 설정

vscode 상단 검색창에 setting.json 을 입력해서 열고, 파일에 아래 내용을 추가한다.
파일을 저장할 때마다 ESLint가 적용된다.

{
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
}

🎈 코드 스니펫

VSC 검색창에 > 를 입력하고 Configure User Snippets > typescriptreact.json 파일로 들어간다.

{
	"Functional Component" : {
    "scope": "typescript, typescriptreact",
    "prefix": "tsafc",
    "body": [
      "import React from 'react';",
			"",
      "interface Props {",
			"  "
			"}",
			"",
      "const ${TM_FILENAME_BASE} = ( {  } : Props ): JSX.Element => {",
      "  ",
			"  return (",
      "    <div>",
      "      ",
      "    </div>",
      "  );"
      "}\n",

      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "typescript 기본 함수형 컴포넌트"
  },

	"UseState Functional Component" : {
    "scope": "typescript, typescriptreact",
    "prefix": "tsstate",
    "body": [
      "interface State = {",
			"",
			"}",
			"  ",
			"const [value, useValue] = useState<State | null>({",
			"  ",
			"});"
    ],
    "description": "typescript useState 타입 지정"
  },
}

useState를 사용할 때는 Generic을 사용해서 타입을 지정하는데, 사실 타입스크립트가 타입 추론을 잘 해내기 때문에, 꼭 generic을 사용하지 않고 생략해도 됩니다.
단, state가 null일 수도 있고 아닐 수도 있을 때는 Generic을 사용하는 것이 좋습니다.
또, 단순 원시값이 아닌 참조값을 가리키는 객체나 배열이 상태에 담겨있을 경우 Generic으로 명시하는 것이 좋습니다.