ステートとは？
CoddyのReactジャーニー「基本概念」セクションの一部。レッスン 22/42。
これまでのものはすべて固定されていました。データを入れるとページが出てきて、何も変わりませんでした。実際のアプリは、変化するものを記憶します。いいねの数、開いているメニュー、検索ボックスのテキストなどです。この記憶をstateと呼びます。
Reactでは、useStateフックを使ってコンポーネントに状態を持たせます。
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
...
}1行に3つの要素：
count：現在の値setCount：値を変更する関数useState(0)：初期値
黄金律：状態に直接代入してはいけませんcount = 5 はエラーになります。count は const だからです。たとえ変更できたとしても、React はその変更を認識できません。setCount(5) は状態を変更し、コンポーネントを再レンダリングします。この再レンダリングによって画面が更新されます。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。