안녕하세요! 프론트엔드 개발자가 되기 위해 React를 공부하며 만든 실습 프로젝트들을 모은 저장소입니다. 각 챕터는 책과 강의, 그리고 직접 만든 예제들을 기반으로 구성되어 있으며, 리액트의 기초부터 상태 관리, 컴포넌트 분리, 훅 사용까지 점진적으로 학습할 수 있도록 구성했습니다.
| 챕터 | 주제 | 주요 내용 |
|---|---|---|
| ch01 | 리액트 시작하기 | 개발환경 설정, JSX 출력, 컴포넌트 기초 |
| ch02 | 이벤트와 상태 | 버튼 클릭, 입력 폼, useState |
| ch03 | 조건부 & 리스트 렌더링 | 조건부 UI, map 반복, 로그인 상태 표현 |
| ch04 | 컴포넌트 분리 | props 전달, 상하위 통신 |
| ch05 | 기본 Hooks | useEffect, 마운트/언마운트 처리 |
| ch06 | 커스텀 훅 | useXXX 훅 만들기, 로직 재사용 |
- React
- JSX / JavaScript
- Vite (일부 프로젝트)
- TailwindCSS (선택)
- Git & GitHub
각 챕터는 독립적인 실습 폴더로 구성되어 있습니다.
2408_React/
├── ch01/ # 리액트 시작
├── ch02/ # 상태와 이벤트
├── ch03/ # 조건부/리스트 렌더링
├── ch04/ # 컴포넌트 분리
├── ch05/ # useEffect 등 기본 훅
├── ch06/ # 커스텀 훅
각 폴더 안에는 여러 단계별 예제가 포함되어 있고, 실습용 README도 함께 들어 있습니다.
- 실습 코드를 직접 타이핑하며 구조를 익혔습니다.
- 수정 → 저장 → 실행 반복으로 변화 과정을 이해하려 했습니다.
- 이해가 잘 안 되는 부분은
console.log()로 값 흐름을 출력해보며 디버깅했습니다. - 비슷한 기능을 반복해 만들면서 익숙해졌습니다.
- 각 예제에 주석 추가로 설명 보강하기
- TypeScript 버전으로 재작성 도전
- Firebase 연결해보기 (CRUD)
- GitHub Pages나 Vercel로 배포
React를 제대로 이해하고, 작은 기능이라도 직접 만들 수 있는 실력을 기르는 것이 목표입니다. 이 저장소는 그 여정을 기록하는 공간이자, 나중에 돌아보기 위한 자료입니다!
감사합니다 🙌