25%
57,750원
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
리액트(React)는 실무에서 가장 많이 찾는 인기 프론트엔드 기술입니다. 리액트를 이용해 애플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.
✍️
이런 걸
배워요!
이런 걸
배워요!
리액트 컴포넌트 (React Component) 설계 기법
리액트 고급 주제와 활용
리액트 훅 (React Hook)
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
리액트 사용법뿐만 아니라 구조와 원리를 배우고 싶은 분
서드파티 라이브러리(라우터, 폼, 모달)를 배우고 싶은 분
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
리액트 1부 강의에 해당하는 수준의 이해
안녕하세요
김정환 입니다.
김정환 입니다.
👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.
수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.
커리큘럼
총 167 개
˙ 19시간 47분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 1편. 리액트로 사고하기
42 강
∙ 4시간 22분
[1.1장 준비] 1.1.1 1부 수업 요약
미리보기
06:11
[1.1장 준비] 1.1.2 2부에서 다룰 내용
미리보기
03:46
[1.1장 준비] 1.1.3 결과물 미리보기
미리보기
10:36
[1.1장 준비] 1.1.4 실습환경 구성
미리보기
14:53
[1.1장 준비] 중간 정리
미리보기
02:15
[1.2장 상품목록 화면] 1.2.1 단일 컴포넌트 App
미리보기
09:53
[1.2장 상품목록 화면] 1.2.2 리액트로 생각하기
미리보기
07:34
[1.2장 상품목록 화면] 1.2.3 Button
미리보기
14:53
[1.2장 상품목록 화면] 1.2.4 ProductItem
미리보기
08:22
[1.2장 상품목록 화면] 1.2.5 Title(실습)
미리보기
01:29
[1.2장 상품목록 화면] 1.2.6 Title(풀이)
미리보기
03:30
[1.2장 상품목록 화면] 1.2.7 Navbar(실습)
미리보기
01:17
[1.2장 상품목록 화면] 1.2.8 Navbar(풀이)
미리보기
04:03
[1.2장 상품목록 화면] 1.2.9 Page
미리보기
06:09
[1.2장 상품목록 화면] 1.2.10 ProductPage
미리보기
04:28
[1.2장 상품목록 화면] 1.2.11 상태정의
미리보기
11:00
[1.2장 상품목록 화면] 1.2.12 중간 정리
미리보기
03:38
[1.3장 주문 내역 화면] 1.3.1 컴포넌트 계층 구조 나누기
미리보기
04:25
[1.3장 주문 내역 화면] 1.3.2 OrderPage
미리보기
03:15
[1.3장 주문 내역 화면] 1.3.3 Card
미리보기
07:17
[1.3장 주문 내역 화면] 1.3.4 Card 조합(실습)
미리보기
02:15
[1.3장 주문 내역 화면] 1.3.5 Card 조합(풀이)
미리보기
12:52
[1.3장 주문 내역 화면] 1.3.6 상태 정의
미리보기
08:30
[1.3장 주문 내역 화면] 1.3.7 중간 정리
미리보기
02:39
[1.4장 장바구니 화면] 1.4.1 컴포넌트 계층 구조 나누기
미리보기
04:04
[1.4장 장바구니 화면] 1.4.2 CartPage
미리보기
06:17
[1.4장 장바구니 화면] 1.4.3 Title 다시보기(실습)
미리보기
01:12
[1.4장 장바구니 화면] 1.4.4 Title 다시보기(풀이)
미리보기
05:49
[1.4장 장바구니 화면] 1.4.5 ProductItem 다시보기(실습)
미리보기
01:55
[1.4장 장바구니 화면] 1.4.6 ProductItem 다시보기(풀이)
미리보기
05:02
[1.4장 장바구니 화면] 1.4.7 FormControl
미리보기
09:56
[1.4장 장바구니 화면] 1.4.8 OrderForm, 비제어 컴포넌트
미리보기
16:07
[1.4장 장바구니 화면] 1.4.9 레프와 돔
미리보기
14:05
[1.4장 장바구니 화면] 1.4.10 OrderForm, 레프(실습)
미리보기
01:49
[1.4장 장바구니 화면] 1.4.11 OrderForm, 레프(풀이)
미리보기
11:39
[1.4장 장바구니 화면] 1.4.12 PaymentButton(실습)
미리보기
00:53
[1.4장 장바구니 화면] 1.4.13 PaymentButton(풀이)
미리보기
02:51
[1.4장 장바구니 화면] 1.4.14 상태 정의(실습)
미리보기
03:01
[1.4장 장바구니 화면] 1.4.15 상태 정의(풀이)
미리보기
05:25
[1.4장 장바구니 화면] 1.4.16 역방향 데이터 흐름 추가하기
미리보기
07:30
[1.4장 장바구니 화면] 1.4.17 중간 정리
미리보기
03:29
1편 최종 정리
미리보기
06:16
섹션 1. 2편. 고급 주제
44 강
∙ 5시간 3분
[2.1장 컨택스트] 2.1.1 한계
미리보기
05:21
[2.1장 컨택스트] 2.1.2 이벤트 에미터
미리보기
10:12
[2.1장 컨택스트] 2.1.3 컨택스트
미리보기
14:57
[2.1장 컨택스트] 2.1.4 공급자와 소비자
미리보기
13:04
[2.1장 컨택스트] 2.1.5 활용
미리보기
07:40
[2.1장 컨택스트] 2.1.6 중간 정리
미리보기
03:23
[2.2장 라우터 1] 2.2.1 배경
06:46
[2.2장 라우터 1] 2.2.2 경로에 따라 컴포넌트 렌더링
09:21
[2.2장 라우터 1] 2.2.3 Link
07:02
[2.2장 라우터 1] 2.2.4 Router
14:49
[2.2장 라우터 1] 2.2.5 Routes
04:31
[2.2장 라우터 1] 2.2.6 Route(실습)
04:57
[2.2장 라우터 1] 2.2.7 Route(풀이)
11:52
[2.2장 라우터 1] 2.2.8 중간 정리
04:40
[2.3장 라우터 2] 2.3.1 주소창 주소 변경하기
07:21
[2.3장 라우터 2] 2.3.2 뒤/앞으로 가기(실습)
05:34
[2.3장 라우터 2] 2.3.3 뒤/앞으로 가기(풀이)
06:54
[2.3장 라우터 2] 2.3.4 프로그래밍적으로 주소변경(실습)
02:52
[2.3장 라우터 2] 2.3.5 프로그래밍적으로 주소변경(풀이)
03:05
[2.3장 라우터 2] 2.3.6 고차 컴포넌트
15:52
[2.3장 라우터 2] 2.3.7 withRouter와 navigate
11:50
[2.3장 라우터 2] 2.3.8 match(실습)
01:43
[2.3장 라우터 2] 2.3.9 match(풀이)
03:12
[2.3장 라우터 2] 2.3.10 params(실습)
04:36
[2.3장 라우터 2] 2.3.11 params(풀이)
07:30
[2.3장 라우터 2] 2.3.12 중간 정리
04:23
[2.4장 다이얼로그 1] 2.4.1 Dialog
06:22
[2.4장 다이얼로그 1] 2.4.2 레이아웃 컨택스트
10:59
[2.4장 다이얼로그 1] 2.4.3 프로그래밍적으로 다이얼로그 제어
04:49
[2.4장 다이얼로그 1] 2.4.4 withLayout(실습)
01:55
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이)
07:29
[2.4장 다이얼로그 1] 2.4.6 다이얼로그 조합(실습)
07:49
[2.4장 다이얼로그 1] 2.4.7 다이얼로그 조합(풀이)
06:34
[2.4장 다이얼로그 1] 2.4.8 중간 정리
02:35
[2.5장 다이얼로그 2] 2.5.1 Dialog 문제
03:12
[2.5장 다이얼로그 2] 2.5.2 리액트 포탈
12:53
[2.5장 다이얼로그 2] 2.5.3 Dialog 문제 해결
04:24
[2.5장 다이얼로그 2] 2.5.4 ErrorDialog, alert
08:17
[2.5장 다이얼로그 2] 2.5.5 PaymentSuccessDialog, confirm(실습)
02:41
[2.5장 다이얼로그 2] 2.5.6 PaymentSuccessDialog, confirm(풀이)
10:27
[2.5장 다이얼로그 2] 2.5.7 Dialog 개선, 레프(실습)
02:16
[2.5장 다이얼로그 2] 2.5.8 Dialog 개선, 레프(풀이)
06:34
[2.5장 다이얼로그 2] 2.5.9 중간 정리
02:55
2편 최종 정리
08:19
섹션 2. 3편 기본 훅
46 강
∙ 5시간 35분
[3.1장 클래스/함수 컴포넌트] 3.1.1 새로운 프로젝트
07:20
[3.1장 클래스/함수 컴포넌트] 3.1.2 클래스와 함수
10:43
[3.1장 클래스/함수 컴포넌트] 3.1.3 리액트 컴포넌트
16:27
[3.1장 클래스/함수 컴포넌트] 3.1.4 비교
08:09
[3.1장 클래스/함수 컴포넌트] 3.1.5 리액트 훅
03:38
[3.2장 상태 훅] 3.2.1 문제 제기
06:07
[3.2장 상태 훅] 3.2.2 1차 구현
13:51
[3.2장 상태 훅] 3.2.3 다중 상태 관리
04:30
[3.2장 상태 훅] 3.2.4 2차 구현
05:45
[3.2장 상태 훅] 3.2.5 더 단순하게
06:56
[3.2장 상태 훅] 3.2.6 역할
04:10
[3.2장 상태 훅] 3.2.7 중간 정리
02:58
[3.3장 부수효과 훅] 3.3.1 순수함수와 컴포넌트
05:40
[3.3장 부수효과 훅] 3.3.2 지연 실행
12:10
[3.3장 부수효과 훅] 3.3.3 의존성
08:48
[3.3장 부수효과 훅] 3.3.4 다중 부수 효과
09:55
[3.3장 부수효과 훅] 3.3.5 다중 의존성
05:19
[3.3장 부수효과 훅] 3.3.6 한 번만 실행하는 부수 효과
05:07
[3.3장 부수효과 훅] 3.3.7 부수 효과 정리하기
11:44
[3.3장 부수효과 훅] 3.3.8 역할
05:20
[3.3장 부수효과 훅] 3.3.9 중간 정리
03:46
[3.4장 훅 활용 1] 3.4.1 메뉴 목록 화면
16:55
[3.4장 훅 활용 1] 3.4.2 장바구니 화면(실습)
02:06
[3.4장 훅 활용 1] 3.4.3 장바구니 화면(풀이)
15:13
[3.4장 훅 활용 1] 3.4.4 주문 내역 화면(실습)
01:31
[3.4장 훅 활용 1] 3.4.5 주문 내역 화면(풀이)
05:58
[3.4장 훅 활용 1] 3.4.6 달라진 점
06:33
[3.4장 훅 활용 1] 3.4.7 중간정리
03:11
[3.5장 컨택스트 훅] 3.5.1 고차 컴포넌트와 훅
07:17
[3.5장 컨택스트 훅] 3.5.2 useContenxt
19:29
[3.5장 컨택스트 훅] 3.5.3 역할
03:19
[3.5장 컨택스트 훅] 3.5.4 중간 정리
03:05
[3.6장 훅 활용 2] 3.6.1 Myrouter: Router
13:19
[3.6장 훅 활용 2] 3.6.2 MyRouter: Routes, Route, Link
04:43
[3.6장 훅 활용 2] 3.6.3 MyRouter 커스텀 훅
06:36
[3.6장 훅 활용 2] 3.6.4 MyRouter 활용(실습)
02:40
[3.6장 훅 활용 2] 3.6.5 MyRouter 활용(풀이)
12:51
[3.6장 훅 활용 2] 3.6.6 MyLayout: Layout(실습)
03:05
[3.6장 훅 활용 2] 3.6.7 MyLayout: Layout(풀이)
03:50
[3.6장 훅 활용 2] 3.6.8 MyLayout: 커스텀 훅(실습)
02:10
[3.6장 훅 활용 2] 3.6.9 MyLayout: 커스텀 훅(풀이)
09:14
[3.6장 훅 활용 2] 3.6.10 MyLayout 활용(실습)
01:45
[3.6장 훅 활용 2] 3.6.11 MyLayout 활용(풀이)
14:17
[3.6장 훅 활용 2] 3.6.12 달라진 점
05:05
[3.6장 훅 활용 2] 3.6.13 중간 정리
03:49
3편 최종 정리
08:53
섹션 3. 4편 추가 훅
35 강
∙ 4시간 45분
[4.1장 레프 훅] 4.1.1 useRef
15:50
[4.1장 레프 훅] 4.1.2 useRef 활용(실습)
04:10
[4.1장 레프 훅] 4.1.3 useRef 활용(풀이)
07:51
[4.1장 레프 훅] 4.1.4 역할
03:10
[4.1장 레프 훅] 4.1.5 중간 정리
01:34
[4.2장 레프 훅] 4.2.1 로그인 폼 예제
10:48
[4.2장 레프 훅] 4.2.2 필드 검사
06:38
[4.2장 레프 훅] 4.2.3 오류 메세지
10:01
[4.2장 레프 훅] 4.2.4 커스텀 훅 useForm
12:20
[4.2장 레프 훅] 4.2.5 getFieldProps
03:13
[4.2장 레프 훅] 4.2.6 리액트 컨택스트 Form, Field, ErrorMessage
15:31
[4.2장 레프 훅] 4.2.7 활용 OrderForm(실습)
02:27
[4.2장 레프 훅] 4.2.8 활용 OrderForm(풀이)
16:12
[4.2장 레프 훅] 4.2.9 중간 정리
03:48
[4.3장 리듀서 훅] 4.3.1 회원가입 폼 예제
17:09
[4.3장 리듀서 훅] 4.3.2 스토어
16:07
[4.3장 리듀서 훅] 4.3.3 useReducer
09:09
[4.3장 리듀서 훅] 4.3.4 컴포넌트에서 사용
10:05
[4.3장 리듀서 훅] 4.3.5 useState 다시보기
03:06
[4.3장 리듀서 훅] 4.3.6 활용 MyForm(실습)
01:47
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이)
15:11
[4.3장 리듀서 훅] 4.3.8 역할
02:58
[4.3장 리듀서 훅] 4.3.9 중간 정리
03:17
[4.4장 메모이제이션 훅] 4.4.1 메모이제이션
11:40
[4.4장 메모이제이션 훅] 4.4.2 useMemo
19:06
[4.4장 메모이제이션 훅] 4.4.3 memo
12:11
[4.4장 메모이제이션 훅] 4.4.4 useCallback
06:43
[4.4장 메모이제이션 훅] 4.4.5 균형
04:37
[4.4장 메모이제이션 훅] 4.4.6 활용 OrderStatusCard(실습)
11:14
[4.4장 메모이제이션 훅] 4.4.7 활용 OrderStatusCard(풀이)
07:36
[4.4장 메모이제이션 훅] 4.4.8 활용 MyRouter params(실습)
02:20
[4.4장 메모이제이션 훅] 4.4.9 활용 MyRouter params(풀이)
03:45
[4.4장 메모이제이션 훅] 4.4.10 역할
02:13
[4.4장 메모이제이션 훅] 4.4.11 중간 정리
01:39
4편 최종 정리
10:19
강의 게시일 : 2023년 10월 17일
(마지막 업데이트일 : 2023년 10월 26일)
수강평
총 10개
수강생분들이 직접 작성하신 수강평입니다.
5
10개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순