해볼까?: vite + react + typescript

2023년 8월 26일 토요일

vite + react + typescript

셋업

# pre-commit 과 yarn 설치
pip install pre-commit
npm i -g yarn

# 프로젝트 생성
yarn create vite 프로젝트명 --template react-swc-ts
cd 프로젝트명
git init
git add .
git commit -m 'initial commit'

# pre-commit 및 패키지 설치
pre-commit install
yarn

# 실행
yarn dev

.pre-commit-config.yaml

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v2.3.0
    hooks:
      - id: end-of-file-fixer
      - id: trailing-whitespace
        args: [--markdown-linebreak-ext=md]
  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v3.0.2                                        
    hooks:
      - id: prettier
  - repo: https://github.com/pre-commit/mirrors-eslint
    rev: v8.47.0
    hooks:
      - id: eslint
        files: \.[jt]sx?$
        types: [file]

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  //const env = {...loadEnv(mode, '..', ''), ...loadEnv(mode, '.', '')};
  const env = loadEnv(mode, '.', '');
  return {
    plugins: [react()],
    server: {
      port: parseInt(env.PORT),
      open: true, // 시작시 브라우저 띄움
    },
  };
});

type Props = {
  setCount: (value: number) => void; // 함수
};

마운트/언마운트

  useEffect(() => {
    console.log('마운트');
    return () => {
      console.log('언마운트');
    };
  }, []);

마운트/업데이트

  useEffect(() => {
    console.log('마운트/업데이트');
  }); // 또는 [변수 리스트]

업데이트만

  const didMountRef = useRef(false);
  useEffect(() => {
    if (!didMountRef.current) { 
      didMountRef.current = true;
      return;
    }

    console.log('업데이트');
  }); // 또는 [변수 리스트]

확장 프로그램 > React Developer Tools > Components > 톱니(View Settings) > General > [v] Highlight updates when components render.