이번에는 **완전 초보자 기준으로 “리액트 웹 프론트엔드 시작”**을👉 웹 화면 만드는 흐름 중심으로 아주 차근차근 설명할게요.
🌐 초보자용 리액트 웹 프론트엔드 시작
1️⃣ 리액트 웹 프론트엔드란?
브라우저에서 보이는 화면을 만드는 기술
HTML/CSS/JS 대신 컴포넌트 단위로 UI 구성
버튼 클릭, 데이터 변경 → 페이지 새로고침 없이 화면 갱신
2️⃣ 시작 전에 꼭 알면 좋은 것
📌 아주 최소
HTML 태그 (div, button)
JavaScript 기초 (let, function, array)
👉 몰라도 따라 하면서 익혀도 OK
3️⃣ 개발 환경 준비 (필수)✅ 설치
Node.js (LTS)
VS Code
Chrome
확인:
node -v
npm -v
4️⃣ 리액트 웹 프로젝트 만들기 (표준)⭐ Vite 사용 (가장 쉬움)
npm create vite@latest react-web
cd react-web
npm install
npm run dev
5️⃣ 웹 프론트엔드 구조 이해
react-web/
├ src/
│ ├ App.jsx ← 웹 화면
│ ├ main.jsx ← 시작 파일
│ ├ index.css ← 전체 스타일
├ index.html ← HTML 뼈대
📌 초보자는 App.jsx만 집중하면 됨
6️⃣ 첫 웹 화면 만들기src/App.jsx
function App() {
return (
<>
<h1>React 웹 프론트엔드</h1>
<p>첫 화면입니다</p>
<button>클릭</button>
</>
);
}
export default App;
7️⃣ 클릭하면 화면 바뀌게 만들기 (핵심!)
import { useState } from "react";
function App() {
const [message, setMessage] = useState("버튼을 눌러보세요");
return (
<>
<p>{message}</p>
<button onClick={() => setMessage("변경 완료!")}>
클릭
</button>
</>
);
}
export default App;
👉 JS 값 변경 → 웹 화면 즉시 반영
8️⃣ 웹 페이지처럼 나누기 (컴포넌트)
function Header() {
return <h2>웹 사이트 헤더</h2>;
}
function App() {
return (
<>
<Header />
<p>본문 영역</p>
</>
);
}
✔ 헤더 / 본문 / 푸터 분리 가능
9️⃣ 웹에서 자주 쓰는 반복 출력
const menu = ["홈", "소개", "문의"];
function App() {
return (
<ul>
{menu.map((item, i) => (
<li key={i}>{item}</li>
))}
</ul>
);
}
🔟 웹 스타일 적용CSS 파일 사용
.title {
color: darkblue;
}
<h1 className="title">제목</h1>
🎯 초보자가 꼭 기억해야 할 것
✔ HTML 대신 JSX✔ 화면은 컴포넌트✔ 상태 변경은 useState✔ 클릭/입력은 이벤트✔ 새로고침 없음 (SPA)
