Vite를 사용한 첫 번째 React 앱 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 Vite 초보 개발자, 프론트엔드 개발자

핵심 요약

• Node.js와 npm 설치 및 버전 확인 (최신 LTS 버전 권장)
• Vite를 사용한 React 프로젝트 생성 (npm create vite@latest 명령어 활용)
• useState 훅으로 상태 관리 및 CSS 스타일링 적용
• 생산 환경용 빌드 생성 (npm run build 명령어 활용)

섹션별 세부 요약

1. Node.js와 npm 설치

• Node.js 18+ 설치 후 node -v 및 npm -v로 설치 확인
• npm 또는 yarn/pnpm을 사용한 의존성 관리 도구 선택

2. Vite 기반 React 프로젝트 생성

• npm create vite@latest my-first-react-app -- --template react 명령어 실행
• cd my-first-react-app 및 npm install 설치 후 npm run dev로 개발 서버 실행
• 기본 주소 http://localhost:5173/에서 앱 확인

3. 프로젝트 구조 이해

• src/ 폴더: App.jsx (메인 컴포넌트), main.jsx (렌더링 진입점)
• public/ 폴더: 정적 자산 저장
• vite.config.js: Vite 설정 파일

4. 첫 번째 컴포넌트 수정

• src/App.jsx 파일 열고 기본 컴포넌트 템플릿 확인
• import { useState } from 'react'; 사용하여 상태 관리 훅 추가

5. useState 훅으로 상태 관리

• const [count, setCount] = useState(0); 상태 변수 정의
• 버튼 클릭 시 setCount(count + 1)로 상태 업데이트
• 상태 변경 시 UI 자동 업데이트

6. CSS 스타일링 적용

• src/App.css 파일에서 .App 클래스 스타일 정의
• App.jsx에서 import './App.css';로 스타일 적용

7. 생산 환경 빌드

• npm run build 명령어로 최적화된 빌드 생성
• dist/ 폴더에 생성된 파일을 서버에 배포

결론

• Vite의 빠른 개발 서버와 최적화된 빌드 프로세스를 활용해 프로젝트를 효율적으로 개발
• useState 및 CSS 모듈화를 통해 상호작용적 UI 구현
• npm run build로 생산 환경에 적합한 최적화된 앱 배포