[ vite+React 기초학습 ] 강의안

1회차: Vite와 React 소개 및 개발 환경 구축

• Vite란 무엇인가
• Vite vs CRA 비교
• Vite + React 프로젝트 생성 실습
• 디렉토리 구조 이해

2회차: React의 기본 문법과 JSX 이해

• JSX 문법 기본
• JSX에서 JavaScript 표현식 사용법
• Babel의 역할 간략 소개
• 컴포넌트 기본 구조

3회차: 컴포넌트의 구성과 분리

• 함수형 컴포넌트 작성
• 컴포넌트 파일 분리
• Props 전달과 재사용성
• 실습: 사용자 카드 컴포넌트 만들기

4회차: 이벤트 처리와 상태 관리 (useState)

• 이벤트 핸들링 기초
• useState 훅의 기본 개념
• 실습: 클릭 카운터 만들기
• 컴포넌트 상태의 흐름 이해

5회차: 조건부 렌더링과 리스트 렌더링

• 조건부 렌더링 방식: if, 삼항연산자
• 배열 map()을 통한 반복 출력
• key 속성의 중요성
• 실습: Todo 리스트 출력

6회차: 사용자 입력 폼과 상태 제어

• input 요소와 양방향 바인딩
• 폼 이벤트 처리
• 여러 input 상태 관리
• 실습: 사용자 정보 폼 만들기

7회차: useEffect로 사이드 이펙트 처리하기

• useEffect 기본 개념
• 마운트/업데이트/언마운트 타이밍
• 실습: 타이머 컴포넌트
• 정리: 클린업 함수

8회차: React Router로 페이지 구성하기

• SPA와 라우팅 개념
• React Router 설치 및 기본 구성
• Route, Link, useNavigate 사용법
• 실습: 홈/프로필 페이지 구성

9회차: 컴포넌트 스타일링 기초

• CSS Modules, 글로벌 CSS 비교
• styled-components 소개
• 실습: 버튼 스타일링
• 디자인 일관성 유지 방법

10회차: 프로젝트 구조 정리 및 마무리 실습

• 프로젝트 구조 개선 팁
• 공통 레이아웃 구성 (헤더/푸터)
• 실습: 간단한 포트폴리오 페이지
• Vite 빌드 및 배포 방법 안내