🚀 React + Vite 프로젝트 시작하기

🎯 1. Vite를 이용한 React 프로젝트 설치

✅ Vite 프로젝트 생성

Vite를 사용하면 빠르고 간편하게 React 프로젝트를 생성할 수 있습니다.

# Vite 프로젝트 생성
npm create vite@latest my-react-app -- --template react

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

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

• npm create vite@latest : 최신 Vite를 사용하여 프로젝트 생성
• --template react : React 템플릿 적용
• npm run dev : 개발 서버 실행 (기본 포트: http://localhost:5173)

🎯 2. 주요 폴더 및 파일 구조

my-react-app/
├── node_modules/     # 설치된 패키지
├── public/           # 정적 파일 (favicon, 이미지 등)
├── src/              # 주요 코드 폴더
│   ├── assets/       # 정적 자산
│   ├── components/   # 재사용 가능한 컴포넌트
│   ├── pages/        # 개별 페이지 컴포넌트
│   ├── App.jsx       # 메인 컴포넌트
│   ├── main.jsx      # React 진입점
├── .gitignore        # Git 제외 파일
├── index.html        # 메인 HTML 파일
├── package.json      # 프로젝트 설정 및 종속성 목록
├── vite.config.js    # Vite 설정 파일

🎯 3. 기본 컴포넌트 구조

✅ App.jsx

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

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

  return (
    <div className="container">
      <h1>React + Vite</h1>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default App;

• useState를 사용하여 상태를 관리합니다.
• 버튼을 클릭하면 count 상태가 증가합니다.

🎯 4. 상태 관리 (Recoil)

✅ Recoil 설치

npm install recoil

✅ store.js (Recoil 상태 관리)

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

✅ Counter.jsx (Recoil 활용)

import { useRecoilState } from 'recoil';
import { countState } from '../store';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <p>Recoil 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>Recoil 증가</button>
    </div>
  );
}

export default Counter;

🎯 5. React Router 설정

✅ React Router 설치

npm install react-router-dom

✅ main.jsx에서 설정

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

✅ App.jsx에서 라우팅 설정

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

🎯 6. API 통신 (Axios)

✅ Axios 설치

npm install axios

✅ api.js (API 요청 설정)

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

export default api;

✅ UserList.jsx (API 호출 예제)

import { useEffect, useState } from 'react';
import api from '../api';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

🎯 7. 스타일링 (Tailwind CSS 적용)

✅ Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✅ Tailwind 설정 (tailwind.config.js 수정)

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

✅ index.css에서 Tailwind 적용

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ Tailwind 활용 예제

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded-md">
      Tailwind 버튼
    </button>
  );
}