98日目②:React HooksのuseEffect Hookについて学習する

本日はuseEffectが出てきたので、Reactの公式サイトの”Using the Effect Hook”というページで学習しました。⇒参照記事 4.Using the Effect Hook (reactjs.org公式)

「useEffect Hookとは、componentDidMountとcomponentDidUpdateとcomponentWillUnmountが一緒になったものだと考えると良い」とのこと。

useEffectを使うことによって、「Reactに対して、レンダーのあとcomponentが何かをする必要があると伝える」。とにかく、最初のレンダーや全てのアップデートが先に行われるとのことでした。

上記公式サイトではclassを使った場合とuseState, useEffect Hooksを使った場合のコードの例が掲載されているのですが、何度もthis.stateやthis.propsを繰り返さなくて良いという点でもコードが短くシンプルになっていると感じました。

useStateとuseEffectを使ったコードの例です。(上記公式サイトより)

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (

You clicked {count} times


  );
}

HooksはReactの新しい機能なので、まだまだHooksを使わない講座も多いのですが、現在の講座でuseState、useEffectを学ぶチャンスがあって良かったです。

現在使用している教材と学習時間:本日の学習時間2.0時間

Udemy:MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy

★Section8:React User Authentication

-Lec41 Load User & Set Auth Token (axios, useEffect Hook) (ここまで完了)

進捗状況:57%

学習時間2.0時間

~本日は休みにしている教材~

Udemy:The Complete Web Developer: Zero to Mastery by Andrei Neagoie

進捗状況: 92%

★参考にした本★

「React.js & Next.js超入門」掌田津耶乃 (秀和システム)

Section4-1: Reduxを使ってみよう

★参照記事★

Quiita参照記事⇒[axios] axios の導入と簡単な使い方

Reactjs公式サイト⇒ 4.Using the Effect Hook (reactjs.org公式)

関連キーワード
  • 131日目~134日目:Udemyで一番人気のGit (&GitHub) コースを修了!学習した内容・学習にかかった時間とおすすめ度をご紹介: Completed Git course by Udemy "Git Complete: The definitive, step-by-step guide to Git" by Jason Taylor: Highly recommended to both beginner & intermediate leaner
  • 121日目~130日目:Udemyで新しいReactコース学習とGit & GitHubのコースを受講し始める #100dayofcode Round 2
  • 120日目:プログラミング学習100日チャレンジの完了とこれからの学習&ブログ記事:100days of code completed & from now on
  • 119日目:完成したWebアプリケーションの公開(Devconnector deployed on Heroku)
  • 118日目:Udemy講座の感想口コミ&自分に合った講座の選び方ポイント:Mern Stack Front to Back: Full Stack React, Redux & Node.js by Brad Traversy
  • 117日目:完成!Herokuへのデプロイ成功:Heroku CLIのインストールからWebアプリデプロイまで。Herokuの使い方と、package.jsonとgitコマンドではまったところと解決方法
おすすめの記事