Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리

🔍 Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리

프론트엔드 개발에서 빠른 개발 환경과 직관적인 설정으로 각광받는 Vite. 이 글에서는 Vite의 핵심 설정 파일인 vite.config.js를 중심으로 기본 개념부터 실무 예제까지, 그리고 React의 진입점인 App.jsx 구조와 React Hook인 useState의 심화 개념까지 함께 정리합니다.

---

📁 1. vite.config.js 기본 설정 해설

vite.config.js는 Vite 프로젝트의 핵심 설정 파일로, 다음과 같은 역할을 합니다:

• 번들링 대상 정의 (plugins)
• 개발 서버 설정 (server)
• 별칭(alias) 등 모듈 해석 방식 설정 (resolve)
• 빌드 옵션 (build)

▶ 기본 예제

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,	// 기본 개발 서버 포트
    open: true,	// 브라우저 자동 오픈
  },
  resolve: {
    alias: {
      '@': '/src',	// @를 /src로 매핑
    },
  },
});

---

⚙️ 2. 실무 중심 설정 예제 (API 프록시 & 별칭)

✅ API 프록시 설정

백엔드와 포트가 다를 경우 CORS 오류를 해결하기 위한 프록시 설정 예:

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',	// 백엔드 서버 주소
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),	// /api 제거
    },
  },
}

설명: 이 설정으로 클라이언트에서는 /api/users로 요청하면 실제로는 http://localhost:3000/users로 전달됩니다.

✅ 경로 별칭(alias) 설정

폴더 구조가 깊어질수록 상대 경로(../../components)가 가독성을 해치므로 별칭을 적극 활용합니다.

// vite.config.js
resolve: {
  alias: {
    '@components': '/src/components',
    '@hooks': '/src/hooks',
    '@utils': '/src/utils',
  },
}

사용 예:

// javascript
import Header from '@components/Header';
import useFetch from '@hooks/useFetch';

---

🧩 3. App.jsx 구조 분석

vite + React 프로젝트에서 App.jsx는 애플리케이션의 루트 컴포넌트입니다

▶ 기본 구조 예시

// src/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((prev) => prev + 1)}>
        Count is {count}
      </button>
    </div>
  );
}

export default App;

📌 분석 포인트

• useState를 사용한 상태 관리를 수행
• JSX 내 직접 함수와 상태변수를 바인딩
• export default를 통해 루트 컴포넌트로 등록됨
• Vite는 이 컴포넌트를 main.jsx에서 ReactDom.createRoot로 마운트

---

🧠 4. useState 고급 설명과 실무 응용

✅ 기본 구조 복습

// javascript
const [state, setState] = useState(initialValue);

✅ 비동기적 상태 반영 주의점

setState는 비동기적으로 작동합니다. 즉, 아래처럼 쓰면 안됩니다.

// javascript
setCount(count + 1);
console.log(count); // 여전히 이전 값

✅ 안전한 이전 상태 참조 방식

// javascript
setCount((prev) => prev + 1);

함수형 업데이트는 상태가 연속적으로 변경되는 상황에서 안정성을 확보합니다.

✅ 객체 상태 다룰 때 주의사항

// jsx
const [user, setUser] = useState({ name: 'Alice', age: 20 });

// 잘못된 예 : 객체 전체를 교체하지 않으면 값 유지 안됨
setUser({ name: 'Bob' }); // age는 사라짐

// 올바른 예
setUser((prev) => ({ ...prev, name: 'Bob' }));

✅ 상태 배열 다루기

// jsx
const [items, setItems] = useState([]);

setItems((prev) => [...prev, 'New Item']);

불변성 유지(...prev)는 리액트의 리렌더링 최적화를 위해 필수입니다.

---

🏢 5. 실무에서의 구성 방식 예시

📂 추천 폴더 구조

// 폴더 구조
src/
├── assets/
├── components/
├── hooks/
├── pages/
├── utils/
├── App.jsx
├── main.jsx

📁 main.jsx 예시

// src/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>
);

---

🔗 마무리 및 참고 자료

• Vite 공식 문서
• React useState – 공식 문서