React 전체 챕터 안내

핵심 개념

React 트랙 전체 34챕터(소개 4 + 기초 10 + 중급 10 + 심화 10)의 로드맵과 추천 학습 순서를 한눈에 본다.

본문

이 트랙은 기초 → 중급 → 심화 순서로 구성되어 있습니다. 총 34챕터(소개 4챕터 + 본편 30챕터)로 React을(를) 완전 정복합니다.

📚 React 트랙 전체 챕터 안내

🎯 소개 (CH.1~4)

CH	제목	핵심
01	React 배워서 어디에 쓸까?	활용 분야 + 시작 가이드
02	React 전체 챕터 안내	이 페이지
03	React로 만드는 대표기업 서비스	Meta·Airbnb·Netflix·Discord·Figma
04	AI 프롬프트로 React 200% 활용하기	11개 실전 프롬프트

🟢 기초 (CH.5~14)

CH	제목	핵심
05	컴포넌트 해부: 함수형 컴포넌트	함수형 컴포넌트
06	Props 해부: 데이터 전달 시스템	props 전달
07	useState 해부: 상태 관리 시스템	useState
08	useEffect 해부: 사이드 이펙트 시스템	useEffect
09	useRef 해부: DOM 참조 시스템	useRef
10	useContext 해부: 전역 상태 시스템	useContext
11	useMemo & useCallback 해부: 최적화 시스템	메모이제이션
12	커스텀 Hook 해부: 로직 재사용 시스템	커스텀 훅
13	조건부 렌더링 해부	조건부 렌더링
14	리스트 렌더링 & Key 해부	리스트·key

🟡 중급 (CH.15~24)

CH	제목	핵심
15	이벤트 처리 해부: React 이벤트 시스템	이벤트 처리
16	폼 처리 해부: Controlled Component	폼·controlled
17	useReducer 해부: 복잡한 상태 관리	useReducer
18	컴포넌트 생명주기 해부	생명주기
19	React 성능 최적화: React.memo	React.memo
20	React로 검색 필터 구현	검색 필터
21	React로 무한 스크롤 구현	무한 스크롤
22	React로 드래그 앤 드롭 구현	드래그앤드롭
23	React로 실시간 채팅 UI 구현	채팅 UI
24	React로 다크모드 토글 구현	다크 모드

🔵 심화 (CH.25~34)

CH	제목	핵심
25	React로 페이지네이션 구현	페이지네이션
26	React로 모달 컴포넌트 구현	모달
27	React로 탭 컴포넌트 구현	탭
28	React로 데이터 페칭 구현	데이터 페칭
29	React로 애니메이션 구현	애니메이션
30	React로 글로벌 상태 관리 구현	전역 상태
31	React로 토스트 알림 시스템 구현	토스트 알림
32	React로 캐러셀 슬라이더 구현	캐러셀
33	React로 아코디언 UI 구현	아코디언
34	React 최종 미션: 풀스택 미니 앱	최종 미니 앱

💡 추천 학습 순서: CH.5부터 순서대로 진행하세요. 각 챕터는 이전 챕터의 지식을 기반으로 합니다.

⏱️ 예상 소요 시간: 챕터당 약 15~~20분, 전체 약 8~~10시간

🎯 이 트랙을 마치면: React의 모든 핵심 개념을 자유롭게 활용할 수 있는 능력 + 다음 트랙 준비 완료

💻 React 학습 로드맵

JSX📋 코드 (8줄)

// CH.5~14 기초 — Hook과 컴포넌트 패턴
const beginner = ['컴포넌트', 'Props', 'useState', 'useEffect', 'useRef', 'useContext', 'useMemo', '커스텀훅', '조건부렌더링', '리스트·key'];

// CH.15~24 중급 — 실전 패턴
const intermediate = ['이벤트', '폼', 'useReducer', '생명주기', 'React.memo', '검색필터', '무한스크롤', '드래그앤드롭', '채팅UI', '다크모드'];

// CH.25~34 심화 — UI 시스템
const advanced = ['페이지네이션', '모달', '탭', '데이터페칭', '애니메이션', '전역상태', '토스트', '캐러셀', '아코디언', '풀스택미니앱'];

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

React 트랙 30챕터 학습 순서에서
Hook의 학습 곡선이 가파른 부분과
실전에서 가장 자주 쓰는 챕터를 분석해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

이 30챕터 학습 후 만들 수 있는
React 포트폴리오 5개를 챕터 매핑과 함께 추천해줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

React 30챕터 전체 토픽을 분석해서
실무 활용 빈도순·면접 단골 토픽순으로
우선 학습 순서를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React 30챕터 중에서 2026년에
클래스 컴포넌트·HOC 같은 레거시는 빼도 되는지,
꼭 배워야 하는 게 뭔지 솔직히 분류해줘.

⭐ 이것만 기억하세요

React 전체 챕터 안내는 이 3가지만 확실히 잡으세요

1.React 트랙은 소개 4 + 기초 10(Hook 마스터) + 중급 10(실전 패턴) + 심화 10(UI 시스템) = 총 34챕터

2.Hook(useState/useEffect/커스텀) → 실전 패턴(폼·검색·무한스크롤) → 풀스택 미니 앱 순서

3.CH.5부터 순차 학습 시 약 8~10시간으로 React 정복

💬 이 챕터 질문 보기

REACT · CH.2 — 질문하거나 답변을 확인하세요

→

진행도 2 / 34

← 커리큘럼으로 ← 목록으로 (React)