인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

프론트엔드

따라하며 배우는 리액트 A-Z[19버전 반영]

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

(4.7) 수강평 83개

수강생 2,896명

ReactNext.jsTypeScriptTDDRedux

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

이런 걸 배울 수 있어요

  • 리액트

  • NextJS

  • 타입스크립트

  • 정적 사이트 자동 배포

  • 도커

리액트 기초 개념부터 중급 기술까지
직접 앱을 만들어보며 배울 수 있어요!

따라하며 배우는
리액트 A-Z

이 강의를 통해서 리액트 기초부터 중급까지의 기술을 익히실수 있습니다. 
리액트를 처음 접하는 사람들도 이 강의 하나로 리액트를 위해 필요한 대부분의 지식을 습득하실수 있습니다. 

하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다. 프론트엔드 개발자가 되기 위해 필수처럼 생각되는 리액트를 배워서 취업에 많은 도움이 되었으면 좋겠습니다.

이 강의만의
장점을 확인하세요.

구조적 이해를 돕는 
도표 중심의 
쉽고 자세한 설명 

직접 소스 코드를 
작성하면서 
자연스러운 반복 학습 

실제 애플리케이션을 
만들어볼 수 있는  
실습 중심 강의 

자바스크립트 기초를 뗀 
초보 개발자라면 
누구나 OK! 

1-2. 도표를 통한 시각적 설명 + 직접 코드 작성의 2단계!

도표를 통해서 시각적으로 봤을 때 그냥 설명을 듣기만 했을 때보다 이해가 더 잘 되기 때문입니다. 또한 이렇게 도표를 통해서 학습한 후 소스 코드를 작성하므로 자연스럽게 복습하는 효과가 나타난다고 생각합니다.

3. 따라하며 배우세요, 실습 중심 강의.

먼저 필요한 개념을 익힌 후에 실습을 통해 개념을 더욱 확실하게 해줍니다.

4. 자바스크립트 기초를 알고 있는 학습자에게 적합합니다.

자바스크립트의 기초를 알고 계시면 이 강의를 듣는데 어려움 없이 들으실 수 있습니다. 

다음 내용을 학습합니다.

섹션 1) 리액트의 개념에 대해서 배우게 됩니다. 

섹션 2-3) To-Do 앱을 만들며 리액트 기초 개념을 배우며 사용해 봅니다.

섹션 4-5) 넷플릭스 앱을 만들며 리액트의 좀 더 심화적인 개념을 배우고 사용해 봅니다.

섹션 6-7) 리액트 테스트에 대해서 기초적인 부분은 배우며 실습으로 간단한 버튼 앱을 만들어 봅니다. 

 

 

 

 

 

 

섹션 8) NextJS 와 Typescript에 대해서 알아보며 이 둘을 이용한 블로그 앱을 만들어봅니다.

섹션 9) 리액트의 새로운 버전인 리액트 18버전에서 새로나온 기능과 API에 대해서 알아봅니다.

섹션 10) 리액트의 대표적인 상태관리 라이브러리인 리덕스에 대해서 알아봅니다.

섹션 11) 도커로 리액트를 실행하는 법에 대해서 알아봅니다. 

예상 질문 Q&A 💬

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

A. 기초부터 자세하게 강의하기 때문에 비전공자도 들을수 있습니다.

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

A. 프론트엔드 개발자로서 가장 많이 사용되는 라이브러리 이기에 리액트를 배우는게 취업에 많은 도움이 된다고 생각됩니다.

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

A. 기초적인 자바스크립트 개념을 알고 들으면 좋습니다.

지식공유자의 
다른 강의가 궁금하다면?

누적 수강생 32,000+명, 따라하며 배우는 웹 개발 시리즈 📖

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 리액트를 처음 배우는 분

  • 프론트엔드 개발자가 되고 싶은 분

선수 지식,
필요할까요?

  • 자바스크립트

안녕하세요
John Ahn입니다.

83,037

명

수강생

2,638

개

수강평

2,428

개

답변

4.8

점

강의 평점

20

개

강의

안녕하세요. 

즐겁게 개발하고 있는 개발자입니다. 

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

더보기

커리큘럼

전체

162개 ∙ (24시간 16분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

83개

4.7

83개의 수강평

  • lgs4002님의 프로필 이미지
    lgs4002

    수강평 12

    ∙

    평균 평점 4.3

    4

    97% 수강 후 작성

    React 부분과 달리 Nextjs, Typescript, Redux 부분이 살짝 아쉽다는 생각이 들었습니다. 좋은 강의였습니다.

    • osakapark님의 프로필 이미지
      osakapark

      수강평 6

      ∙

      평균 평점 4.0

      3

      100% 수강 후 작성

      1. 장점 교재 및 소스가 제공되어 복습하기 좋습니다. (제가 이 강의를 신청한 이유입니다.) 2.단점 강의가 교재 읽기 같은 부분이 있어서, 전달력이 떨어집니다. 코드 설명할 때, 타이핑하면서 코드를 단순히 읽는 경우가 많습니다. (집중 안됨, 복습시 시간낭비) 3.건의 사항 단순 코드 타이핑, 코드 읽기 시간은 줄여 주시고, 소스에 대한 설명 시간을 늘여 주셨으면 좋겠습니다. drawo io 는 읽기 불편하고, 보안때문에 회사에서 접속도 되지 않습니다.

      • 원준님의 프로필 이미지
        원준

        수강평 1

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        1. 강의 자료 - 5점 탐나는 GIF 자료들이 많은데, PDF에 GIF가 담기지 않는 점, diagram앱에서 export시 페이지 분할되는 부분의 사진이 잘리는 점은 아쉽습니다 ㅠ 인프런에 문서 관련 표준이나 가이드라인도 있으면 좋을 것 같네요. 어떤 강사분은 한글 파일로 하시는 것도 본 적 있어서.. 그래도 강의자료 퀄리티가 만점이라 5점 2. 강의 전달력 - 5점 목소리 좋다는 평은 처음 남겨봅니다. 듣기 편해요. 리액트는 예전에 책으로 보거나 독학했을 때는 어려웠는데, 어려운 건 중요한 걸 더 알려주고, 그림판으로 대충 그리는게 아닌 제대로된 다이어그램이나 자료와 함께 친절하게 강의해주셔서 덕분에 잘 배웠습니다. 이거 듣다가 지인한테 다른 강의도 3개 추천 받았었는데 비교해보니 리액트 배우기에는, 프론트엔드 입문자에게는 이게 최고인 것 같습니다. 3. 강의 구성 - 리액트~TDD는 5점, 8강부터 4점 리액트와 테스트, 배포, 자동화까지는 엄청 잘 알려주셨는데, 타입스크립트, Next.js, 리덕스는 그만큼은 자세히 알려주지 않아 아쉽습니다! 강의가 부족한 게 아니라 후반 파트는 입문까지만 알려주셔서 그렇습니다. 중급 강좌도 있으면 좋을 것 같습니다~ 4. 총평 만점짜리 강의입니다. 퀄리티에 비해 가격이 다소 저렴한 편입니다.

        • 김일꾼님의 프로필 이미지
          김일꾼

          수강평 2

          ∙

          평균 평점 4.0

          3

          66% 수강 후 작성

          배너 만들기에 css 파일 없고 코드도 없는데 질문사항에 검색해도 안나옴

          • gyuyoung park님의 프로필 이미지
            gyuyoung park

            수강평 5

            ∙

            평균 평점 5.0

            5

            6% 수강 후 작성

            john ahn님의 강의는 대단하다고 생각합니다. 저렴한 강의 비용에 교재까지 손수 만들어 제공해주시고, contents들도 알찹니다. 타강의에 비해 내용도 풍부한데 가격도 착한 이런 강의를 두고 어떻게 다른 리액트 강의를 듣겠습니까

            John Ahn님의 다른 강의

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

            따라하며 배우는 도커와 CI환경 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

            John Ahn

            이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

            초급

            초급

            GitHub, AWS, Docker

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

            John Ahn

            이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

            중급이상

            중급이상

            React, Redux, Node.js

            따라하며 배우는 자바스크립트 A-Z강의 썸네일

            따라하며 배우는 자바스크립트 A-Z

            John Ahn

            웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

            입문

            입문

            JavaScript

            따라하며 배우는 리액트 네이티브 기초강의 썸네일

            따라하며 배우는 리액트 네이티브 기초

            John Ahn

            이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

            초급

            초급

            React Native, React, expo

            따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 TDD 개발 [2023.11 업데이트]

            John Ahn

            이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

            초급

            초급

            TDD, Node.js, Express

            따라하며 배우는 노드, 리액트 시리즈 - 기본 강의강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

            John Ahn

            이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

            초급

            초급

            React, Node.js

            따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

            John Ahn

            이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

            초급

            초급

            React, Redux, Node.js

            따라하며 배우는 NestJS강의 썸네일

            따라하며 배우는 NestJS

            John Ahn

            이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

            초급

            초급

            NestJS, PostgreSQL, TypeORM

            따라하며 배우는 타입스크립트 A-Z강의 썸네일

            따라하며 배우는 타입스크립트 A-Z

            John Ahn

            이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

            초급

            초급

            TypeScript, JavaScript

            따라하며 배우는 HTML, CSS강의 썸네일

            따라하며 배우는 HTML, CSS

            John Ahn

            이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

            입문

            입문

            HTML/CSS

            따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

            John Ahn

            이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

            초급

            초급

            클론코딩, Node.js, React

            따라하며 배우는 웹 게임강의 썸네일

            따라하며 배우는 웹 게임

            John Ahn

            이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

            중급이상

            중급이상

            React

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]

            John Ahn

            이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

            초급

            초급

            React, React Context, 웹앱

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

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

            John Ahn

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

            초급

            초급

            React, Firebase, 웹앱

            따라하며 배우는 데노(DENO) - 기본 강의강의 썸네일

            따라하며 배우는 데노(DENO) - 기본 강의

            John Ahn

            출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

            초급

            초급

            Deno

            따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

            John Ahn

            이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

            초급

            초급

            React, Node.js

            따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

            John Ahn

            이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

            초급

            초급

            React, Node.js, 웹앱

            비슷한 강의

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

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 리액트 테스트 [2023.11 업데이트]

            John Ahn

            이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

            초급

            초급

            React, React Context, 웹앱

            따라하며 배우는 타입스크립트 A-Z강의 썸네일

            따라하며 배우는 타입스크립트 A-Z

            John Ahn

            이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

            초급

            초급

            TypeScript, JavaScript

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

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

            John Ahn

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

            초급

            초급

            React, Firebase, 웹앱

            [자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]강의 썸네일

            [자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

            영코디 킴쌤

            리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

            입문

            입문

            JavaScript, React, jQuery

            따라하며 배우는 웹 게임강의 썸네일

            따라하며 배우는 웹 게임

            John Ahn

            이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

            중급이상

            중급이상

            React

            [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일

            [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

            코드팩토리

            자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

            초급

            초급

            NestJS, REST API, backend

            [리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편강의 썸네일

            [리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

            제로초(조현영)

            타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

            중급이상

            중급이상

            TypeScript

            따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

            따라하며 배우는 TDD 개발 [2023.11 업데이트]

            John Ahn

            이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

            초급

            초급

            TDD, Node.js, Express

            [코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스강의 썸네일

            [코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

            코드팩토리

            TypeScript(타입스크립트)를 하나도 모르더라도 강의 하나로 Typescript 문법 고수로 만들어주는 고농축 Typescript 문법 강의입니다.

            초급

            초급

            TypeScript

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

            John Ahn

            이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

            중급이상

            중급이상

            React, Redux, Node.js

            1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

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

            도도(코딩루팡)

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

            입문

            입문

            nextjs, ChatGPT, React

            Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

            Node.js에 TypeScript 적용하기(feat. NodeBird)

            제로초(조현영)

            Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

            중급이상

            중급이상

            Node.js, 웹앱, TypeScript

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

            초급

            초급

            React Native, React, ES6

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

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

            정현우

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

            입문

            입문

            JavaScript, React, Node.js

            입문강의 타입스크립트부터 ionic6 (앵귤러 기반)강의 썸네일

            입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

            깊알못nodeep

            쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

            입문

            입문

            TypeScript, IONIC, 하이브리드 앱

            연관 로드맵

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

            따라하며 배우는 풀스택 웹 개발 시리즈 로드맵 썸네일

            따라하며 배우는 풀스택 웹 개발 시리즈

            John Ahn

            인프런 워밍업 클럽 스터디 FE 로드맵 로드맵 썸네일

            인프런 워밍업 클럽 스터디 FE 로드맵

            John Ahn

            인프런을 지탱하는 기술 로드맵 썸네일

            인프런을 지탱하는 기술

            조슈아

            ₩55,000