개발 · 프로그래밍

프론트엔드

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

Name: 리액트 훅(React Hook)으로 만드는 웹앱
Price: 22000 KRW

모던 프론트엔드 프레임워크 중 가장 인기있는 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,966

명

수강생

116

개

수강평

개

답변

3.8

점

강의 평점

개

강의

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

커리큘럼

전체

17개 ∙ (1시간 47분)

섹션 1. 리액트 훅(React Hook)으로 만드는 웹앱

17개 ∙ (1시간 47분)

1. 강의 소개
02:26
2. 개발 환경
10:59
3. Input 요소 추가
09:20
4. 상태와 상태관리자
05:13
5. useState
06:30
6. Input 밸류, State 업데이트
09:36
7. 리스트 맵 함수 사용, 키 값
08:08
8. Task 리스트 추가
07:47
9. setTask를 이용한 Input 밸류 초기화
04:22
10. 스타일 변경
05:20
11. clickHandler 추가
10:35
12. 취소선 기능 추가
02:26
13. DefaultChecked 설정
02:00
14. 삭제버튼 기능 활성화
04:59
15. useContext 소개
07:07
16. useContext 구현
10:30
17. 마치며 ...
00:31

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

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

수강평

전체

5개

4.0

5개의 수강평

민경희
수강평 4
∙
평균 평점 4.5
2022. 01. 12.
3
35% 수강 후 작성
초급이라고 하기엔 건너뛰는 내용이 많고 강의 대상이 조금 애매해 보입니다. 강의 시간 및 진행 속도 대비 시간잡아먹는 부분들이 조금 많아보입니다.. 개인적으로는 가성비가 좋지 않은 강의라고 생각합니다.
- 최광성
  지식공유자
  2022. 01. 12.
  말씀 감사드립니다. 더 좋은 강의 만들도록 노력하겠습니다.
didue
수강평 1
∙
평균 평점 3.0
2023. 09. 25.
3
100% 수강 후 작성
입문용이라기보단 react를 한번쯤 써보았거나, js기반의 다른 프론트언어를 경험해본 사람들을 대상으로 한 react hook에 대해 공부하고 싶은 사람들을 위한 강의. 강의 1편당 시간이 짧은편 임에도 중요하지않은 내용이 많고 건너뛰는 내용이 많아, 유료강의 임에도 질적인 만족감은 조금 떨어지는 편.
study1 study1
수강평 3
∙
평균 평점 4.3
2022. 05. 12.
4
100% 수강 후 작성
수고 하셨습니다.
3chamchi
수강평 1
∙
평균 평점 5.0
2021. 07. 30.
5
100% 수강 후 작성
감사합니다
- 최광성
  지식공유자
  2021. 07. 30.
  감사합니다. :)
Seolah Kim
수강평 2
∙
평균 평점 5.0
2021. 06. 09.
5
94% 수강 후 작성
좋은 수업 잘들었습니다. 감사합니다. React 입문용으로 좋습니다. Vue.js의 지식이 있어서 보다 간단하게 강의 이해가 되었고, 2시간여만에 간단한 웹앱을 만들어 볼 수 있어 좋았습니다. useContext의 개념을 알게 된 것이 이번 강의에서 공부한 것들 중 가장 도움이 되었습니다. 강의를 듣고 아쉬웠던 점은 진행이 조금 더 빨랐으면 하는 부분과 유료강의인만큼 수업 내용에 대해 설명이 더 리치했으면 하는 바람입니다. 예를 들면 UseContext에 대한 내용을 다룰 때는 장단점과 함께 사용을 남발하게 되면 생기는 트러블, 주의점 같은 부분입니다.
- 최광성
  지식공유자
  2021. 06. 09.
  리뷰 남겨주셔서 감사합니다. 남기신 피드백을 참고해서 내용을 보강해보겠습니다. 감사합니다.

최광성님의 다른 강의

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

Kotlin 부터 Spring Security 까지

최광성

Kotlin으로 Spring Boot를 개발하면 그 이점이 너무 많습니다. 본 강의를 통해 알아보시면 좋을 것 같습니다.

초급

Kotlin, Spring Boot, Thymeleaf

파이썬 웹 개발(Flask, SQLAlchemy 이용)

최광성

Flask 는 파이썬 백엔드 프레임워크로 널리 사용되고 있습니다. Flask_SQLAlchemy는 Flask에서 사용하는 데이터베이스 orm 입니다. Flask_SQLAlchemy를 알면 간결한 코드로 웹 개발을 할 수 있습니다

초급

Python, Flask, SQLAlchemy

마케터를 위한 SQL

최광성

마케터들이 SQL문을 쉽게 배울 수 있게 구성한 SQL 강의입니다. 꼭 필요한 SQL 문법을 소개하고 캐글에서 얻은 실제 데이터를 분석해봅니다.

입문

SQL

구글 알고리즘 문제 풀이

최광성

구글 알고리즘 대회인 google codejam 의 Qualification Round 1st problem 을 소개하고 풀어보는 강의 입니다.

초급

Python

반드시 알아야 할 Tensorflow 수학

최광성

Tensorflow 은 간단한 사칙연산도 복잡한 그래프라는 구조를 사용해야합니다. 왜 그럴까요? 그건 Tensorflow가 경사하강법이란 알고리즘을 수행하면서 미분식이 필요하기 때문입니다. 그래프 구조는 그 미분식을 편리하게 도출하기 위한 수단입니다. 왜 그런지 수학적으로 설명했습니다.

초급

Tensorflow

코틀린으로 만드는 스프링부트

최광성

스프링부트 그리고 코틀린 입문자가 웹개발하면서 겪을 일들을 입문자 입장에서 친절히 설명합니다.

초급

Kotlin, Spring Boot

GPU 프로그래밍 언어 CUDA(쿠다) 기초

최광성

CUDA는 GPU 프로그래밍 언어입니다. C, C++를 변경해서 만든 언어라 C, C++ 개발자라면 누구나 쉽게 접근할 수 있습니다. 하지만 GPU 머신과 CUDA 프로그래밍의 특성을 반드시 이해하셔야 합니다. 본 강좌는 GPU 머신을 이해하고 CUDA를 작성하여 딥러닝의 기초 연산인 행렬곱을 실행합니다. 이 과정을 통해 여러분은 GPU 프로그래밍을 능숙하게 다루실 수 있습니다.

중급이상

CUDA

만들면서 배우는 인공지능(강화학습 편)

최광성

본 강좌는 강화학습을 수학 없이 설명합니다. 개념을 쉽고 분명하게 배울 수 있습니다. 뿐만 아니라. 언어 중 제일 접근하기 쉬운 파이썬으로 작성해 놓은 RLkit 를 직접 코딩하면서 실제 틱택톡 게임을 구현하고 실행할 수 있습니다.

초급

강화학습

비슷한 강의

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

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

수코딩

리액트 19의 최신 기능을 타입스크립트(TypeScript)와 함께 배우는 리액트 완성 강의! 기초부터 상태관리(Context, Redux Toolkit, Zustand), API 통신(Fetch, Axios), 최신 훅(use, useActionState, useOptimistic 등), 실전 프로젝트까지 차근차근 익혀 실무에 바로 적용할 수 있는 리액트 앱을 만들 수 있습니다.

입문

React, react-router, redux-toolkit

The Easiest React (Global ver.)

얄팍한 코딩사전

Learn React the Easiest and Fastest Way!

입문

React, JavaScript, Node.js

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

Wintho

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

초급

React Native, React, ES6

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

초급

REST API, GraphQL, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

Next.js, supabase, React

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

초급

Python, Django, React

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

짐코딩

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

초급

Next.js, CursorAI, React

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL