BEST

개발 · 프로그래밍

프론트엔드

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

Name: [리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Price: 55000 KRW

리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

(4.8) 수강평 107개

수강생 1,949명

김정환

React MVC

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

웹 어플리케이션 개발 실습을 통해 React.js의 핵심 개념 이해
순수 JS 개발과 리액트 개발의 비교
실습을 통한 디자인 패턴 적용의 이점

프론트 실무 최고 인기 리액트(React),
강의 하나로 확실하게 잡아보세요! 🚩

혹시, 이런 고민 중이시라면 주목!💡

Case 1
리액트가 가장 인기라는데, 어디서부터 시작할지 모르겠어요!

"프론트엔드 채용 시장에서 가장 인기가 많은 도구인 리액트,
하지만 막상 시작하려니 어디서부터 어떻게 해야 할 지 감이 오지 않습니다."

Case 2
나의 리액트 개발 프로세스에 대한 확신이 없어요.

"리액트를 활용해 어찌저찌하여 개발을 했지만,
이 방법이 과연 효율적인지 감이 오지 않습니다.

리액트 기초부터 실전까지, 확실히 알려드려요 🎯

어 저 이야기. 내 이야기 같다구요? 그러면 이 강의와 함께 하셔야겠네요!
이 강의의 목표는 다음과 같아요.

결과물을 JS와 리액트 버전으로 만들며 리액트의 역할과 장점을 한눈에 깨달을 수 있어요.
실습 어플리케이션 코딩과 12번의 과제를 통해 이론을 몸과 머리로 익힐 수 있어요.

이런 분들이 들으면 좋아요! 🧑‍🎓

리액트 공식 문서를 읽어 보았지면 여전히 어디서부터 시작해야할지 막막한 난감 유형
이론보다는 헬로월드로 시작하는 것을 선호하는 실행가 유형
리액트를 써보긴 했는데 도대체 어떤 점이 좋은지 꼭 짚어 설명하기 어려운 알쏭달쏭 유형

제 강의만의 특징 😎

React.js의 특징을 명확히 이해할 수 있어요!
- 순수 자바스크립트와 리액트 개발을 비교하면서 리액트의 특징을 더욱 확실하게 이해해보세요.
리액트 공식 문서를 바탕으로 한 밀도 있는 수업!
- 리액트 공식 문서가 말하는 주요 개념을 바탕으로 구성된 "리액트 핵심 수업"이에요.
철저한 실습 위주의 강의에요!
- 쇼핑몰 검색 화면을 직접 코딩하면서 만들고 12가지 실습 과제를 풀면서 몸으로 익힐 수 있어요.
각 영상마다 Git Branch를 준비했어요.
- 실습 중 따라오기 어렵거나 실습 없이 수업하시는 분들을 위해 영상마다 깃 브랜치를 준비했어요.
- 매 영상마다 사용한 코드를 브랜치 이동으로 간편하게 볼 수 있어요.

복습 후 바로 볼 수 있는 강의노트 제공!
- 수업에서 사용한 강의 노트는 전부 블로그에서 얻을 수 있어요. (링크: 🖋김정환 블로그)
- 수업 전에 전체 글을 가볍게 읽고 시작하면 좋아요. 예습👍
- 수업 후에도 읽으면 더 좋아요. 복습👍👍

이런 내용을 배워요 📖

준비편
- 디자인과 요구사항 분석 문서를 보면서 수업에서 만들 결과물의 미리 소개해요.
- 순수 자바스크립트와 MVC 디자인 패턴으로 결과물을 만들며 UI 라이브러리의 필요성을 깨달아요.
소개편
- 리액트의 리액티브와 가상돔 개념을 소개하고 리액트를 사용하는 이유에 대해 알 수 있어요.
- 리액트 개발에 사용되는 몇 가지 도구의 역할과 사용법을 익히고 실습을 준비해요.
사용편 1
- 리액트를 이용해 결과물을 다시 처음부터 구현하면서 리액트의 기본 개념을 익힐 수 있어요.
- State, 이벤트 처리, 조건부 렌더링, 폼, 리스트와 키 등 리액트 핵심 원리를 이해할 수 있어요.
사용편 2 (컴포넌트)
- 리액트 컴포넌트를 소개하고 이전 편에서 만든 결과물을 리액트 컴포넌트로 개선해요.
- 클래스/함수 컴포넌트, State 끌어 올리기, 상속, 조합 등 컴포넌트를 다루면서 마주치는 이슈를 배울 수 있어요.

기본화면

검색 결과 화면

최근 검색어 화면

다음 강의

[리액트 2부] 고급 주제와 훅

저를 소개합니다 🧑‍🏫

김정환

웹 기술을 학습하고 정리하는 걸 좋아하는 실무 개발자
웹 기술 및 개발자로서의 생각을 담은 기술 블로그를 운영하고 있어요.

링크: 🖋 김 정환 블로그

학습한 기술과 실무에서 배운 노하우를 모아 발표나 강의 형식으로 공유하는 활동도 하고 있어요.

링크: 🎥 인프런
링크: 🎥 유튜브

우아한형제들에서 프론트엔드 개발자로 일하고 있어요.

링크: 🖋 우아한형제들 기술블로그

리액트 기술과 관련된 컨텐츠도 작성했어요.

링크: 🖋 리액트 관련 블로그 글
링크: 🎥 리액트 관련 유튜브 영상

수강생 분들을 위한 Q&A 🙋

Q. 비전공자도 들을 수 있는 강의인가요?

아니요. 웹개발에 대한 경험이 조금은 있어야 수강할 수 있습니다.

Q. 왜 리액트를 배워야 하나요?

최근 채용 시장에서는 모던 웹 프레임워크 지식을 가진 개발자를 찾고 있습니다.

가장 인기있는 리액트 기술 역량을 갖춘다면 많은 회사에서 찾는 인재가 될 수 있을 거예요.

Q. 리액트를 배우면 뭐가 좋은가요?

유저 인터페이스 개발에 대한 공통 문제를 리액트가 상당 부분 해결해 주는데요.

개발자는 조금 더 비즈니스 로직 개발에 집중할 수 있고 빠르게 제품을 만들어 낼 수 있는 힘을 얻을 수 있어요.

Q. 강의를 듣기 전, 준비해야 할 것이 있나요?

한 번이라도 웹 개발에 대한 경험이 있어야 수업을 듣는 의미가 있어요.

HTML, JavaScript 문법을 숙지하고 있다는 전제하에 수업을 진행하기 때문이죠.

아직 웹 기초가 부족하신 분들은 먼저 학습하신 다음에 수강해 주실 것을 추천드려요.

Q. 수업 내용을 어느 수준까지 다루나요?

리액트 공식 문서의 주요 개념과 고급 안내서 일부를 바탕으로 준비한 내용이에요.

리액트에서 핵심이라고 할만한 부분을 다루고 있습니다.

Q. 수강 관련 참고 사항이 있나요?

수업에서 사용할 도구는 4가지예요: Node.js, 개발 에디터, 웹 브라우저, Git.

미리보기 수업에서도 확인할 수 있어요. (링크: 🎥 수업 미리보기)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트 공식 문서를 읽어 보았지면 여전히 어디서부터 시작해야할지 막막하신 분들
이론보다는 "Hello world" 로 시작하는 것을 선호하시는 분들
리액트를 써보긴 했는데 도대체 어떤 점이 좋은지 꼭 짚어 설명하기 어려운 분들

선수 지식,
필요할까요?

웹 개발에 대한 기초 지식이 있어야 수강할 수 있어요.
한 번이라도 웹 개발을 해보신 분이라면 수강할 수 있어요

안녕하세요
김정환입니다.

13,516

명

수강생

837

개

수강평

583

개

답변

4.8

점

강의 평점

개

강의

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

커리큘럼

전체

96개 ∙ (8시간 44분)

해당 강의에서 제공:

수업자료

섹션 1. 준비편

4개 ∙ (15분)

섹션 2. 준비편 - 순수JS

25개 ∙ (2시간 40분)

5. [순수JS 1] MVC 패턴
05:11
6. [순수JS 1] 폴더 구조
16:43
7. [순수JS 1] 검색폼 1
09:10
8. [순수JS 1] 검색폼 2
06:32
9. [순수JS 1] 검색폼 3
08:40
10. [순수JS 1] 검색폼 4(실습)
02:58
11. [순수JS 1] 검색폼 4(풀이)
05:09
12. [순수JS 1] 검색결과 1
15:22
13. [순수JS 1] 검색결과 2(실습)
02:03
14. [순수JS 1] 검색결과 2(풀이)
03:39
15. [순수JS 1] ⭐중간정리
02:45
16. [순수JS 2] 탭 1
11:11
17. [순수JS 2] 탭 2
06:07
18. [순수JS 2] 탭 3(실습)
02:16
19. [순수JS 2] 탭 3(풀이)
05:35
20. [순수JS 2] 추천 검색어 1
11:52
21. [순수JS 2] 추천 검색어 2
05:35
22. [순수JS 2] 추천 검색어 3(실습)
01:57
23. [순수JS 2] 추천 검색어 3(풀이)
03:35
24. [순수JS 2] 최근 검색어 1
14:42
25. [순수JS 2] 최근 검색어 2
09:07
26. [순수JS 2] 최근 검색어 3(실습)
01:31
27. [순수JS 2] 최근 검색어 3(풀이)
05:09
28. [순수JS 2] ⭐중간정리
01:47
29. 🌟최종 정리
01:33

섹션 3. 소개편

14개 ∙ (53분)

30. [React 소개] 데이터를 화면에 출력하는 방법
04:25
31. [React 소개] 리액티브
06:38
32. [React 소개] 가상돔
05:56
33. [React 소개] ⭐️중간정리
02:25
34. [헬로월드] Hello world
03:04
35. [헬로월드] React
05:48
36. [헬로월드] ReactDOM
02:56
37. [헬로월드] Babel
03:20
38. [React 시작하기] 템플릿 언어
03:50
39. [React 시작하기] JSX
03:43
40. [React 시작하기] ⭐중간정리
02:01
41. [실습에 맞게 개선하기] 시작점
04:30
42. [실습에 맞게 개선하기] 헤더 구현
03:37
43. 🌟최종 정리
01:28

섹션 4. 사용편 1 - 리액트

28개 ∙ (2시간 18분)

섹션 5. 사용편 2 - 컴포넌트

25개 ∙ (2시간 35분)

강의 게시일: 2021. 05. 03.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

107개

4.8

107개의 수강평

짱구
수강평 9
∙
평균 평점 4.8
2022. 02. 24.
4
100% 수강 후 작성
- 장점!!! 1. 강의에서 React 공식 문서의 "주요 개념"에서 다루는 모든 내용들을 다룬다. 단순히, 공식문서로 학습하는 것보다 만들면서 학습하다보니, 각 개념들의 필요성들에 대해서 깊게 이해할 수있었다. 2. 공식문서에는 중요성이 떨어진다고 판단했던지 크게 언급하지 않고 넘어가는 내용들까지 사용해보면서 왜 이런 방식이 덜 권장되는지에 대해서도 알 수있었다. 3. 단순히, 리엑트라는 개념을 넘어서 추상화의 필요성에 대해서도 학습할 수 있었다. - 단점은 아니고.. 강의 중 어려웠던 점!!! 1. MVC 패턴과 추상화 대한 이해도가 약한 필자는 바닐라 JS 파트 처음 들을 때, 코드 보고 심한 현타가 왔다. => 내 수준에서는 코드가 너무 어려웠다 ㅠ.ㅠ 하지만, 꾸역꾸역 참아가면서, 종이로 로직을 써가면서 코드를 내 것으로 만들어가면, 점점 성장해가는 자신의 모습을 발견할 수 있다. 만약, 필자와 같은 어려움을 겪는 수강생이라면, 리엑트 편을 먼저 보고, 바닐라 JS 편을 접근해본다면, 더 쉽게 코드가 이해될 수 있다. 적어도 필자는 그랬다. - 총평!!! 솔직히, 리엑트를 사용하기는 했지만, 내 실력은 거품 위에 떠있는 것같이 깊이가 없었는데, 이 강의를 통해서, 리엑트를 더 깊게 이해할 수있었다. 리엑트를 시작하는 모든 사람들에게 추천한다.
- 김정환
  지식공유자
  2022. 03. 05.
  저도 수업준비하면서 초반부가 어려우실것 같다는 우려를 했는데요. 어려운게 맞습니다 ㅜㅜ 그래도 끝까지 들어주셔서 고맙습니다.
arcturus
수강평 8
∙
평균 평점 5.0
2021. 06. 02.
5
100% 수강 후 작성
이미 react 프로젝트에 참여한 개발 경험이 있는데, 조금 시간이 지나기도 했고, 다시 한번 강의를 들으면서 기초 공부를 하는데에 많은 도움이 되었습니다. 감사합니다.
백엔드개발자
수강평 36
∙
평균 평점 5.0
2024. 02. 18.
5
100% 수강 후 작성
추천합니다. 리액트 개념에 대해서 종합적으로 다루는 강의입니다. 리액트 훅까지는 많이 다루지 않습니다. 리액트 훅은 2부에서 다루니 참고하시길 바랍니다.
- 김정환
  지식공유자
  2024. 02. 18.
  백엔드개발님 피드백 남겨 주셔서 고맙습니다. 좋은 하루 보내세요.
Go9
수강평 3
∙
평균 평점 5.0
2021. 06. 01.
5
100% 수강 후 작성
리액트를 처음 공부하며 어떻게 시작해야 할지 어려움이 있었는데, 간결하게 강의를 구성해주신 덕분에 많은 도움을 받고 있습니다. 한 강의 당, 그리고 전체 강의 구성이 길지 않은 덕에 여러 번 반복해서 볼 수 있을 것 같다는 점도 장점입니다 :) 한편, 바닐라 자바스크립트도 다뤄주심으로 리액트가 어떤 문제점을 해결하기 위해 나타난 프레임워크인지 파악하기에 수월했습니다. 하지만 아직 둘 다 어려운 건 마찬가지네요.. ㅎ_ㅎ 이후로도 여러 번 보고 구현해가며 프론트엔드 개발 기초를 잘 다지도록 해야겠습니다. 좋은 강의 감사합니다.
김경한
수강평 2
∙
평균 평점 5.0
2022. 03. 07.
5
100% 수강 후 작성
좋은 강의지만.. 좀 어렵습니다.. 역시 반복해야겠지요.. 화이팅!
- 김정환
  지식공유자
  2022. 03. 09.
  감사합니다.

김정환님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

웹 개발의 핵심, HTTP 완벽 마스터하기!

김정환

HTTP 기본부터 데이터 요청, 실시간 통신, 보안과 성능 최적화까지! 웹 개발자가 꼭 알아야 할 HTTP의 모든 것을 깊이 있게 배워보세요.

초급

https, cookie, Ajax

[리액트 2부] 고급 주제와 훅

김정환

리액트(React)는 실무에서 가장 많이 찾는 인기 프론트엔드 기술입니다. 리액트를 이용해 애플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

중급이상

React, React Context, react-component

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

김정환

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.

중급이상

Node.js, Webpack, Babel

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

김정환

다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 Vuejs의 중급 기술 (Vuex, Vue-Router, Http)을 학습할 수 있습니다. 퍼블리싱 결과물, API 서버와 문서하는 등을 미리 구성했기에 협업하는 방법도 체험하실 수 있는 강의입니다.

중급이상

JavaScript, Vue.js

견고한 JS 소프트웨어 만들기

김정환

같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

중급이상

소프트웨어 테스트, TDD, jasmine

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

김정환

순수 자바스크립트와 VueJS라는 UI Library를 이용하여 쇼핑몰 검색 페이지를 만들어 보며 VueJS 개발 학습을 진행합니다. 순수 자바스크립트와 VueJs 로 개발을 각기 진행하며 각 개발의 차이점과 MVC, MVVM 디자인 패턴의 차이도 배울 수 있습니다.

초급

JavaScript, Vue.js

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

이 강의에서는 Javascript 언어로 백엔드 개발을 할 수 있는 NodeJS를 학습하고, 테스트 주도 개발(TDD) 방법으로 NodeJS를 이용해 API 서버 개발을 할 수 있습니다. 또한 NodeJS의 대표적인 웹 프레임워크 ExpressJS의 기초 원리를 이해하고, 모바일과 웹 서비스에서 사용하는 REST API 개발 방법을 학습할 수 있습니다.

초급

TDD, Node.js, Express

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[리액트 2부] 고급 주제와 훅

김정환

중급이상

React, React Context, react-component

리액트 기초 (Introduction to React)

부산대학교 소프트웨어융합교육원

리액트를 활용한 웹 애플리케이션 개발 능력을 갖추고 실무에 적용할 수 있는 역량을 키워보자!

초급

React, hook, react-router

[NarP Series] MVC 프레임워크는 내 손에 [나프2탄]

박매일

본 과정은 WEB MVC 프레임워크가 무엇이고 WEB MVC 프레임워크가 어떻게 변형이 되면서 Spring WEB MVC 프레임워크로 넘어가는지 TPC(생각하고-표현하고-코딩하고) 기법을 통해 단계적으로 학습하고 이해 할 수 있는 과정입니다.

초급

MVC, Ajax, Spring

Kotlin으로 개발하는 Spring Boot Web MVC

Steve (예상국)

현업 개발자가 알려주는 Kotlin 을 활용한 Spring Boot 개발 방법!! 간결한 문법과 Spring Boot를 활용한 안정적인 Web Application 개발 방법을 배워보세요.

초급

Spring Boot, REST API, JUnit

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)

짐코딩

최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

초급

Next.js, CursorAI, React

코드로 배우는 React with 스프링부트 API서버

구멍가게코딩단

스프링 부트(Spring Boot ver3.4로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

초급

React, Spring Boot, JWT

스프링 프레임워크는 내 손에 [스프1탄]

박매일

[스프1탄] 에서는 스프링 프레임워크에서부터 스프링 보안까지 단계별 학습을 통해 웹 기반의 ERP 시스템을 구축하는 백엔드(Java Backend)개발 전문가를 만드는 과정입니다.

초급

Spring, MVC, JSP

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

풀스택으로 나만의 블로그를 만들어 보아요~~!

중급이상

Redux, Node.js, Bootstrap

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

nextjs, ChatGPT, React

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

중급이상

React, TypeScript

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

우아한형제들 프론트엔드 시니어 개발자의 웹 개발 로드맵

김정환

카카오 계열사 현직자들이 가장 많이 듣는 리액트 강의 BEST3

인프런

₩55,000

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

초급자를 위해 준비한 [웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

혹시, 이런 고민 중이시라면 주목!💡

Case 1 리액트가 가장 인기라는데, 어디서부터 시작할지 모르겠어요!

Case 2 나의 리액트 개발 프로세스에 대한 확신이 없어요.

리액트 기초부터 실전까지, 확실히 알려드려요 🎯

이런 분들이 들으면 좋아요! 🧑‍🎓

제 강의만의 특징 😎

이런 내용을 배워요 📖

다음 강의

저를 소개합니다 🧑‍🏫

김정환

수강생 분들을 위한 Q&A 🙋

이런 분들께 추천드려요!

안녕하세요 김정환입니다.

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

커리큘럼

수강평

김정환님의 다른 강의

비슷한 강의

연관 로드맵

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

Case 1
리액트가 가장 인기라는데, 어디서부터 시작할지 모르겠어요!

Case 2
나의 리액트 개발 프로세스에 대한 확신이 없어요.

이런 분들께
추천드려요!

안녕하세요
김정환입니다.