【React hooks】噛み砕いて解説してみた~useState編~

2 min read読了の目安(約2200字

前書き

16.8vで追加された機能であるreact hooksを理解を深めるために体系的にまとめました。

以下、本題です

useStateとは

useStateを使うことで**任意State変数の宣言ができます。**もっとわかりやすく表現すると、**関数コール内で値を保持することができます。**具体的にみた方がわかりやすいと思うので、コードで見てみましょう。

import React, { useState } from 'react'

const hoge = () => {
  // 下記のコードで`State`宣言されています。
  const [name, setName] = useState('')
}

基本形はこんなイメージです。以降から詳しく解説していきます!

useStateを使ってState宣言

基本形は下記の形です。(説明のために、必要な部分だけ切り取っています。)

const [name, setName] = useState('')
  • name:任意の変数名を宣言ができます。ここではnameにしていますが、好きな名称を設定することができます。
  • setNameState変数(name)を更新するための関数を宣言しています。
  • useState(''):引数でState変数の初期値を設定することができます。例えば、useState('佐藤')みたいに設定することもできます。

State変数を読み出す。

関数コンポーネント内で下記のように呼び出すことができます。

import React, { useState } from 'react'

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

  return(
    // 下記のように使うことができます。
    <p>私の名前は{name}です</p>
  )
}

classコンポーネントの時のようにthis.state.nameみたいにかく必要はありません。ハッピー!!

State変数を更新する

useStateで宣言した変数を更新するための関数(ここではsetState)を使ってstateを更新します。

import React, { useState } from 'react'

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

  const handleName = (e) => {
    setName(e.target.value)
  }

  return(
    <>
      <h1>{name}</h1>
      <input onChange={handleName}></input>
    </>
  )
}

export default hoge

少しだけ複雑になってしまっているので順番に解説していきます。

  • handleName:この関数の中でstateを更新するsetNameが更新されています。
  • onChange:このイベントリスナー内で実際にhandleNameを経由して値を更新しています。

useStateの全体像

【1】useStateをImport

import React, { useState } from 'react'

【2】useStateを使って、変数,更新関数を宣言

const [name, setName] = useState('')

nameが変数、setNameが更新関数ですね。

【3】変数を読み出し、更新

import React, { useState } from 'react'

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

  const handleName = (e) => {
    setName(e.target.value)
  }

  return(
    <>
      <h1>{name}</h1>
      <input onChange={handleName}></input>
    </>
  )
}

export default hoge

以上です!