Zenn
🌐

React Hooks: useState入門

に公開
Next.js
React
TypeScript
React Hooks
webdevelopment
tech

1.はじめに

こんにちはmikan0131です。
みなさん、React Hooksを知っていますか？
これは、関数コンポーネントの中で、状態やライフサイクルを扱うための機能…らしいですが、あんまりピンときませんね。
多分こういうのはやったほうが早いので、早速、useState()という状態を管理するHookを使ってみましょう。

2.useStateについて

このHookは、

const [状態, 更新関数] = useState(初期状態)

というように使います。
ここでの「状態」と「更新関数」はリンクしており、「更新関数」を実行すると、「状態」を操作することができます。

実装

useState()を使ったコンポーネントを書いてみましょう。

import { useState } from 'react'
type CounterProps = {
    initialValue: number
}

const Counter = (props: CounterProps) => {
    const {initialValue} = props　// porpsに渡された値を分解して、initialValueに代入
    const [count, setCount] = useState(0) // *1

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount((c) => (c - 1))}>-</button>
            <button onClick={() => setCount((c) => (c + 1))}>+</button>
        </div>
    )　// *2
}

export default Counter

コード解説

useState()の部分（*1の部分）を見てみます。この時、countがnumber型の状態を管理する変数となり、setCountでcountを編集することが可能になります。countとsetCountはリンクしてるわけです。
そして、最後にHTMLを返している部分（*2の部分）では、ボタンが押されたとき、setCount関数を呼ぶようになっています。例えば、onClick={() => setCount((c) => (c + 1))}の時、このボタンが押されると、countがcount + 1となり、countに1加算されます。

練習問題

実戦練習です！テキストボックスの中に打ち込んだ文字をボタンを押すと表示するコンポーネントを作ってみましょう！

解答・解説

模範解答
import { useState} from 'react'

type inputTextProps = {
    initialText: string;
}

const TextView = (props: inputTextProps) => {
    const { initialText } = props
    const [text, setText] = useState(initialText)

    const textChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value)
    }
    
    return (
        <div>
            <input type='text' onChange={textChange} />
            <p>Text: {text}</p>
        </div>
    )
}

export default TextView
解説

まず、[text, setText]にuseState(initialText: string)を代入することで、textとsetTextを結びつけます。
そして、この関数…

const textChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value)
}

これは、input要素のonChange代入することで、inputイベントの入力に変更があった時、その時に入力されていた文字列をsetTextでtextに代入するようになっています。
なので、これを模範解答のようにonChange={textChange}とすると、テキストボックスに変更があった時、setTextが実行され、再描画を行い、<p>Text: {text}</p>の内容も変更されます。

3.終わりに

いかがだったでしょうか？
練習問題は少し特殊な関数を使ったので、難しかったかもしれませんが、useStateはこれからよく出てくるHookになります。
今のうちにマスターしておくと後々楽になりますよ！
この記事を最後まで読んでくださり、ありがとうございました！
ほかの記事も読んでくれると嬉しいです！それではまた…

Discussion