실전 앱 개발로 익히는 리액트 입문! 리액트 기초 문법과 개념을 빠르게 익혀보세요.
리액트 입문 마스터클래스
: 처음부터 실전 앱까지
본 과정은 리액트를 처음 접하는 입문자를 대상으로, 컴포넌트 · 상태관리 · Hooks · API 연동 · 배포까지 최신 프론트엔드 개발에 필요한 모든 개념을 실습 중심으로 배우는 실전형 개발 부트캠프입니다. 단순히 리액트 문법만 배우는 것이 아니라, 실제 애플리케이션을 만들며 컴포넌트 기반 개발을 체득합니다.
왜 지금 리액트를 배워야 할까요?
현대 웹 서비스는 더 빠르고 반응적인 싱글 페이지 애플리케이션(SPA)을 선호하며, 이 흐름을 이끄는 대표 기술이 바로 리액트입니다. 리액트는 UI를 컴포넌트 단위로 구성하여 유지보수성과 재사용성을 극대화하고, 상태관리와 렌더링을 효율적으로 처리합니다.
본 강의는 개념 위주의 강의가 아니라, 컴포넌트 → 이벤트 처리 → 상태관리 → Hooks → API 연동 → 배포의 흐름을 따라 직접 프로젝트를 만들며 배우는 실전형 과정입니다.
사용하는 기술 스택
HTML5
시맨틱 마크업
CSS3
레이아웃 & 반응형
자바스크립트
동적 기능 구현
리액트
컴포넌트 기반 개발
Vite
초고속 개발환경
Bootstrap
빠른 UI 구성
Fetch API
외부데이터 연동
깃/깃허브
버전관리
Vercel
배포
이 강의는 이런 분께 추천합니다
이 강의에서 배우게 될 핵심 기술
이 강의가 특별한 이유
기초 → 자바스크립트 → 리액트까지 자연스러운 흐름으로 학습합니다.
컴포넌트, 상태관리, API 연동 등 실무 기술을 손으로 익힐 수 있습니다.
수강 후 바로 포트폴리오에 넣을 수 있는 프로젝트를 완성합니다.
수강 후 기대 효과
4단계 리액트 학습 로드맵
1단계. 리액트기본기 다지기
• JSX 문법, 컴포넌트 기본 패턴
• Props / State 개념 명확히 이해
• 간단한 UI 구조 설계
2단계. Hooks & 이벤트 처리
• useState, useEffect 완전 이해
• 사용자 입력 처리, 이벤트 핸들링
3단계. API 연동 + 상태관리
• 외부 API 호출 (fetch)
• 로딩/에러 처리
• 조건부 렌더링 & 리스트 렌더링
4단계. 실전 프로젝트 완성
• 작은 SPA 아키텍처 설계
• 재사용 가능한 컴포넌트 구성
• API 기반 웹앱 완성 & 배포
실습 프로젝트 예시
외부 API를 호출해 데이터를 화면에 렌더링하는 미니 SPA
입력값 · 리스트 관리 · 조건부 렌더링 등 실전 패턴을 다룸
UI를 컴포넌트 단위로 쪼개어 재사용 가능한 구조 연습
자주 묻는 질문 (FAQ)
A. 본 강의는 리액트 입문자를 대상으로 제작된 강의이므로 처음 배우시는 분들께 추천드립니다.
A. 실습 위주로 리액트 기본 개념을 익힐 수 있도록 구성되어 있습ㄴ디ㅏ.
A. 약간의 커스터마이징만 더하면 충분히 포트폴리오용으로 활용 가능합니다.
강사
파울러 디숀
안드로이드, 자바, 플러터 개발자이자 강사이다. IT 분야에서 사람들을 가르치는 것에 열정을 가지고 있습니다. 175개 이상의 국가에서 80,000명 이상의 학생들을 가르쳐 온 그는 프로그래밍과 개발 분야의 지식과 전문성을 전파하는 데 헌신해 왔습니다.
Whitworth University에서 컴퓨터 공학 학위를 취득한 했으며, 교육과 더불어 프로그래밍을 즐깁니다. 그는 모바일 앱과 웹 개발 분야에서 풍부한 경험을 보유하고 있으며, 학생들이 전문 개발자가 되는 데 필요한 기술을 제공하는 플랫폼인 "Build Apps with Paulo"를 설립했습니다.
학생들이 뛰어난 애플리케이션과 소프트웨어를 만들 수 있도록 가르치고 안내하는 것은 그에게 매우 보람 있는 여정이었습니다. 10년 넘게 온라인으로 강의해 온 그는 학습자들의 현재 경험 수준과 관계없이 숙련된 개발자가 될 수 있도록 돕는다는 사명감으로 활동하고 있습니다.
커리큘럼
1-1차시 강의 소개 및 사전 요구 사항
02
1-2차시 간단한 리액트 앱 빠르게 만들기
03
1-3차시 랜덤 강아지 앱 완성하기
04
2-1차시 웹 앱 구축의 구식 vs 신식 이해하기 - SPA
05
2-2차시 바닐라 JS의 해결책으로서 리액트 사용의 동기
06
2-3차시 리액트란 무엇인가 - 작동 원리
07
2-4차시 개발 환경 설정 - VS Code, 크롬 브라우저 및 Node.js 설치
08
2-5차시 중요한 확장 프로그램 설치 - VS Code
09
2-6차시 Vite로 리액트 프로젝트 생성 및 실행 - 전체 개요
10
2-7차시 리액트 프로젝트 파일 및 폴더 탐색
11
2-8차시 리액트에서 첫 번째 컴포넌트 만들기
12
2-9차시 JSX와 리액트의 DOM 처리 방식 - 개요
13
2-10차시 Babel.js - JSX를 자바스크립트로 컴파일하기
14
2-11차시 app, main, index - 주요 파일 이해하기
15
2-12차시 JSX 코드 내에서 자바스크립트 작성하기 - Book 컴포넌트
16
2-13차시 Props 소개 - Book 컴포넌트를 Props 사용으로 리팩토링
17
2-14차시 책 배열 추가 및 배열에서 데이터 가져오기 - 수동으로
18
2-15차시 map 함수를 사용하여 책 목록을 반복하고 표시하기
19
2-16차시 리액트 Key Prop 이해하기
20
2-17차시 Props와 단방향 데이터 흐름 - 개요
21
2-18차시 Props 비구조화
22
2-19차시 섹션 요약 - 리액트 기초 및 소개
23
2-20차시 사용자 프로필 카드 챌린지 및 해결책
24
3-1차시 리액트의 상태 관리, 폼 및 상호작용 소개
25
3-2차시 프로젝트 구조 변경 - 컴포넌트 폴더 생성 및 Book과 UserProfile 컴포넌트를 별도 파일로 추가
26
3-3차시 다른 데이터 파일에서 책 데이터 가져오기
27
3-4차시 리액트의 상태 소개 - 상태 변경의 잘못된 방법
28
3-5차시 상태 관리 문제 해결을 위한 리액트 Hook useState 사용
29
3-6차시 리액트에서 상태 작동 방식 개요
30
3-7차시 랜덤 인용구 앱 - 설정
31
3-8차시 랜덤 인용구 앱 - 철저한 설정 - 최종 제품
32
3-9차시 리액트에서 상태 작동 방식 - 복습
33
3-10차시 컴포넌트 스타일링 - 프로젝트 내 CSS 파일 개요
34
3-11차시 Bootstrap 설치 및 인용구 앱에서 사용하기
35
3-12차시 또 다른 상태 추가 - 랜덤 색상
36
3-13차시 상태 끌어올리기 - 리액트 패턴 개요
37
3-14차시 상태 끌어올리기 - 실습 - 랜덤 인용구
38
3-15차시 상태 끌어올리기 - 실습 - 간단한 카운터
39
4-1차시 폼
40
4-2차시 간단한 폼 및 입력 설정
41
4-3차시 폼 및 preventDefault 메서드
42
4-4차시 폼 - 제어된 요소
43
4-5차시 폼 입력 데이터를 상태 목록에 추가하고 페이지에 목록 항목 표시
44
4-6차시 다중 입력 폼 설정 - 실습
45
4-7차시 다중 폼 입력 데이터 및 handleChange 이벤트 핸들러 설정
46
4-8차시 제출 처리 - 간단한 유효성 검사 추가 및 개인 데이터가 포함된 카드 표시
47
4-9차시 실습: 우리가 만들 앱 - 장바구니 앱 - 데모
48
4-10차시 실습 - 장바구니 컴포넌트 - 가짜 데이터 추가 및 목록 표시
49
4-11차시 푸터 및 내비게이션 컴포넌트 생성
50
4-12차시 장바구니 항목 스타일링
51
4-13차시 장바구니 폼 추가
52
4-14차시 폼 초기화 문제 수정
53
4-15차시 Bootstrap 아이콘 추가
54
4-16차시 toggleBought를 Prop으로 전달하기 - 1부
55
4-17차시 토글 구현 - 콘솔에서 테스트 - 작동함
56
4-18차시 클릭 시 원 색상 및 항목 텍스트 변경 - 취소선
57
4-19차시 항목 제거를 위한 handleRemoveItem Prop 및 함수 추가
58
4-20차시 푸터 컴포넌트에 통계 추가
59
4-21차시 폼 - 섹션 요약
60
5-1차시 백엔드 연결 - 부작용, 훅 및 useEffect 이해하기 - 개요
61
5-2차시 서버에서 데이터를 잘못 가져오기
62
5-3차시 useEffect 훅을 사용하여 백엔드에서 데이터를 올바르게 가져오기
63
5-4차시 로딩 상태 설정
64
5-5차시 의존성 배열 사용 및 부작용을 제어하는 값 추가 - 실습
65
6-1차시 리액트의 폼 소개 - 개요
66
6-2차시 내비게이션 바 컴포넌트 설정
67
6-3차시 푸터 컴포넌트 생성
68
6-4차시 API에서 책 가져오기
69
6-5차시 URL 검색 쿼리 설정
70
6-6차시 검색 바 및 Props 설정
71
6-7차시 검색어가 올바르게 업데이트되는지 확인하기 - 디버깅
72
6-8차시 화면에 책 표시하기
73
6-9차시 로딩 상태 추가
74
6-10차시 검색 폼 초기화
75
6-11차시 api-client 파일 설정 및 fetchBooks 구현
76
6-12차시 커스텀 훅 및 커스텀 훅 만들기 - useBooks
77
6-13차시 AbortController 인터페이스 추가
78
6-14차시 책 상세 컴포넌트 - 1부
79
6-15차시 &&를 사용한 조건부 렌더링 - 선택된 책 테스트
80
6-16차시 모달에서 책 세부정보 표시 - 작동 중
81
6-17차시 누락된 책 API 필드 처리
82
7-1차시 Vercel 구축 및 설정 및 앱 배포
83
7-2차시 GitHub 레포지토리 연결 및 배포 자동화
84
7-3차시 책장 앱 및 섹션 요약
85
8-1차시 강의 마무리
수강 후기
첫번째 리뷰어가 되어주세요.
소중한 후기가 다른 분들께 도움이 될 거에요.
정가
146,000원
판매가
29,200원
총 결제 금액
80%
29,200원
146,000원
80%
29,200원