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

/

프론트엔드

리액트 훅(React Hook)으로 만드는 웹앱

모던 프론트엔드 프레임워크 중 가장 인기있는 React(리액트), 하지만 배우기가 어렵습니다. 이를 해결하기 위해 훅(Hook)이 나왔습니다. 본 강의는 훅을 이용해 React를 쉽게 배울 수 있도록 도와드립니다.

(4.0) 수강평 5개

수강생 57명

React웹앱

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

이런 걸 배울 수 있어요

  • React 기초

  • React Hook 사용법

할 일 관리 웹 앱 개발✅로
쉽고 재미있게 배우는 리액트 훅!

이 강의는! 📖

React Hook?

훅(Hook)이란, 함수형 컴포넌트에서도 
클래스형 컴포넌트의 기능을 사용할 수 있도록
 React 16.8 버전부터 도입된 기능입니다.

현재 프론트엔드 프레임워크 중 가장 인기있는 프레임워크, 리액트에서 최근 함수형 개발 방법을 가능하게 만들어주는 훅을 발표했습니다. 훅을 이용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 보다 간편하게 기능을 구현할 수 있습니다.

본 강의에서는 리액트 훅(React Hook)으로 할 일 관리(To-do List) 웹앱을 만들어 봅니다. 아래와 같은 할일관리앱을 훅을 통해 함수형 개발 방식으로 개발할 수 있습니다.

누가 배우면 좋을까요? 📐

리액트(React)를
쉽고 재미있게
접근하고 싶으신 분
기초 자바스크립트의
다음 단계를
학습하고 싶으신 분
프론트엔드 개발자가
되고 싶은
개발자 취업 준비생
  • 기술은 배웠는데, 어디에 어떻게 쓰이는지 감이 오지 않았던 분들을 위한 강의입니다.
  • 각 단계를 개발 가능한 수준으로 나눠, 단계별로 차근차근 익히고 활용할 수 있어요.
  • 파트별로 기능을 직접 만들어보고, 더 높은 학습 효과를 얻어보세요!

직접 만들어보세요! 📜

리액트 훅(React Hook)으로 위와 같은 할 일 관리 앱을 개발할 수 있습니다. (바로가기)

기본에 충실한 설명으로
초보자도 쉽게
따라할 수 있어요.

실제로 리액트 훅이
웹앱 개발 과정에서
어떻게 쓰이는지 배워요.

쉽고 간단한
개발환경 설정을 위한
CodePen을 사용해요.

리액트 개발 전체를
경험할 수 있는
예제를 만들어봅니다.

예상 질문 Q&A 💬

Q. 리액트를 알아야 들을 수 있나요?

본 강의는 리액트 기초를 다룹니다. 설명을 나열하는 대신 아주 간단한 웹앱을 직접 개발해보면서 리액트의 기능을 파악할 수 있게 만들었습니다.

Q. 수강 후, 리액트에 대해 얼마나 알 수 있을까요?

모던 자바스크립트 학습 범위는 크게 3가지로 나눌 수 있습니다. 1) 동적 UI, 2) Router를 통한 페이지 이동, 3) 서버와 통신입니다. 본 강의에서는 이 중에서 “동적 UI”를 배울 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 자바스크립트 기본기가 있으신 분

  • 쉬운 React 개발 방법을 알고 싶은 분

  • React Hook 을 배우고 싶은 분

선수 지식,
필요할까요?

  • 자바스크립트

  • HTML

안녕하세요
최광성입니다.

4,962

명

수강생

116

개

수강평

29

개

답변

3.8

점

강의 평점

9

개

강의

  • 현) 리얼메이커 수석 개발자
  • 전) CCG 수석 개발자
  • 전) VARDOT 소프트웨어 엔지니어, 드루팔 개발자
  • 전) 반도체 에칭 시뮬레이션 책임 개발자

커리큘럼

전체

17개 ∙ (1시간 47분)

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

수강평

전체

5개

4.0

5개의 수강평

  • minkh05127888님의 프로필 이미지
    minkh05127888

    수강평 4

    ∙

    평균 평점 4.5

    3

    35% 수강 후 작성

    Có thể nói là trình độ sơ cấp, có rất nhiều nội dung bị bỏ qua và chủ đề của bài giảng có vẻ hơi mơ hồ. So với thời gian và nhịp độ bài giảng, có vẻ như có rất nhiều phần tốn thời gian. Cá nhân tôi nghĩ rằng đó là một khóa học không hiệu quả về mặt chi phí.

    • kwangsung
      지식공유자

      Cảm ơn vì lời nói của bạn. Mình sẽ cố gắng làm bài giảng tốt hơn.

  • didue님의 프로필 이미지
    didue

    수강평 1

    ∙

    평균 평점 3.0

    3

    100% 수강 후 작성

    Thay vì là một khóa học giới thiệu, đây là bài giảng dành cho những người đã sử dụng React ít nhất một lần hoặc có kinh nghiệm với các ngôn ngữ front-end dựa trên JS khác và muốn nghiên cứu React Hook. Tuy thời lượng mỗi bài giảng ngắn, có nhiều nội dung không quan trọng và nhiều nội dung bị bỏ qua nên dù là bài giảng có trả phí nhưng chất lượng hài lòng có phần thấp.

    • 3chamchi7784님의 프로필 이미지
      3chamchi7784

      수강평 1

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      Cảm ơn

      • kwangsung
        지식공유자

        Cảm ơn :)

    • seolahkimglobal8412님의 프로필 이미지
      seolahkimglobal8412

      수강평 2

      ∙

      평균 평점 5.0

      5

      94% 수강 후 작성

      Tôi rất thích tham gia một lớp học tốt. Cảm ơn Tốt cho người mới bắt đầu làm quen với React. Vì đã có kiến ​​thức về Vue.js nên tôi có thể hiểu bài giảng một cách đơn giản hơn và thật tuyệt khi có thể tạo một ứng dụng web đơn giản trong khoảng 2 giờ. Học khái niệm useContext là điều hữu ích nhất tôi học được trong bài giảng này. Điều tôi thất vọng sau khi nghe bài giảng là tôi ước nó tiến triển nhanh hơn một chút và vì đây là bài giảng trả phí nên tôi ước gì phần giải thích nội dung lớp học phong phú hơn. Ví dụ: khi thảo luận về UseContext, nó bao gồm những ưu và nhược điểm, cũng như những vấn đề có thể phát sinh nếu sử dụng quá mức và những điểm cần lưu ý.

      • kwangsung
        지식공유자

        Cảm ơn bạn đã để lại đánh giá. Chúng tôi sẽ tham khảo phản hồi của bạn và cải thiện nội dung. Cảm ơn

    • study17823님의 프로필 이미지
      study17823

      수강평 3

      ∙

      평균 평점 4.3

      4

      100% 수강 후 작성

      Cảm ơn sự nỗ lực của bạn.

      최광성님의 다른 강의

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

      Từ Kotlin đến bảo mật mùa xuân강의 썸네일

      Từ Kotlin đến bảo mật mùa xuân

      kwangsung

      Phát triển Spring Boot bằng Kotlin có rất nhiều lợi ích. Tôi nghĩ sẽ rất tốt nếu tìm hiểu qua bài giảng này.

      초급

      초급

      Kotlin, Spring Boot, Thymeleaf

      Phát triển web Python (sử dụng Flask, SQLAlchemy)강의 썸네일

      Phát triển web Python (sử dụng Flask, SQLAlchemy)

      kwangsung

      Flask là một khung phụ trợ Python được sử dụng rộng rãi. Flask_SQLAlchemy là cơ sở dữ liệu ORM được sử dụng trong Flask. Nếu bạn biết Flask_SQLAlchemy, bạn có thể phát triển web bằng mã ngắn gọn.

      초급

      초급

      Python, Flask, SQLAlchemy

      SQL dành cho nhà tiếp thị강의 썸네일

      SQL dành cho nhà tiếp thị

      kwangsung

      Đây là bài giảng về SQL được thiết kế để giúp các nhà tiếp thị dễ dàng tìm hiểu các câu lệnh SQL. Chúng tôi sẽ giới thiệu ngữ pháp SQL thiết yếu và phân tích dữ liệu thực tế thu được từ Kaggle.

      입문

      입문

      SQL

      Giải quyết vấn đề thuật toán của Google강의 썸네일

      Giải quyết vấn đề thuật toán của Google

      kwangsung

      Đây là bài giảng giới thiệu và giải bài toán Vòng loại 1 của Google Codejam, một cuộc thi thuật toán của Google.

      초급

      초급

      Python

      Toán Tensorflow bạn cần biết강의 썸네일

      Toán Tensorflow bạn cần biết

      kwangsung

      Tensorflow yêu cầu sử dụng cấu trúc đồ thị phức tạp ngay cả đối với các phép tính số học đơn giản. Tại sao lại như vậy? Điều này là do Tensorflow yêu cầu các phương trình vi phân trong khi thực hiện thuật toán gọi là giảm độ dốc. Cấu trúc đồ thị là một phương tiện để rút ra phương trình vi phân một cách thuận tiện. Chúng tôi đã giải thích một cách toán học tại sao lại như vậy.

      초급

      초급

      Tensorflow

      Khởi động mùa xuân với Kotlin강의 썸네일

      Khởi động mùa xuân với Kotlin

      kwangsung

      Chúng tôi sẽ vui lòng giải thích từ góc độ của người mới bắt đầu những gì người mới bắt đầu sử dụng Spring Boot và Kotlin sẽ gặp phải khi phát triển web.

      초급

      초급

      Kotlin, Spring Boot

      Ngôn ngữ lập trình GPU CUDA cơ bản강의 썸네일

      Ngôn ngữ lập trình GPU CUDA cơ bản

      kwangsung

      CUDA là ngôn ngữ lập trình GPU. Nó là ngôn ngữ được tạo bằng cách sửa đổi C và C++, vì vậy bất kỳ nhà phát triển C hoặc C++ nào cũng có thể dễ dàng truy cập nó. Tuy nhiên, bạn phải hiểu rõ đặc điểm của máy GPU và lập trình CUDA. Khóa học này hiểu về máy GPU, viết CUDA và thực hiện phép nhân ma trận, một thao tác cơ bản của học sâu. Khóa học này sẽ giúp bạn thành thạo lập trình GPU.

      중급이상

      중급이상

      CUDA

      Học trí tuệ nhân tạo trong khi tạo ra nó (học tăng cường)강의 썸네일

      Học trí tuệ nhân tạo trong khi tạo ra nó (học tăng cường)

      kwangsung

      Khóa học này giải thích việc học tăng cường mà không cần đến toán học. Bạn có thể tìm hiểu các khái niệm một cách dễ dàng và rõ ràng. Đúng. Bạn có thể triển khai và chạy trò chơi Tic Tac Tok thực tế bằng cách mã hóa trực tiếp RLkit được viết bằng Python, ngôn ngữ dễ tiếp cận nhất.

      초급

      초급

      Reinforcement Learning(RL)

      비슷한 강의

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

      Thực tế phát triển ứng dụng React Native cho iOS/Android - Cơ bản강의 썸네일

      Thực tế phát triển ứng dụng React Native cho iOS/Android - Cơ bản

      wintho

      Mục tiêu là có được kiến ​​thức cơ bản về React Native để phát triển front-end ứng dụng di động. Khóa học này được thiết kế để giúp những người không phải là chuyên gia dễ dàng phát triển Ứng dụng di động gốc thông qua việc sử dụng ngôn ngữ/API với rào cản gia nhập thấp.

      초급

      초급

      React Native, React, ES6

      React dễ nhất (phiên bản toàn cầu)강의 썸네일

      React dễ nhất (phiên bản toàn cầu)

      yalco

      Học React theo cách dễ dàng và nhanh nhất!

      입문

      입문

      React, JavaScript, Node.js

      Phát triển web 3D tương tác với React Three Fiber (R3F)강의 썸네일

      Phát triển web 3D tương tác với React Three Fiber (R3F)

      taejaehan

      React và Three.js cùng một lúc! Từ cơ bản 3D đến dự án có thể sử dụng trong công việc thực tế và cả mẹo tối ưu hóa!

      초급

      초급

      Interactive Web, react-three-fiber, Three.js

      React Native with Expo: Học bài bản từ ZeroCho강의 썸네일

      React Native with Expo: Học bài bản từ ZeroCho

      zerocho

      Đã đến thời đại mà các nhà phát triển web (đặc biệt là nhà phát triển React) có thể phát hành ứng dụng thật dễ dàng. Với Expo, bạn càng có thể phát hành cả ứng dụng Android và iOS nhanh hơn nữa. Hãy trở thành nhà phát triển có thể nhanh chóng phát hành ứng dụng thông qua Expo.

      초급

      초급

      React, React Native, Hybrid App

      Làm chủ Next.js (v15): Xây dựng blog developer dựa trên Notion (với Cursor AI)강의 썸네일

      Làm chủ Next.js (v15): Xây dựng blog developer dựa trên Notion (với Cursor AI)

      gymcoding

      Đây là khóa học cùng xây dựng một blog developer thực tế dựa trên Notion, đồng thời học cách sử dụng Next.js v15 App Router mới nhất. Ngoài ra, bạn còn có thể tiếp thu nhiều kiến thức khác nhau, bao gồm cả cách sử dụng Cursor AI.

      초급

      초급

      Next.js, Cursor AI, React

      [2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành강의 썸네일

      [2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành

      junghw

      Những người có ý tưởng nhưng không biết phải phát triển ứng dụng như thế nào, Hãy cùng làm chủ việc phát triển ứng dụng bằng cách làm thử 4 dự án thực tế!

      입문

      입문

      JavaScript, React, Node.js

      Học React và Firebase bằng cách làm theo - Tạo ứng dụng trò chuyện [gia hạn 2023.12]강의 썸네일

      Học React và Firebase bằng cách làm theo - Tạo ứng dụng trò chuyện [gia hạn 2023.12]

      johnahn

      Thông qua bài giảng này, bạn có thể tạo một ứng dụng trò chuyện bằng React và Firebase.

      초급

      초급

      React, Firebase, Web Application

      Dự án đồ chơi React full-stack - REST, GraphQL (dành cho nhà phát triển FE)강의 썸네일

      Dự án đồ chơi React full-stack - REST, GraphQL (dành cho nhà phát triển FE)

      jaenam

      Thực hành REST API và GraphQL trong khi tạo dịch vụ SNS dựa trên React đơn giản. Giới thiệu một cách đơn giản và dễ dàng để tạo môi trường phụ trợ cho việc phát triển giao diện người dùng.

      초급

      초급

      REST API, GraphQL, React

      Tổng hợp các khái niệm web front-end cơ bản thông qua từ khóa và thực hành강의 썸네일

      Tổng hợp các khái niệm web front-end cơ bản thông qua từ khóa và thực hành

      ronpark

      La bàn dành cho người mới bắt đầu phát triển web, khóa học hướng dẫn để khám phá những điều bạn chưa biết về giao diện người dùng web và tiến về phía trước một cách có hệ thống.

      입문

      입문

      Network, Google Chrome, Chrome DevTools

      Hướng dẫn về Elm, một ngôn ngữ front-end thuần túy chức năng강의 썸네일

      Hướng dẫn về Elm, một ngôn ngữ front-end thuần túy chức năng

      hatemogi

      Nghiên cứu tài liệu hướng dẫn ngôn ngữ lập trình Elm để tạo ứng dụng web giao diện người dùng bằng lập trình chức năng thuần túy chỉ trong 3 giờ.

      초급

      초급

      elm, Functional Programming, SPA

      월 ₩94,420

      5개월 할부 시

      ₩22,000