リアクトフック（React Hook）で作成するWebアプリ

Name: リアクトフック（React Hook）で作成するWebアプリ
Price: 22000 KRW

モダンなフロントエンドフレームワークの中で最も人気のあるReact（リアクト）が、学ぶのは難しいです。これを解決するためにフックが出ました。このレッスンでは、フックを使ってReactを簡単に学ぶのに役立ちます。

（4.0）受講レビュー 5件

受講生 57名

kwangsung

React

Web Application

こんなことが学べます

Reactの基礎
React Hookの使い方

ToDo管理Webアプリ開発✅へ
簡単で楽しく学ぶリアクトフック！

この講義は！ 📖

React Hook？

フックとは、関数型コンポーネントでも
クラス型コンポーネントの機能を使用できるように
React 16.8バージョンから導入された機能です。

現在、フロントエンドフレームワークの中で最も人気のあるフレームワーク、リアクトで最近関数型開発方法を可能にするフックを発表しました。フックを使用すると、再利用可能なロジックを簡単に作成でき、より簡単に機能を実装できます。

このレッスンでは、リアクトフック（React Hook）でTo-do List Webアプリを作成します。以下のようなタスク管理アプリをフックを介して関数型開発方法で開発することができます。

誰が学べばいいですか？ 📐

_{リアクト（React）
簡単で楽しい
近づきたい方}

_{基本JavaScriptの
次のステップ
学習したい方}

_{フロントエンド開発者
なりたい
開発者就職準備生}

技術は学びましたが、どこにどのように使われるのか感が来なかった方のための講義です。
各段階を開発可能なレベルに分け、段階別にじっくり身につけて活用できます。
パートごとに機能を自分で作って、より高い学習効果を得てみてください！

自分で作ってみてください！ 📜

_{リアクトフック（React Hook）では、上記のようなToDo管理アプリを開発できます。（ショートカット）}

_{基本に忠実な説明として
初心者でも簡単
フォローできます。}

_{実際にリアクトフック
Webアプリ開発中
どのように使われるかを学びます。}

_{簡単でシンプル
開発環境設定のため
CodePenを使用してください。}

_{リアクト開発全体
体験できる
例を作成します。}

予想される質問 Q&A 💬

Q.リアクトを知ってこそ聞くことができますか？

この講義はリアクトの基礎をカバーします。説明をリストするのではなく、非常にシンプルなWebアプリを直接開発して、リアクトの機能を把握できるようにしました。

Q. 受講後、リアクトについてどれくらい分かりますか？

モダンなJavaScriptの学習範囲は大きく3つに分けられます。 1）動的UI 、 2）ルーターを介したページ移動、 3）サーバーとの通信。本講義ではこの中から「動的UI」を学ぶことができます。

こんな方に
おすすめです

学習対象は
誰でしょう？

JavaScriptの基本機能をお持ちの方
簡単なReact開発方法を知りたい方
React Hookを学びたい人

前提知識、
必要でしょうか？

JavaScript
HTML

こんにちは
です。

5,067

受講生

119

受講レビュー

回答

3.7

講座評価

講座

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

カリキュラム

全体

17件 ∙ (1時間 47分)

セクション 1．リアクトフック（React Hook）で作成するWebアプリ

17件 ∙ (1時間 47分)

1. 講義紹介
02:26
2. 開発環境
10:59
3. Input要素の追加
09:20
4. 状態と状態管理者
05:13
5. useState
06:30
6. Input Value, State アップデート
09:36
7. リストマップ関数の使用、キー値
08:08
8. タスクリストを追加
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

講座掲載日:

最終更新日:

受講レビュー

全体

5件

4.0

5件の受講レビュー

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

￥2,773

kwangsungの他の講座

知識共有者の他の講座を見てみましょう！

Kotlin 부터 Spring Security 까지

최광성

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

초급

Kotlin, Spring Boot, Thymeleaf

Kotlin 부터 Spring Security 까지

최광성

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

최광성

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

초급

Python, Flask, SQLAlchemy

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

최광성

마케터를 위한 SQL

최광성

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

입문

SQL

마케터를 위한 SQL

최광성

구글 알고리즘 문제 풀이

최광성

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

초급

Python

구글 알고리즘 문제 풀이

최광성

반드시 알아야 할 Tensorflow 수학

최광성

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

초급

Tensorflow

반드시 알아야 할 Tensorflow 수학

최광성

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

최광성

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

초급

Kotlin, Spring Boot

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

최광성

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

최광성

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

중급이상

CUDA

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

최광성

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

최광성

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

초급

강화학습

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

최광성

似ている講座

同じ分野の他の講座を見てみましょう！

프로젝트로 배우는 Vue.js 3

코지 코더

Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다.

초급

Vue.js, Vuex, 웹앱

프로젝트로 배우는 Vue.js 3

코지 코더

프로젝트로 배우는 React.js

코지 코더

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

초급

React, Redux, ES6

프로젝트로 배우는 React.js

코지 코더

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

Wintho

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

초급

React Native, React, ES6

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

Wintho

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

애프터캠프

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

중급이상

React, react-usememo, 기술면접

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

애프터캠프

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

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

제로초(조현영)

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

초급

React, React Native, 하이브리드 앱

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

제로초(조현영)

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

제로초(조현영)

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

중급이상

React, Redux, Node.js

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

제로초(조현영)

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

닭강정

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

초급

React, Electron, GUI

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

닭강정

Next.js 15: Full-Stack Development

구멍가게코딩단

전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 15의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다.

초급

JavaScript, React, JPA

Next.js 15: Full-Stack Development

구멍가게코딩단