React Introduction Guide

Java/JSP/Spring Boot 개발자를 위한 React 기초 튜토리얼

Tech Stack

• React 18
• TypeScript
• Vite
• React Router DOM v6
• Axios

Installation & Run

npm install
npm run dev

Pages

#	Page	Description
1	Flux Pattern	Flux 아키텍처 설명 (SVG 애니메이션)
2	useState	상태 관리 기초 (카운터 예시)
3	State Mutation	직접 할당 vs setState 비교
4	List Rendering	배열 데이터 렌더링 (map, key)
5	Re-rendering	리렌더링 조건 설명 (SVG 다이어그램)
6	Context API	전역 상태 관리 (테마 전환)
7	API Integration	Axios로 API 호출

Project Structure

src/
├── main.tsx
├── App.tsx
├── App.css
├── components/
│   ├── Navigation/
│   │   └── TabNavigation.tsx
│   └── pages/
│       ├── FluxPatternPage.tsx
│       ├── UseStatePage.tsx
│       ├── StateMutationPage.tsx
│       ├── ListRenderingPage.tsx
│       ├── ReRenderingPage.tsx
│       ├── ContextAPIPage.tsx
│       └── APIIntegrationPage.tsx
└── context/
    └── ThemeContext.tsx