🤖

[React] stateとは？(state使い方)

2023/07/11に公開

React

state

reactでstateは本当に重要です。
stateは一体何でしょうか？

簡単に言えば変数と似た意味です。
stateに値を保存して使用することです。

まず宣言からしてみます。

import { useState } from 'react';
import './App.css'

function App(){
  let [a,b] = useState('hello world');
  return (
    <div className="App">
    </div>
  )
}

useStateを書くと

import { useState } from 'react';

が自動的にインポートされます。

一番重要な宣言部ですが

let [a,b] = useState('hello world');

従来のジャバスクリプトとは異なる姿を見ることができます。
aには「hello world」が入ることになり、
bにはbを設定する関数が入ります。（この部分は後で説明します。）

もっと直観的にコードを書いてみると

let [name, setName] = useState('kimura');

これですね。

これをnameで呼び出します。

function App(){
 
  let [name, setName] = useState('kimura');
  return (
    <div className="App">
      <div>
        <h4>{ name }</h4>
      </div>
    </div>
  )
}

出力結果

なぜstateを使うのか

普通のletに入れて使うのと同じに見えますけど
なんでわざわざ面倒くさくstateを使うんだろう。

その理由は自動再レンダリングのせいです。

stateを使うとstateの中にある変数が変わると自動的に反映されます。

頻繁に変わる名前ならstateに入れておいた方がいいです。

state

出力結果

なぜstateを使うのか

Discussion