리액트 시작하기: npx create-react-app 없이 Vite로 5초 만에 환경 구축하기

 

리액트(React) 공부를 시작할 때 가장 먼저 접하는 명령어는 아마 npx create-react-app일 것입니다. 하지만 최근 프론트엔드 생태계에서는 이 방식보다 훨씬 빠르고 효율적인 **Vite(비트)**가 표준으로 자리 잡고 있습니다.

오늘은 왜 Vite를 써야 하는지, 그리고 단 5초 만에 리액트 프로젝트를 생성하는 방법을 상세히 알아보겠습니다.

1. 왜 create-react-app(CRA)이 아닌 Vite인가요?

기존의 CRA는 Webpack이라는 번들러를 사용합니다. 프로젝트 규모가 커질수록 개발 서버를 띄우는 데 수 분이 걸리기도 하고, 코드 수정 시 반영 속도(HMR)가 느려지는 단점이 있습니다.

Vite의 장점:

• 압도적인 속도: Native ESM을 활용하여 서버 시작이 거의 즉각적입니다.
• 가벼운 설정: 불필요한 의존성이 적어 프로젝트 폴더가 가볍습니다.
• 최신 트렌드: 현재 많은 기업과 오픈소스 커뮤니티에서 공식적으로 권장하는 방식입니다.

2. Vite로 리액트 프로젝트 생성하기 (실습)

터미널(Terminal) 또는 명령 프롬프트를 열고 아래 순서대로 따라 해 보세요.

1단계: 프로젝트 생성 명령어 입력

가장 먼저 아래 명령어를 입력합니다.

npm create vite@latest

2단계: 프로젝트 설정 선택

명령어를 입력하면 대화형 인터페이스가 나타납니다. 키보드 방향키와 Enter를 이용해 선택하세요.

1. Project name: my-react-app (원하는 이름 입력)
2. Select a framework: React 선택
3. Select a variant: JavaScript 또는 TypeScript 선택 (입문자는 JavaScript 추천)

3단계: 패키지 설치 및 실행

설정이 끝나면 터미널에 안내 문구가 나옵니다. 그대로 입력하면 됩니다.

# 프로젝트 폴더로 이동
cd my-react-app

# 필요한 라이브러리 설치 (CRA보다 훨씬 빠릅니다!)
npm install

# 로컬 개발 서버 실행
npm run dev

터미널에 Local: http://localhost:5173/ 같은 주소가 뜨면 성공입니다! 브라우저로 접속해 보세요.

3. Vite 프로젝트 구조 살펴보기

Vite로 생성된 리액트 프로젝트는 CRA와 약간 다른 구조를 가집니다.

• index.html: root 폴더에 위치합니다. Vite는 HTML을 앱의 엔트리 포인트로 취급하기 때문입니다.
• vite.config.js: Vite 설정을 관리하는 파일입니다. 나중에 절대 경로 설정이나 프록시 설정을 할 때 사용합니다.
• src/main.jsx: 리액트 앱이 시작되는 지점입니다.

예제: 첫 번째 컴포넌트 수정하기

src/App.jsx 파일을 열어 아래와 같이 간단한 코드를 작성해 보세요.

import { useState } from 'react'

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Vite + React 초고속 시작하기</h1>
      <p>클릭 한 번으로 숫자를 올려보세요.</p>
      <button onClick={() => setCount(count + 1)}>
        현재 카운트: {count}
      </button>
    </div>
  )
}

export default App

코드를 저장하는 순간, 브라우저가 새로고침 없이 즉각적으로 변하는 것을 확인할 수 있습니다. 이것이 Vite의 강력한 HMR(Hot Module Replacement) 성능입니다.

4. 자주 사용하는 스크립트 명령어

프로젝트를 운영하면서 가장 자주 쓰게 될 명령어들입니다. package.json 파일에서 확인할 수 있습니다.

명령어용도

npm run dev	개발 모드로 서버 실행 (코드 수정 시 즉시 반영)
npm run build	배포를 위한 최적화된 파일 생성 (dist 폴더 생성)
npm run preview	빌드된 결과물을 로컬에서 미리 확인

마무리하며

이제 더 이상 리액트 환경 구축을 위해 긴 시간을 기다릴 필요가 없습니다. Vite를 사용하면 세팅에 드는 에너지를 줄이고 오로지 코드 작성과 로직 구현에만 집중할 수 있습니다.

지금 바로 터미널을 열고 나만의 첫 번째 Vite 프로젝트를 시작해 보세요!