Reactを基本からまとめてみた【10】【React Hook (useState)③】

はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Reactの学習した事を言語化し、認識の深化による備忘録として記載。

useStateとは

関数コンポーネント内でstateを保持するためのフック。

フック(Hookとは)

React16.8で追加された新機能で、関数コンポーネントにstateやライフサイクルといったReactの機能を"接続する(hook into)"ための関数のこと。

useStateを使うと何ができるのか

useStateを用いることで、コンポーネントに状態(state)を持たせることができる。
状態(state)とは、コンポーネントに管理され、プライベートであるべき値のこと。

useStateの使い方

sample.js

1.useStateによるstateの宣言
const [state:現在の状態, setState:更新関数] = useState(initialState:初期値)

2.stateの更新
setState:更新関数(newState:新しい値)

3.具体例
const [messeage, setMesseage] = useState('Torahack is comment')
const [likes, setLikes] = useState(0)
const [isPublished, setIsPublished] = useState(false)
setIsPublished(true)

引数を使って更新する

sample.js

//入力ホームでよく使うソースコード
import React, {useState} from 'react';

const TextInput = () => {
 const [name, setName] = useState('')

const handleName = (event) => {
 setName(event.target.value)
}
//onChangeイベントでhandleName関数に渡す
//handleName関数のパラメータであるeventを更新関数に渡す
 return (
  <input
    onChnage={(event:onChangeイベントの戻り値) => handleName(event)}
    type={'text'}
    value={name}
  />
 );
};

prevStateを活用する

prevState とは

以前の状態 にアクセス・参照して 値を変更する こと。

sample.js

//useStateの更新関数で使える特殊なprevState
import React, {useState} from 'react';
//prevStateは更新前のstate
const Counter = () => {
 const [count, setCount] = useState(0)
 const countUp = () => {
  setCount(prevState => prevState +1)
}
 const countDown = () => {
  setCount(prevState => prevState -1)
}
//prevStateは更新を加えてreturn
  return (
   <div>
    <p>現在のカウント数:{count}</p>
    <button onClick={countUp}>up</button>
    <button onClick={countDown}>Down</button>
   </div>
　);
};

ON/OFFを切り替えるボタン

sample.js

import React, {useState} from 'react';

const ToggleButton = () => {
  const [open, setOpne] = useState(false)
  
  const toggle = () => {
  setOpen(prevState => !prevState)
}
//prevStateで受け取った値を!で反転してreturnする
 return (
  <button onClick={toggle}>
//参考演算子によってopenがtrune/falseで表示を切り替える
    {open ? 'open':'close'}
  </button>
);
};
export default ToggleButton;

参考サイト

[#07 新・日本一わかりやすいReact入門【基礎編】頻出するuseStateのケース3選]
(https://www.youtube.com/watch?v=7MzVcLAtl8g&t=393s)
[(React) prevState について]
(https://ratio.ym-tane.com/development/react-prevstate/)