Reactを触ってみる(useState)

はじめに

この記事は完全未経験からフロントエンドに転職し、実務に就く前に書いたものです。
勉強中のため至らないところが多いかもしれませんが、これからReactを勉強する方の一助となれば幸いです。

useStateとは

React 16.8 から追加された、Reactの機能に「接続 (hook into)」するための特別な関数(フック)の一部。
フックが導入される前はクラスを定義してstateを管理していたそうで、このタイミングでReactに取りかかれるのはある意味ラッキーかも。実際のコードを見比べると理解が浅くてもフックを使用している方がかなり簡潔に見える。

クラス

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }

    render(){
        return(JSX)
    }
}

フック

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);
  return (JSX)
}

このフックを使用したコードについて細かく分析していく。

useState(フック)の使い方

先ほど述べたようにReactの機能を使用するため使うときはReactからimportする。

useState

import React, { useState } from 'react';

import後は関数コンポーネント内で使用が可能になる。
使用方法のルールとしては関数コンポーネント内のトップレベルのみと決められているそうで、仮に条件分岐(if文)の中で定義してしまうと思わぬバグを発生してしまう恐れがある。
詳しくは公式を参照。

importしたら実際にuseStateを実行する。

useState

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

これで簡単に何ができるかと言うと
countで値の記憶、setCountで値の更新ができる
上記のコードのようなconst[]=hogehogeの書き方はReactの特別な記法ではなくJavaScriptの分割代入を使用している。
よって上記のコードが意味するものはuseStateから返される値のうち１つ目をcountに、２つ目をsetCountに代入している。
分割代入をしているだけなので変数の名前は自由につけることができるが、２つ目の変数は更新用関数が入ってくるため頭にsetをつけることが暗黙的に決まっているそう。
ちなみに useState() の引数を指定すると初期値としてcountに記憶される。
上記の場合は 0 が初期値として count に代入されている。

set関数の呼び出し

何かボタンをクリックした際にcountを更新したい場合はJSX内で以下のように記述する。

const Example = () => {

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

  return (
    <div>
       <button onClick={() => setCount(count + 1)}>   ←set関数呼び出し
         Click me
       </button>
    </div>
  )
}

これでボタンを押したタイミングでset関数が呼び出され、変数 count が更新される。
このままでは変数 count が表示されていないのでJSX内で表示できるようにする。

const Example = () => {

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

  return (
    <div>
       <p>{count}</p>  ←追加
       <button onClick={() => setCount(count + 1)}>
         ＋
       </button>
    </div>
  )
}

上記のコードを実行すると＋ボタンをクリックするたびに表示された数字が 0 から 1 ずつ上がっていくようになる。

今回は単純な useState だけですが、そのほかのフックを使いつつコンポーネントを増やして規模を大きくしていくと気をつけないといけないことが増えてくる。
そしてJavascriptの理解も必要になってくる。
ですが、初心者の方はJavascriptをガッツリやると言うより同時進行で必要に応じて知識を増やしていくのが効率が良さそう。
基本的なアロー関数やコールバックは大前提として。。。