[ React ] 프로젝트 생성 방식 비교 : CRA vs Vite

CRA(Create React App) vs Vite

React 프로젝트를 시작할 때 쓰이는 두 가지 방식 Create React App(CRA)과 Vite을 비교할 것이다.

---

0. 프로젝트 생성 방식 (공통: 패키지 매니저는 Yarn 사용)

🧱 CRA로 생성

yarn create react-app cra-react

⚡ Vite로 생성

yarn create vite vite-react --template react

---

1. 프로젝트 구조 비교

🧱 CRA로 생성한 구조

cra-react/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico ...
├── src/
│   ├── App.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package.json
├── README.md
└── yarn.lock

⚡ Vite로 생성한 구조

vite-react/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
├── index.html
├── package.json
├── vite.config.js
└── yarn.lock

 

 

 

📌 핵심 차이점

항목	CRA	Vite
진입점	index.js	main.jsx
HTML 위치	public/index.html	루트에 바로 index.html
번들러 설정	숨겨져 있음 (eject 필요)	vite.config.js로 자유롭게 설정
빌드 툴	Webpack 기반	esbuild + rollup 기반

 

---

 

CRA 방식 실행 결과

App.js

import {useState,version} from 'react'
import React from 'react'
import './App.css'

function MyButton({OnClick}){
  return <button onClick = {OnClick}>My Button</button>;
}

const park = {name:'SeungHui', hobbies:["Bike","Reading"]};

const AboutMe = ({myinfo})=>{//함수형 컴포넌트
  const {name, hobbies} = myinfo;
  return(
    <>
      <h2>{name}</h2>
      <div>
        <ul style = {{listStyle:"none", padding:0}}>
          {hobbies.map((hobbies)=>(
            <li key = {hobbies}>{hobbies}</li>
          ))}
        </ul>
      </div>
    </>
  );
};

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      <h1>React {version}</h1>
      <MyButton OnClick={()=>setIsLoggedIn(!isLoggedIn)} />
      {isLoggedIn ? <AboutMe myinfo ={park}/>:<h3>LoginForm</h3>}
    </>
  )
}

export default App