77,000원
월 15,400원
5개월 할부 시
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
리액트(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일)
수강평
총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
연말에 리액트 1부를 보고 연초에 리액트 2부를 연달아 수강했습니다. 먼저 보고 사고하고 만들고 미리 모듈을 만들어보면서 이해하기 쉽게 설명해 주시는 부분이 좋은 거 같습니다. 좋은 강의 제공해 주셔서 감사합니다.
2024-01-22
잘 준비된 강의 입니다.
단순히 리액트 훅의 사용법이 아니라 내부 구현도 유사하게 따라하면서 좀 더 깊이 이해하는 과정이 존재합니다.
p.s) 항상 질문에 답해주셔서 감사합니다.
2024-03-28
1부를 너무 만족스럽게 수강했던 기억이 있어서 이번 강의도 고민없이 바로 결제했습니다!!
결론은 역시나 만족스럽네요! 무엇보다 강사님이 저만 느낄진 모르겠지만 귀여우십니다 ㅋㅋㅋㅋㅋ 깨알같이 장비 자랑을 하시는 모습과 중간중간 의도치 않은 에러를 마주했을 때 하시는 어허~ 같은 추임새들에 딱딱하게 강의를 보는 중간에 리프레시가 되네요!!
앞으로도 좋은 강의 많이 부탁드리겠습니다. 감사합니다~
2023-11-12
내용이 정말 깔끔하고 깊습니다.
2023-11-05
2024-04-12
