[React] Vite를 사용한 React 프로젝트 시작

🔍 Vite란?

Vite는 차세대 프론트엔드 빌드 도구로 React와 함께 사용하면 매우 빠른 개발 경험을 제공합니다. 리액트 개발시 보통은 react-create-app 이라는 명령어를 주로 사용하는데 최근에는 vite들을 많이 사용하는 것 같아서 이에 대한 자료를 작성해보았습니다. 기존 환경들 보다 많이 빠르다고들 합니다. 

주요 특징:

• ⚡️ 매우 빠른 서버 시작: 번들링 없이 즉시 개발 서버를 시작
• 🔥 빠른 HMR (Hot Module Replacement): 모듈 단위로 즉각적인 업데이트
• 🏗️ 최적화된 빌드: Rollup 기반의 효율적인 프로덕션 빌드
• 🔧 TypeScript와 JSX 즉시 지원: 별도 설정 불필요

🛠️ Vite로 React 프로젝트 생성하기

🚀 1단계: Vite로 React 프로젝트 만들기

# npm 사용
npm create vite@latest my-react-app -- --template react

 

 

📥 2단계: 의존성 설치

cd my-react-app
npm install

⚡ 3단계: 개발 서버 실행

npm run dev

콘솔에 아래처럼 나오면 성공입니다.

rundev 실행

 

브라우저에서 열면 아래와 같이 React 화면이 뜹니다! 🎉

 

 

📁 프로젝트 구조

my-app/
├── index.html                 # HTML 진입점
├── vite.config.js            # Vite 설정 파일
├── package.json              # npm 설정
├── public/                   # 정적 파일
│   └── vite.svg             # 공개 에셋
└── src/                      # 소스 코드
    ├── App.jsx              # 메인 컴포넌트
    ├── main.jsx             # React 진입점
    ├── App.css              # 스타일
    ├── index.css            # 글로벌 스타일
    └── assets/              # 이미지 등

🧪 핵심 파일 예제

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

App.jsx

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
    </div>
  )
}

export default App

⚙️ Vite 설정 사용자화

vite.config.js를 수정하여 원하는 대로 설정할 수 있습니다:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,        // 개발 서버 포트 변경
    open: true         // 자동으로 브라우저 열기
  },
  build: {
    outDir: 'dist',    // 빌드 디렉토리
    sourcemap: true    // 소스맵 생성
  }
})

 

🆚 Vite vs Create React App (CRA)

특징 Vite Create React App

시작 속도	매우 빠름 (ES 모듈 사용)	상대적으로 느림
HMR 속도	거의 즉각적	상대적으로 느림
빌드 시간	빠름 (Rollup 사용)	중간 (Webpack 사용)
설정 복잡도	간단	중간
생태계 성숙도	성장 중	매우 성숙함

Vite는 특히 대규모 프로젝트에서 개발 속도가 훨씬 빠르고, 현대적인 JavaScript 생태계와 잘 통합되어 있어 새로운 React 프로젝트를 시작할 때 강력히 추천합니다! 💪