BEST

Front-end

[React 2部] 高度なトピックとフック

Name: [React 2部] 高度なトピックとフック
Price: 53900 KRW
Rating: 4.9 (30 reviews)

いよいよReactの仕組みが本当に「見えてくる」ようになります。高度な概念とHooks、最も簡単かつ正確に学んでみましょう。

（4.9）受講レビュー 30件

受講生 762名

jeonghwan

실습 중심

실무

핵심원리

React Context

react-hooks

React

JavaScript

Web Application

学習した受講者のレビュー

受講後に得られること

リアクトコンポーネント設計技法
React 高度なテーマと活用
リアクトフック(Hooks)

リアクトの高級テーマとフックをしっかりお知らせします。

この講義の目標

「リアクトとして考える」に基づくコンポーネント設計技術の習得
コンタクト、レフ、高次コンポーネント、制御コンポーネントなど、パート1で扱わなかったリアクトの高度なトピックについて
基本フック、追加フックなど、実務でよく使う6つのフックを理解

講義の特徴

リアクトコアの概念を直接作成しながら構造を理解する
配信アプリケーションを作成し、実務レベルのリアクト使用法を訓練

主な内容

リアクトで考える
- 第1部授業のまとめ、実習環境構成、成果物紹介
- メンテナンス可能なコンポーネントの設計と実装
高度なトピック
- リアクトコンタクト、高次コンポーネントパターン、レフ、ポータルについて
- これを活用したルータ、ダイアログモジュールの開発
フック1
- クラスと関数コンポーネントの比較、フック登場の背景
- 状態フック、付随効果フック、コンタクトフックの理解と活用
フック2
- 制御コンポーネント、これを活用したフォームモジュールの開発
- レフック、リデューサフック、メモ化フックの理解と活用

授業資料

講師紹介

キム・ジョンファン

ウェブ技術を学び整理するのが好きな実務開発者

Web技術と開発者としての考えを込めた技術ブログを運営しています。

キム・ジョンファンブログ

講義を見る学習した技術と実務で学んだノウハウを集めて発表や講義形式で共有します。

エレガントな兄弟のフロントエンド開発者として働きます。

受講生のための質疑応答

Q. 非専攻者も聞ける講義ですか？

いいえ。

Q. 前の授業を必ず受講しなければなりませんか？

はい、パート1の授業の延長なので、前の内容を十分に理解してから受講することをお勧めします。

Q. なぜリアクトを学ぶべきですか？

最近の採用市場では、現代のWebフレームワークの知識を持つ開発者を探しています。

Q.リアクトを学ぶと何がいいですか？

ユーザーインターフェース開発に関する共通の問題をリアクトがかなり部分的に解決してくれます。

Q. 講義受講前準備するものはありますか？

一度でもWeb開発について経験してこそ、授業を聞く意味があります。

Q. 授業内容はどのレベルですか？

リアクト公式文書の高度なガイドとフックをもとに準備した内容です。

Q. 受講に関する注意事項はありますか？

レッスンで使用するツールは4つあります。

以前の講義

[リアクトパート1]作成、比較、学習するリアクト

こんな方に
おすすめです

学習対象は
誰でしょう？

コンポーネント設計能力を備え、ワンランクアップした開発を夢見る方々
Reactの使い方だけでなく、構造と原理を学び競争力のある開発者になりたい方々
サードパーティライブラリの動作原理を理解し、適切に活用できる能力を身につけたい方々

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

Reactの基本概念、またはReactの1部講義レベルの理解

こんにちは
です。

13,980

受講生

884

受講レビュー

595

回答

4.8

講座評価

講座

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

カリキュラム

全体

167件 ∙ (19時間 47分)

セクション 1．1編。リアクトで考える

42件 ∙ (4時間 22分)

セクション 2．2編。高度なトピック

44件 ∙ (5時間 3分)

43. [2.1章コンタクト] 2.1.1制限
05:21
44. [2.1章コンタクト] 2.1.2イベントエミッタ
10:12
45. [2.1章コンタクト] 2.1.3コンタクト
14:57
46. [2.1章コンタクト] 2.1.4 プロバイダーと消費者
13:04
47. [2.1章コンタクト] 2.1.5活用
07:40
48. [2.1章コンタクト] 2.1.6中間定理
03:23
49. [2.2章ルーター1] 2.2.1背景
06:46
50. [2.2 ルーター 1] 2.2.2 ルートに応じたコンポーネントのレンダリング
09:21
51. [2.2章ルーター1] 2.2.3 Link
07:02
52. [2.2 ルーター 1] 2.2.4 Router
14:49
53. [2.2 ルーター 1] 2.2.5 Routes
04:31
54. [2.2章ルーター 1] 2.2.6 Route(実習)
04:57
55. [2.2 ルーター 1] 2.2.7 Route（プール）
11:52
56. [2.2章ルーター1] 2.2.8中間定理
04:40
57. [2.3章ルーター2] 2.3.1アドレスウィンドウアドレスを変更する
07:21
58. [2.3章ルーター2] 2.3.2 後/前へ(実習)
05:34
59. [2.3章ルーター2] 2.3.3 後/前へ(プール)
06:54
60. [2.3章ルーター2] 2.3.4プログラム的にアドレス変更（実習）
02:52
61. [2.3章ルータ2] 2.3.5プログラム的にアドレス変更（プール）
03:05
62. [2.3章ルーター2] 2.3.6高次コンポーネント
15:52
63. [2.3 ルーター 2] 2.3.7 withRouter と navigate
11:50
64. [2.3章ルーター2] 2.3.8 match（実習）
01:43
65. [2.3章ルータ2] 2.3.9 match（プール）
03:12
66. [2.3章ルーター2] 2.3.10 params（実習）
04:36
67. [2.3章ルータ2] 2.3.11 params（プール）
07:30
68. [2.3章ルーター2] 2.3.12中間定理
04:23
69. [2.4章ダイアログ1] 2.4.1 Dialog
06:22
70. [2.4章ダイアログ1] 2.4.2レイアウトコンタクト
10:59
71. [2.4章ダイアログ1] 2.4.3プログラム的にダイアログを制御する
04:49
72. [2.4章ダイアログ1] 2.4.4 withLayout(実習)
01:55
73. [2.4章ダイアログ1] 2.4.5 withLayout(プール)
07:29
74. [2.4章ダイアログ1] 2.4.6ダイアログの組み合わせ（実習）
07:49
75. [2.4章ダイアログ1] 2.4.7ダイアログの組み合わせ（プール）
06:34
76. [2.4章ダイアログ1] 2.4.8中間定理
02:35
77. [2.5章ダイアログ2] 2.5.1 Dialogの問題
03:12
78. [2.5章ダイアログ2] 2.5.2リアクトポータル
12:53
79. [2.5章ダイアログ2] 2.5.3 Dialogのトラブルシューティング
04:24
80. [2.5章ダイアログ2] 2.5.4 ErrorDialog、alert
08:17
81. [2.5章ダイアログ2] 2.5.5 PaymentSuccessDialog, confirm(実習)
02:41
82. [2.5章ダイアログ2] 2.5.6 PaymentSuccessDialog, confirm(プール)
10:27
83. [2.5章ダイアログ2] 2.5.7 Dialog改善、レフ（実習）
02:16
84. [2.5章ダイアログ2] 2.5.8 Dialog改善、レフ（プール）
06:34
85. [2.5章ダイアログ2] 2.5.9中間定理
02:55
86. 2編最終まとめ
08:19

セクション 3．3編基本フック

46件 ∙ (5時間 35分)

87. [3.1章クラス/関数コンポーネント] 3.1.1新しいプロジェクト
07:20
88. [3.1章クラス/関数コンポーネント] 3.1.2クラスと関数
10:43
89. [3.1章クラス/関数コンポーネント] 3.1.3リアクトコンポーネント
16:48
90. [3.1章クラス/関数コンポーネント] 3.1.4比較
08:09
91. [3.1章クラス/関数コンポーネント] 3.1.5リアクトフック
03:38
92. [3.2章ステータスフック] 3.2.1問題を提起
06:07
93. [3.2章ステータスフック] 3.2.2一次実装
13:51
94. [3.2章ステータスフック] 3.2.3マルチステータス管理
04:30
95. [3.2章ステータスフック] 3.2.4二次実装
05:45
96. [3.2章ステータスフック] 3.2.5もっと簡単に
06:56
97. [3.2章ステータスフック] 3.2.6役割
04:10
98. [3.2章状態フック] 3.2.7中間整理
02:58
99. [3.3章付随効果フック] 3.3.1純粋関数とコンポーネント
05:40
100. [3.3章付随効果フック] 3.3.2遅延実行
12:10
101. [3.3章付随効果フック] 3.3.3依存性
08:48
102. [3.3章付随効果フック] 3.3.4多重付随効果
09:55
103. [3.3章付随効果フック] 3.3.5多重依存性
05:19
104. [3.3章付随効果フック] 3.3.6 一度だけ実行する付随効果
05:07
105. [3.3章付随効果フック] 3.3.7付随効果の整理
11:44
106. [3.3章付随効果フック] 3.3.8の役割
05:20
107. [3.3章付随効果フック] 3.3.9中間整理
03:46
108. [3.4章フック活用 1] 3.4.1 メニュー一覧画面
16:55
109. [3.4章フック活用 1] 3.4.2 カート画面（実習）
02:06
110. [3.4章フック活用 1] 3.4.3 カート画面（プール）
15:13
111. [3.4章フック活用 1] 3.4.4 注文履歴画面（実習）
01:31
112. [3.4章フック活用 1] 3.4.5 注文履歴画面（プール）
05:58
113. [3.4章フック活用 1] 3.4.6 変わった点
06:33
114. [3.4章フック活用 1] 3.4.7 中間整理
03:11
115. [3.5章コンタクトフック] 3.5.1 高次コンポーネントとフック
07:17
116. [3.5章コンタクトフック] 3.5.2 useContenxt
19:29
117. [3.5章コンタクトフック] 3.5.3 役割
03:19
118. [3.5章コンタクトフック] 3.5.4 中間整理
03:05
119. [3.6章フック活用 2] 3.6.1 Myrouter: Router
13:19
120. [3.6章フック活用 2] 3.6.2 MyRouter: Routes, Route, Link
04:43
121. [3.6 フックの活用 2] 3.6.3 MyRouter カスタムフック
06:36
122. [3.6章フック活用 2] 3.6.4 MyRouter活用(実習)
02:40
123. [3.6章フック活用 2] 3.6.5 MyRouter活用（プール）
12:51
124. [3.6章フック活用 2] 3.6.6 MyLayout: Layout(実習)
03:05
125. [3.6章フック活用 2] 3.6.7 MyLayout: Layout(プール)
03:50
126. [3.6章フック活用 2] 3.6.8 MyLayout: カスタムフック（実習）
02:10
127. [3.6章フックの活用 2] 3.6.9 MyLayout: カスタムフック（プール）
09:14
128. [3.6章フック活用2] 3.6.10 MyLayout活用(実習)
01:45
129. [3.6章フック活用 2] 3.6.11 MyLayout活用(プール)
14:17
130. [3.6章フック活用 2] 3.6.12 変わった点
05:05
131. [3.6章フック活用 2] 3.6.13 中間整理
03:49
132. 3編最終まとめ
08:53

セクション 4．4本追加フック

35件 ∙ (4時間 45分)

講座掲載日:

最終更新日:

受講レビュー

全体

30件

4.9

30件の受講レビュー

kimhonor3160
受講レビュー 13
∙
平均評価 5.0
5
32% 受講後に作成
1部をとても満足して受講した記憶があって今回の講義も悩みなくすぐ決済しました！結論はやっぱり満足ですね！何より講師様が私だけ感じたかわかりませんが可愛いですｗｗｗｗｗ目覚めのように装備自慢をされる様子と中途半端な意図しないエラーに遭遇した時の御言葉～同じチュチュたちに硬く講義を見る途中でリフレッシュになりますね！これからも良い講義をたくさんお願いします。ありがとうございます〜
- jeonghwan
  知識共有者
  1部に続いて2部講義も満足していただき幸いです。内容が重いかもしれないと思いました。授業内容以外にも、こんな点をよく見てくれてありがとう。
jihoson94
受講レビュー 16
∙
平均評価 5.0
5
100% 受講後に作成
内容は本当にきれいで深いです。
- jeonghwan
  知識共有者
  良い言葉本当にありがとうございます。
walter
受講レビュー 2
∙
平均評価 5.0
5
31% 受講後に作成
これは革新だ。
- jeonghwan
  知識共有者
  レビューありがとうございます。
wingwin19884720
受講レビュー 25
∙
平均評価 4.2
5
62% 受講後に作成
Reactのapi들의 내부 사정을 알려주셔서 프레임워크 이해도가 올라간 느낌입니다. 감사합니다.
- jeonghwan
  知識共有者
  Reactの内部動作を理解すると、フレームワーク全体を見る目が本当に大きく変わるようですね。このような部分でお役に立てて嬉しく、やりがいも大きいです。レビューを残していただきありがとうございます。
2projlee1369
受講レビュー 3
∙
平均評価 4.3
4
31% 受講後に作成

期間限定セール、あと8日日で終了

￥53,900

30%

￥9,635

jeonghwanの他の講座

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

堅牢なJSソフトウェアの作り方

jeonghwan

同じ機能を作成する場合でも、JavaScript の文法を始めたばかりのジュニア開発者と経験豊富なシニア開発者のコードは、かなり異なります。もちろん、結果物は同じです。後者のコードが認められる理由は、構造化された設計と変更に対応できる拡張性にあるでしょう。この講義では、そのような優れたコードを作成する方法について説明します。

중급이상

Software Test, TDD, jasmine

堅牢なJSソフトウェアの作り方

jeonghwan

ウェブ開発の核心、HTTP完璧マスターしよう！

jeonghwan

HTTPの基本からデータ要求、リアルタイム通信、セキュリティ、そしてパフォーマンス最適化まで、Web開発者が必ず知っておくべきネットワーク知識を学びましょう。

초급

Ajax, https, cors

ウェブ開発の核心、HTTP完璧マスターしよう！

jeonghwan

[React 第1部] 作って比較しながら学習するReact

jeonghwan

今こそReactをしっかり学びましょう。純粋なJavaScript方式と比較しながら、Reactの特徴と役割を最も簡単に理解できる講座！

초급

React, MVC, JavaScript

[React 第1部] 作って比較しながら学習するReact

jeonghwan

フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)

jeonghwan

すでに構築済みの開発環境を理解できます。最初から自分で開発環境を構築できます。

중급이상

Node.js, Webpack, Babel

フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)

jeonghwan

トレロ開発で学ぶVuejs、Vuex、Vue-Routerフロントエンドの実戦技術

jeonghwan

他のWebアプリケーションを私の手で実装することで、Vuejsの中級技術（Vuex、Vue-Router、Http）を学ぶことができます。パブリッシングの結果物、APIサーバーとドキュメントするなどをあらかじめ構成したため、コラボレーションする方法も体験できる講義です。

중급이상

JavaScript, Vue.js

トレロ開発で学ぶVuejs、Vuex、Vue-Routerフロントエンドの実戦技術

jeonghwan

実習UI開発で学ぶ純粋なjavascriptとVueJS開発

jeonghwan

純粋なJavaScriptとVueJSというUIライブラリを使用してショッピングモールの検索ページを作成し、VueJS開発学習を進めます。純粋なJavaScriptとVueJsで開発を進め、各開発の違いとMVC、MVVMデザインパターンの違いも学ぶことができます。

초급

JavaScript, Vue.js

実習UI開発で学ぶ純粋なjavascriptとVueJS開発

jeonghwan

テスト主導開発（TDD）で作るNodeJS APIサーバー

jeonghwan

この講義では、Javascript言語でバックエンド開発ができるNodeJSを学習し、テスト主導開発（TDD）方式でNodeJSを利用してAPIサーバー開発を行うことができます。また、NodeJSの代表的なWebフレームワークExpressJSの基本原理を理解し、モバイルやWebサービスで使用するREST APIの開発方法を学ぶことができます。

초급

TDD, Node.js, Express

テスト主導開発（TDD）で作るNodeJS APIサーバー

jeonghwan

似ている講座

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

[React 第1部] 作って比較しながら学習するReact

jeonghwan

今こそReactをしっかり学びましょう。純粋なJavaScript方式と比較しながら、Reactの特徴と役割を最も簡単に理解できる講座！

초급

React, MVC, JavaScript

[React 第1部] 作って比較しながら学習するReact

jeonghwan

手で熟すNext.js - 公式ドキュメントを見る

hajoeun

公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！

초급

Next.js, next.js13, React

手で熟すNext.js - 公式ドキュメントを見る

hajoeun

関数型プログラミングとJavaScript ES6+アプリケーション

mduniv

このコースは、関数型プログラミングとJavaScript ES6 +のシリーズコースで、さまざまなアプリケーションケースをカバーしています。

중급이상

JavaScript, Functional Programming

関数型プログラミングとJavaScript ES6+アプリケーション

mduniv

ES6文法と組み合わせたモダンJavascript（JavaScript）高度なPart.2

usefulit

JavaScriptプログラミング言語を最新のES6文法で学習するように企画されたコースです。

중급이상

JavaScript, ES6

ES6文法と組み合わせたモダンJavascript（JavaScript）高度なPart.2

usefulit

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

중급이상

React, react-usememo, Tech Interview

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

本格的に学ぶ JavaScript: オブジェクト指向プログラミングマスター & 戦略型AI 三目並べ実践 Part2 [中級編]

nhcodingstudio

📌 この講義は、戦略型AI三目並べプロジェクトから始まり、オブジェクト指向プログラミングの核心概念まで実践例で完成させるカリキュラムです。ゲーム実装でロジック設計とAI戦略思考を訓練し、続いて継承、コンポジション、委譲、カプセル化といったOOP設計技術を直接コードで経験します。実際のプロジェクトで文法を超えて「設計する開発者」として成長したい方におすすめします。

초급

JavaScript, HTML/CSS, oop

本格的に学ぶ JavaScript: オブジェクト指向プログラミングマスター & 戦略型AI 三目並べ実践 Part2 [中級編]

nhcodingstudio

フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

John Ahn

この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

초급

React, Firebase, Web Application

フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

John Ahn

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

React + TypeScriptを活用して実務感覚で「タスク管理アプリ（ToDo List）」を直接作るプロジェクト中心のコースです。単純に文法を学ぶだけでなく、コンポーネント構造設計 → 状態管理 → 型適用 → 機能実装 → ローカルストレージ連携 → デプロイまで実際のサービス形態で完成させながらTypeScriptの活用感覚を身につけることができます。

초급

HTML/CSS, JavaScript, React

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

Firebase シリーズ #1：ソーシャルログイン・電話番号・位置認証完全ガイド

dakgangjung123

🔥 HTML + Tailwind CSS + ピュアJavaScriptだけで完成させるFirebaseユーザー認証！ソーシャルログイン・電話・位置認証まで、複雑なバックエンドなしに簡単かつ迅速にアカウントシステムを構築します。

초급

HTML/CSS, JavaScript, Firebase

Firebase シリーズ #1：ソーシャルログイン・電話番号・位置認証完全ガイド

dakgangjung123

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

この講座では、代替不可能なNFT（Non Fungible Token）を活用して、非アプリを作成することができます。

중급이상

Web Application, Blockchain, NFT

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

キーワードと実習で読むWebフロントエンド基礎概念総まとめ

ronpark [DEL] 251126125407

Web開発入門者のためのコンパス、あなたがWebフロントエンドについて知らないことを発見し、体系的に進むためのガイド講義です。

입문

Network, Google Chrome, Chrome DevTools

キーワードと実習で読むWebフロントエンド基礎概念総まとめ

ronpark [DEL] 251126125407

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

コロナマップ開発者との指導サービスの作成1

donghunee

コロナマップ開発者が知らせる指導サービス作り講義です。

초급

Node.js, Web Application, Express

コロナマップ開発者との指導サービスの作成1

donghunee

[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

codefactory

JavaScript、TypeScriptに続いて、次はバックエンド開発です。NestJSを使用してREST APIバックエンド開発、Socket IO開発および配布を行うことができます。

초급

NestJS, REST API, backend

[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

codefactory

クリーンアップ JavaScript: ベース構築!

tonextday

考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

초급

JavaScript, Interview, Tech Interview

クリーンアップ JavaScript: ベース構築!

tonextday