Skip to content
UdemyReactPaid courseBeginner levelCertificate

【한글자막】 React 완벽 가이드 2025 with React Router & Redux (Udemy.com)

React.js를 기초부터 배우기! React, Hook, Redux, React 라우터, Next.js, 모범 사례 학습하기! Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신기술 학습

Created by: Academind by Maximilian Schwarzmüller

Last updated March 2025

icon
What you will learn

  • React 를 기초부터 배웁니다. 강의를 완강할 때 쯤이면 고급 React 개발자로 거듭나 있을 것입니다.
  • NextJS 로 빌드된 풀스택 앱을 포함한 여러 고품질 데모 앱을 구축하기
  • 이 과정의 90만 명 이상의 학생과 제가 가르친 모든 과정의 300만 명 이상의 학생과 함께하세요.
  • 여러 데모 프로젝트 구축 및 실제 사례 살펴보기
  • 로컬 또는 클라우드 개발 환경에서 따라하기
  • React Hook 과 React 컴포넌트에 대해 모두 알아보기
  • React 의 컨텍스트 API 및 React Redux 로 복잡한 상태를 효율적으로 관리하기
  • HTTP를 통해 독립형 React 앱 및 백엔드에 연결된 애플리케이션을 구축하세요.
  • React 라우터로 라우팅 및 라우팅 관련 데이터 불러오기에 대해 알아보기
  • React 앱에서 사용자 인증 구현하기
  • NextJS 로 풀스택 React 앱 구축하기
  • React 유닛 테스트 시작하기
  • 리액티브 웹 앱의 성능을 향상시키는 법
  • JavaScript의 장점을 극대화하는 React 개발방법론
  • React 심화 개념(useCallback, useMemo, useReducer etc)
  • React hooks, 상태 관리(Redux, Context API), Next js, TypeScript
  • 네트워크, SPA, TDD
  • 프론트엔드 웹 개발 실무를 경험하기 위한 프로젝트 학습

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 96 / 100

icon
Course Description

[React 입문, <React 완벽 가이드>로 시작해야하는 이유]

  • React 최신 패턴과 예제를 바탕으로 한 실습 중심의 강의!

  • 가장 기본적이고 핵심적인 부분부터 심화 개념, 그리고 실무에서 React와 함께 사용되는 모든 기술을 한번에!

  • 리액트 사전 지식이 없어도 쉽게 이해할 수 있도록 구성된 단계적 커리큘럼과 친절한 설명

  • 이 강의는 900,000명 이상의 수강생을 ReactJS 개발자로 만들었습니다. Udemy의 다른 어떤 React 강좌보다 더 많은 수강생을 배출했습니다!

-

2025년 1월 업데이트:

React 19가 완전히 업데이트되었습니다!

- “폼 액션을 통해 양식 관리하기” 새로운 섹션 추가 (React 19에서 도입)

- "React 서버 컴포넌트 (RSC) & 서버 액션 - 자세히 알아보기" 새로운 섹션 추가 (React 19와 안정적)

- React 19로 인한 크고 작은 변경 사항을 조정하기 위해 여러 강의를 업데이트했습니다.

2024년 업데이트:

NextJS 앱 라우터 섹션에 새로운 강의(~3시간 분량)가 추가되었습니다.

새로운 “리액트 패턴 및 모범사례” 섹션 추가

2023년 10월 대규모 강의 업데이트:

강의 전반부 전면 업데이트(강의 재녹화, 나머지 절반은 23년 2월에 이미 업데이트됨)!

설명방식 및 데모 프로젝트가 개선되었습니다. 이제 더 많은 핵심 개념과 모범 사례를 다룹니다.

2023년 8월 업데이트:

React Query (Tanstack Query) 에 대한 새로운 섹션이 추가되었습니다.

Framer Motion과 React 앱 애니메이션에 대한 새로운 섹션이 추가되었습니다.

2023년 6월 업데이트:

두 개의 새로운 연습 프로젝트 추가

더 많은 코딩 연습 추가

새로운 JS 복습 섹션 추가

수많은 사소한 개선 및 수정 사항

이 강좌는 여러분이 알아야 할 모든 핵심적인 최신 기능을 갖춘 최신 버전의 React로 완전히 업데이트되었으며 실용적인 방식으로 React를 가르칩니다!

2023년 2월 업데이트:

후반부 강의의 대부분을 완전히 다시 녹화했습니다. (라우팅, 인증 포함)


바쁜 고객과 비즈니스 전문가를 위한 코스!

이 과정은 두 가지 방식으로 수강할 수 있습니다: 1) "컴플릿" 방식(40시간 이상의 전체 과정을 처음부터 끝까지 모두 듣기)와 1) "패스트트랙" 방식(~4시간 요약 모듈만 취사 수강하기) - 여러분의 시간 여유에 맞는 가장 적합한 방식으로 선택하여 학습할 수 있습니다!


React.js 는 웹을 위한 최신 반응형 사용자 인터페이스를 구축하기 위해 요즘 가장 많이 사용하고 배우는 인기 1위의 JavaScript 라이브러리입니다.
이 강좌는 모든 핵심 기본 사항을 살펴보고, 수많은 예제를 살펴보고, 고급 개념도 소개하는 등 React 를 기초부터 단계별로 심도 있게 가르칩니다.
모든 이론, 수많은 예제와 데모, 과제와 연습, 그리고 대부분의 다른 강의들에서는 다루지 않는 중요한 지식을 얻을 수 있습니다 - (이 강의의 분량이 방대한 이유입니다!)
React를 왜 배워야 하는지 모르겠고 광고나 "알고리즘" 때문에 이 강좌를 시작하게 되었다고 해도 걱정하지 마세요: ReactJS는 웹 개발자로서 핵심 기술이며 이 강좌에서는 React 가 왜 그렇게 중요한지에 대해서도 설명할 것입니다!


[<React 완벽 가이드>에 오신 것을 환영합니다!]

이 과정은 필요한 모든 최신 패턴과 모범 사례를 사용하여 실습 중심의 방식으로 React.js 를 가르칩니다. 모든 핵심 기본 사항과 고급 개념 및 관련 주제를 학습하여 진정한 React.js 개발자로 거듭날 수 있습니다.
이 강좌는 React.js 개발자가 되기 위해 알아야 하고 배워야 하는 모든 것을 다루기 때문에 정말 방대한 강좌입니다!
여러분이 React 에 대해 전혀 모르거나 이미 기본적인 React 지식을 가지고 있더라도(필수 사항은 아니지만 문제도 아닙니다) 이 강의를 수강함으로써 유용한 정보와 지식을 많이 얻을 수 있습니다!
이 강좌의 목표는 여러분이 React 를 자신 있게 다룰 수 있도록 하여, React 개발자 포지션에 지원하거나 자신의 프로젝트에 사용하거나 단순히 개발자로서 포트폴리오를 향상시키는 등 여러분의 목표가 무엇이든 간에 자신감을 가질 수 있도록 하는 것입니다: 이 강좌를 통해 여러분의 목표를 달성할 수 있도록 해드리겠습니다!


저는 이 강의를 처음 런칭한 이후로 꾸준히 업데이트하여 항상 여러분 최상의 최신 방식으로 React를 학습할 수 있도록 하고 있습니다!


[<React 완벽 가이드>에서 다루는 내용]


  • React.js 에 대한 상세한 소개 (React 란 무엇이며 왜 사용해야 할까요?)

  • 모든 핵심 기본 사항: React 의 작동 방식, React 로 컴포넌트 빌드하기 및 React 로 UI 구축하기

  • 컴포넌트, props 및 동적 데이터 바인딩

  • 사용자 이벤트와 상태를 이용해 대화형 애플리케이션 만들기

  • React 가 내부에서 어떻게 작동하는지 이해하기 위한 (철저한) 비하인드 스토리 살펴보기

  • 리스트와 조건부 콘텐츠로 작업하는 방법에 대한 자세한 설명

  • React Hook 심층분석!

  • 내장된 Hook 으로 작업하고 사용자 정의 Hook 을 구축하기

  • React 앱을 디버깅하는 방법

  • "스타일 컴포넌트"와 "CSS 모듈"로 React 앱 스타일링하기

  • "Fragments" 및 "Portals"로 작업하기

  • 부작용 다루기

  • 클래스 기반 컴포넌트와 함수형 컴포넌트

  • Http 요청 전송 및 트랜지션 상태 및 응답 처리하기

  • 양식 및 사용자 입력 처리하기 (유효성 검사 포함)

  • Redux & Redux 툴킷

  • React 라우터로 라우팅하기

  • Next.js 에 대한 심층 소개

  • React 앱 배포하기

  • 인증 구현하기

  • 유닛 테스트

  • React 와 TypeScript 결합하기

  • 애니메이션 추가하기

  • 배운 모든 것을 실제 프로젝트에 적용할 수 있는 수많은 예제와 데모 프로젝트

  • 이외에도, React를 더 깊고 확실하게 이해하는 데 도움이 되는 더 많은 내용들이 있습니다. 이 페이지에서 전체 커리큘럼을 확인하세요!


이것은 정말 React 에 관한 모든 것을 담은 "완벽 가이드" 인 점을 약속드립니다!
가장 큰 장점은, React 에 대한 사전 지식이 없어도 수강할 수 있다는 점이죠!
이 강좌는 아무런 지식이 없는 상태에서 시작합니다! 기본적인 웹 개발과 자바스크립트 지식만 있으면 됩니다!
(물론 이 과정에는 모두 같은 내용을 이해할 수 있도록 간단한 자바스크립트 복습도 포함되어 있습니다.)
전체 커리큘럼과 무료 미리 보기 동영상을 확인하고 30일 환불 보장 정책으로 위험 부담 없이 이 멋진 강의에 참여하세요!



[전 세계 300만 수강강사, Max가 전하는 한마디]


한국 수강생 여러분 안녕하세요?

저는 전 세계 300만 수강강사이자 Udemy의 TOP 강사인 Max입니다. 이 강의는 그 어떤 강의보다 이해하기 쉬운 베스트셀러 React 강의로, 최신 React 내용으로만 코스를 구성하였습니다.

이 강의는 React를 가장 최신의 패턴과 예제를 통해 실습 중심으로 알려드립니다. 여러분이 React 개발자로 성장할 수 있도록 가장 기본적이고 핵심적인 부분부터 심화 개념, 그리고 React와 관련된 모든 주제를 배울 수 있습니다. 강의의 방대한 분량은 리액트 개발자가 되기 위한 모든 것을 담고 있습니다.

이 강의는 리액트에 대한 사전 지식이 전혀 필요하지 않습니다. 기초적인 웹 개발 지식과 자바스크립트 기초 문법 지식만 있으면 누구나 들을 수 있습니다! (혹시 이전에 공부한 자바스크립트 내용이 기억이 나지 않는다면 걱정하지 마세요. 이 강의는 자바스크립트 기초 문법에 대한 강의도 포함하고 있습니다!)


강의를 들으시고 강의와 관련하여 궁금하신 점은 무엇이든 Q&A에 남기실 수 있지만, 꼭 영어로 남겨주세요. 그래야 답변을 드릴 수 있습니다. :)


한국 수강생분들과 함께 할 React 여정이 기대됩니다!

바로 시작하시죠!

강의에서 만나요!


- Max

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Academind by Maximilian Schwarzmüller

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. 

Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.

We've taught more than 3,000,000 students on a broad variety of topics. We'd love to teach you as well! :)

Keep learning!

icon
More courses by Academind by Maximilian Schwarzmüller

$199.99

$129.99

$174.99

$189.99

$159.99

$139.99

icon
More React courses

$139.99

$94.99

$69.99

$64.99

$74.99

$69.99

icon
Reviews

4.8

2,992 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Sin on 6/6/2025

강의 구성의 뛰어나나 이분 개발 스타일이 순차적 하는게 아니고 설명때문인지 왔다갔다 하며 설명하고 결과를 먼저 코딩한다음에 호출부를 코딩 한다는 식에 어려움이 있어 이해하기가 힘들었습니다. 따라서 다른 기초 리액트 강의를 보고난 후에 보시는걸 추천 합니다. 물론 집중력이 좋으시면 상관없이 들으실수 있을 것 같습니다.

By Yohan Jang on 6/2/2025

한국인 분들에게 드리는 개인적인 의견은 완전 쌩 초보이신 분들은 좀 어려울 수 있습니다. (중간에 포기했었음) 하지만 어느정도 개발지식이 쌓인 다음 보니 정말 훌륭한 강의입니다. (진짜 정말정말정말로요) 요즘 취업시장에서 단순히 구현으로는 취직이 불가능한 상황이라는 점에서 다들 공감할거라고 생각합니다. 단순 주먹 구구식으로 배워도 어차피 면접에서 다 떨어지거나 서류조차 붙지 못 할탠데 해당 강의는 정말 심도 있고 원리에 대해서 자세히 학습할 수 있습니다. 프론트 취직을 위해서는 해당 학습내용을 완벽하게 숙지한다면 절대로 떨어질 일은 없다고 생각합니다만 조금 걱정스러운 점은 완전 처음 시작하시는 분에게는 어려울 수 있습니다. (저는 여러번 포기..) 그만큼 자세하고 심도 있고 꼭 알아야만 하는 부분 등 배울게 많습니다. 이런 부분 때문에 초보자는 힘들 수도 있고요... 결론적으로 무조건 학습하다 좀 어려우면 쉬운강의를 보다가 다시 학습해보는걸 추천합니다. I believe this is truly one of the best React courses available worldwide. The inclusion of Next.js and the fact that the course is consistently updated gave me the confidence to purchase it without hesitation. One small suggestion I have is that it would have been nice to include a brief introduction to Zustand, as it has become quite popular alongside Redux these days. That said, the course itself is incredibly in-depth and well-structured, making it perfect for building strong fundamentals. I was so impressed with the quality of this course that I went ahead and purchased other ones as well, such as those on Next.js, MongoDB, and Flutter. Thanks to the regular updates, the course content stays up-to-date with the latest trends, and I believe that’s part of why it has become one of the most popular courses globally. Unlike other tutorials that often focus only on quick implementation without much depth, this course strikes an excellent balance between fundamentals, practical implementation, and real-world application. In my opinion, it would be hard to find a better course than this one.

By BeomJinPark on 2/12/2024

역시 리액트를 이해하고 넘어가야 했는데 무작정 따라하고 클론코딩하는 국내 강의부터 본걸 후회합니다 답답했던게 좀 많이 풀렸습니다 한가지 불편한게 있었는데 자막을 정신없게 너무 짤막짤막하게 잘라내서 대본틀어놓고 본 파트가 있었습니다 아마 고급 리덕스 섹션쪽이었는데 그거 제외하곤 괜찮았습니다.

By 김진원 on 1/29/2024

This course has been enjoyable. I was able to learn hot technologies in modern web development, from React to Redux, Next.js, and TypeScript, in an easy and interesting way. The instructor taught us so well that even complex content was easily understood, and the abundance of practical exercises allowed us to immediately apply the theory, which was also great. I felt my skills rapidly improving as I solved various problems. I'm already looking forward to how I can utilize this in my next project! After taking this course, I feel like I've grown another step as a developer, which is great!

By 도훈 최 on 12/22/2023

강의는 너무 좋습니다. 그런데 자막이 너무 별로에요 강의가 23년 10월에 업데이트 되었고 자막은 2달 뒤인 12월 말, 그것도 거의 마지막날이어서 시간은 충분했을 겁니다. 그런데 AI가 번역한듯이 비문도 많아 읽기에 불편합니다. 몇몇 문장은 번역도 하지 않고 넘어간데다가 아예 틀리게 번역한 부분도 있고 번역하지 않고 그대로 써야할 변수명이나 함수 이름을 직역해버려서 이해가 어렵게 만들고 있습니다. 강의 자체는 우수해서 만점을 주고 싶지만 도저히 그렇게 하지 못할 자막퀄리티입니다.

By 김시몬 on 11/30/2023

the updated version of 2024 is more useful for me to study and pratice the react. through this course, i feel i could be a web developer using React. Thank you for making these courses. It's awesome/

By eee le on 8/11/2023

꼭 구매해서 두고두고 보는 것을 추천합니다. 정말 리액트 완벽가이드일 뿐만 아니라 리덕스, 타입스크립트, 넥스트까지 설명해줘서 미친 가성비입니다. 일반적인 할인가로 17,000원에 구매가능한데 만원대에 이런 가성비라서 놀랍네요.. 리액트 기초는 닦으신 분이 들으면 좋습니다. 제가 사실 비전공 독학으로 자바스크립트만 공부하고 리액트 아무것도 모를 때 이 강의를 들었는데 이해를 못해서 듣다가 말았습니다. 프로그래밍에 대해 어느정도 이해도가 있으시면 금방 적응하겠지만, 혹시 저처럼 프로그래밍 경험이 없고 자바스크립트 문법만 떼신 분이라면 추천하진 않습니다. 그래서 제가 바꾼 공부방법은 먼저 이 강의를 수강하기 전에 유튜브 혹은 타 강의사이트에서 '한국어'로 설명해주는 강의로 리액트 기초 공부하고 작은 단위의 간단한 프로젝트를 먼저 만들어보는 것입니다. 저는 인프*에서 리액트 강의 듣고 작은 프로젝트 여러개 실습해보고, 부족한 지식은 유튜브랑 구글링으로 채웠습니다. 타 강의 들었을 땐 리액트 프로젝트는 만들었지만 깊이가 부족했는데, 유데미 이 강의 듣고 나서는 확실히 딥하고 전문적으로 들어가서 너무 좋았습니다. 그동안 헷갈렸거나 몰랐던 부분들이 채워지는 기분이었습니다. 실습뿐만 아니라 동작원리, 가상돔 등등 자세하게 알려주십니다. 이런 부분들 때문에 리액트 입문자가 들으면 금방 이해 안가서 포기할 것 같단 생각이 들었습니다. 그리고 영어강의를 자막 달아놓은거라 번역체라서 입문자에겐 더 힘든 부분이 있습니다. 그렇지만 리액트 기본만 닦고 이 강의 오시면 강좌 자체는 너무 훌륭해서 배울 것들이 너무너무 많습니다!!! 지금 리액트 실습 끝내고 리덕스 실습부분 따라하고 있는데 퀄리티가 너무 좋네요. 리덕스 뒤에는 배포랑 넥스트, 타입스크립트까지 찍먹할 수 있는 파트가 있어서 기대됩니다.

By 최정환 on 8/1/2022

리액트에 대한 양이 방대하여 세부적인 개념을 한번에 모두 외우고 실 프로젝트에 참여했을 때 즉각적으로 응용하여 사용하기엔 어려울것 같습니다. 따라서 따로 정리해가면서 수강하시는 것을 추천드립니다. 강의 자체는 충분히 잘 짜여진 리액트 강의입니다! 추천해요!

By 지은 허 on 6/12/2022

장점> react가 뭔지도 모르는 상황에서 좋다는 추천에 구매했는데 정말 기초부터 차근차근 예제와 함께 잘 알려주시는 거 같습니다. 리액트와 함께 다루는 다른 라이브러리나 언어들이 있다면 해당 부분에 대한 설명을 해주시고 그러면서도 리액트 강의의 흐름에서 벗어나지 않아 좋습니다. 단점> 강의 순서가 좀 이상하다거나 번역이 좀 어색한 경우가 있습니다. 필요한 자료가 해당 강의에 첨부되지 않은 경우도 가끔 있어서 이전 강의 중 자료가 있는 곳을 찾아가는 번거로움도 있었습니다.

By 김윤성 on 4/4/2022

리액트 코어 이외에도 관련된 내용을 방대하게 다룹니다. 각 모듈별로 어느정도 독립성을 유지하려고 있고, 다른 모듈에서 배워야할 내용이 있으면 꼭 언급해주는 부분이 참 좋았습니다. 전반적으로 강사님이 내용을 어떻게 전달해야하는지에 대해서 많은 고심을 하신 것 같았어요. 맥스강사님의 다른 강의에 대해서도 신뢰감이 생깁니다. (이하부터는 리덕스 고급편 챕터를 듣고 추가한 내용입니다) 이전 챕터를 학습할때는 자막을 그럭저럭 알아들을 수 있었는데, '리덕스 고급편' 챕터에서는 거의 알아듣지를 못하겠네요. ( ex- distpatch를 this patch라고 번역) 해당 챕터는 사실상 자막이 없다고 보고 코드와 맥락을 보고 학습하고 넘어갔습니다. 번역하신 분이 리액트에 대해 잘 아시는 게 아닌데 이 챕터의 내용이 어려워져서 그런 것 같습니다. 참고 부탁드립니다.

Showing all 10 reviews on CourseDuck

Read all 2,992 reviews on Udemy