1. React 개발환경 세팅 (with Vite)
React를 시작하기 전에 먼저 개발 환경부터 준비해야 합니다.
최근엔 Vite가 CRA(create-react-app)보다 훨씬 빠르고 효율적이라 많이 사용됩니다.
✅ Node.js 설치
- 공식 웹사이트: https://nodejs.org
- 설치하면
npm도 함께 설치됩니다. - npm: 자바스크립트 패키지(라이브러리)를 관리해주는 도구입니다.
✅ 프로젝트 생성 순서
# 1. 새 폴더 만들기
mkdir my-react-blog
# 2. 폴더로 이동
cd my-react-blog
# 3. Vite로 React 프로젝트 생성
npm create vite@latest
# 4. 프로젝트 이름 입력 (예: my-react-app)
# 5. 프레임워크 선택 → React
# 6. Variant 선택 → JavaScript
# 7. 프로젝트 폴더로 이동
cd my-react-app
# 8. 패키지 설치
npm install
# 9. 개발 서버 실행
npm run dev
🟢 브라우저에서 http://localhost:5173 에 접속하면 React 개발화면이 나타납니다.
🗂️ 2. 기본 파일 구조
my-react-app/
├── public/
├── src/
│ ├── App.jsx ← 핵심 컴포넌트
│ ├── main.jsx ← 앱의 시작점
│ └── index.css
├── index.html ← 진짜 HTML 파일 (root 엘리먼트)
├── package.json ← 명령어와 라이브러리 정보
✅ 실질적으로 작업하는 공간은 대부분 App.jsx입니다.
🧠 3. JSX 기초 문법 정리
JSX는 자바스크립트 안에서 HTML을 작성할 수 있게 해주는 문법입니다.
✅ class는 className으로 써야 함
<h4 className="title">블로그 제목</h4>✅ 자바스크립트 변수는 중괄호 {} 사용
let post = "강남 우동 맛집";
<h4>{post}</h4>✅ 스타일은 객체처럼 작성
<h4 style={{ color: 'red', fontSize: '20px' }}>제목</h4>✅ HTML은 반드시 return() 안에 작성
function App() {
return (
<div>
<h4>블로그</h4>
</div>
);
}
🧩 4. useState – 상태 관리의 시작
import { useState } from 'react';
let [likes, setLikes] = useState(0);
likes: 현재 상태값setLikes: 상태를 변경하는 함수
✅ 상태 출력
<span>{likes}</span>✅ 상태 변경
<button onClick={() => setLikes(likes + 1)}>👍 좋아요</button>배열 상태 변경 시 복사본 사용
let [titles, setTitles] = useState(['강남 우동 맛집', '남자 코트 추천']);
let copy = [...titles];
copy[0] = '여자 코트 추천';
setTitles(copy);
🔁 5. 반복되는 HTML 처리 – map()
배열 map()으로 렌더링
let posts = ['강남 우동', '코트 추천', '파이썬 독학'];
return (
<div>
{posts.map((title, i) => (
<h4 key={i}>{title}</h4>
))}
</div>
);
⚠️ JSX 안에서는 for 대신 map()을 사용해야 합니다.
🎨 6. 동적 UI 설계 패턴 (3단계)
동적 UI를 만들 때는 디자인 → 상태 → 조건부 렌더링 순서로 진행합니다.
Step 1. 기본 UI
<button>설명 열기</button>
<p>이건 설명입니다.</p>Step 2. 상태 변수 생성
let [showDesc, setShowDesc] = useState(false);Step 3. 조건부 렌더링
<button onClick={() => setShowDesc(!showDesc)}>설명 열기</button>
{showDesc ? <p>이건 설명입니다.</p> : null}
8. package.json에서 명령어 수정하기
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
예를 들어 npm start로 실행하고 싶다면:
"scripts": {
"start": "vite"
}
9. 디스트럭쳐링 (Destructuring)
let [a, b] = [1, 2];→ useState()에서 [값, 변경함수] 구조로 사용하는 것도 같은 원리입니다.
마무리
React 입문자를 위한 개발환경 설정부터 JSX 문법, 상태관리, 이벤트 처리, 컴포넌트 구성까지
React의 기본을 한 번에 정리해봤습니다.