Programming

Front-end

Web app built with React Hooks

Name: Web app built with React Hooks
Price: 22000 KRW

React is the most popular modern front-end framework, but it is difficult to learn. To solve this problem, Hook was introduced. This lecture will help you learn React easily using Hook.

(4.0) 5 reviews

57 learners

kwangsung

React

Web Application

What you will learn!

React Basics
How to use React Hooks

Developing a to-do list management web app✅
Learn React Hooks in an easy and fun way!

This lecture! 📖

React Hooks?

Hooks are also used in functional components.
To enable the use of class-type components
This feature was introduced in React version 16.8.

React, currently the most popular front-end framework, recently announced hooks, which enable functional development methods. Hooks make it easier to create reusable logic and implement features more easily.

In this lecture, we'll build a to-do list web app using React Hooks . You can develop a to-do list app like the one below using a functional approach using Hooks.

Who would benefit from learning this? 📐

_{React
Easy and fun
Anyone who wants to approach}

_{Basic JavaScript
Next step
Those who want to learn}

_{Front-end developer
I want to be
Developer job seekers}

This lecture is for those who have learned the skills but have no idea how or where to use them .
Each stage is divided into developable levels, so you can learn and utilize it step by step .
Create your own functions for each part and achieve greater learning effectiveness!

Make it yourself! 📜

_{You can develop a to-do app like the one above using React Hooks. (Shortcut)}

_{With an explanation that is faithful to the basics
Easy even for beginners
I can follow along.}

_{Actually, React Hooks
During the web app development process
Learn how to use it.}

_{Easy and simple
For setting up the development environment
Use CodePen .}

_{All React development
Can be experienced
Let's create an example.}

Expected Questions Q&A 💬

Q. Do I need to know React to listen?

This course covers the fundamentals of React. Instead of just listing explanations, we've designed it so you can learn React's features by developing a very simple web app.

Q. How much will I know about React after taking the course?

Learning modern JavaScript can be broadly divided into three areas: 1) dynamic UI , 2) page navigation via routers , and 3) server communication . In this course, you'll learn about "dynamic UI."

Recommended for
these people

Who is this course right for?

Anyone with basic JavaScript skills
For those who want to learn easy React development methods
Anyone who wants to learn React Hooks

Need to know before starting?

JavaScript
HTML

Hello
This is

5,038

Learners

117

Reviews

Answers

3.8

Rating

Courses

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

Curriculum

All

17 lectures ∙ (1hr 47min)

Section 1. Web app built with React Hooks

17 lectures ∙ (1hr 47min)

1. Introduction to the course
02:26
2. Development Environment
10:59
3. Add Input Element
09:20
4. States and State Manager
05:13
5. useState
06:30
6. Input value, State update
09:36
7. Using list map function, key value
08:08
8. Add Task List
07:47
9. Initializing Input values using setTask
04:22
10. Change style
05:20
11. Add clickHandler
10:35
12. Added strikethrough feature
02:26
13. Setting DefaultChecked
02:00
14. Activate the delete button function
04:59
15. Introducing useContext
07:07
16. Implementing useContext
10:30
17. In conclusion...
00:31

Published:

Last updated:

Reviews

All

5 reviews

4.0

5 reviews

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

$17.60

kwangsung's other courses

Check out other courses by the instructor!

Kotlin 부터 Spring Security 까지

최광성

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

Basic

Kotlin, Spring Boot, Thymeleaf

Kotlin 부터 Spring Security 까지

최광성

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

최광성

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

Basic

Python, Flask, SQLAlchemy

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

최광성

마케터를 위한 SQL

최광성

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

Beginner

SQL

마케터를 위한 SQL

최광성

구글 알고리즘 문제 풀이

최광성

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

Basic

Python

구글 알고리즘 문제 풀이

최광성

반드시 알아야 할 Tensorflow 수학

최광성

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

Basic

Tensorflow

반드시 알아야 할 Tensorflow 수학

최광성

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

최광성

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

Basic

Kotlin, Spring Boot

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

최광성

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

최광성

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

Intermediate

CUDA

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

최광성

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

최광성

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

Basic

강화학습

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

최광성

Similar courses

Explore other courses in the same field!

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

수코딩

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

Beginner

React, react-router, redux-toolkit

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

수코딩

The Easiest React (Global ver.)

얄팍한 코딩사전

Learn React the Easiest and Fastest Way!

Beginner

React, JavaScript, Node.js

The Easiest React (Global ver.)

얄팍한 코딩사전

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

Wintho

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

Basic

React Native, React, ES6

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

Wintho

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

제로초(조현영)

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

Basic

React, React Native, 하이브리드 앱

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

제로초(조현영)

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

John Ahn

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

Basic

React, Firebase, 웹앱

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

John Ahn

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

정현우

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

Beginner

JavaScript, React, Node.js

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

정현우

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

Beginner

네트워크, Google Chrome, Chrome DevTools

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

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

짐코딩

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

Basic

React, 블로그, Next.js

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

짐코딩

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

Intermediate

React, react-usememo, 기술면접

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

코알못도 누구나 쉽게 따라하는 웹, 앱 만들기 (기초부터 실전 활용까지)

조코딩

누구나 배울 수 있는 쉬운 코딩을 만들겠습니다. 코딩이 무엇인지 이해하고 라이브러리, API 등 최대한 외부 자원을 활용하여 서비스 가능한 웹과 앱을 제작하는 것이 목표입니다.

Beginner

웹앱

코알못도 누구나 쉽게 따라하는 웹, 앱 만들기 (기초부터 실전 활용까지)

조코딩

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

Intermediate

React, Redux, Node.js

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

이 강의에 서버(Java+Springboot) 와 프론트(React, ReactNative, Flutter, Android, iOS)를 모두 담았습니다. 이 강의로 풀스택 게시판 만드는 경험을 진행해보세요

Beginner

React, React Native, iOS

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

순수 함수형 프론트엔드 언어 Elm 가이드

김대현

순수 함수형 프로그래밍으로 프론트엔드 웹앱을 만드는 Elm 프로그래밍 언어 가이드 문서를 3시간만에 다 공부합니다.

Basic

elm, 함수형 프로그래밍, SPA

순수 함수형 프론트엔드 언어 Elm 가이드

김대현

Web app built with React Hooks

What you will learn!

This lecture! 📖

React Hooks?

Who would benefit from learning this? 📐

Make it yourself! 📜

Expected Questions Q&A 💬

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

kwangsung's other courses

Similar courses

Recommended for
these people

Hello
This is