制御された入力（Controlled Inputs）

テキスト入力には1つの問題が生じます。ユーザーがボックスに文字を入力しますが、コンポーネントも状態（state）を持っています。では、テキストを管理しているのはどちらでしょうか？Reactにおける答えは「stateが管理する」です。これは制御コンポーネント（controlled input）と呼ばれます。

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

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

2つのワイヤがループを作ります：

• value={name}：ボックスは常に状態を表示します
• onChange：キー入力ごとにボックスの現在のテキストである e.target.value を使用してセッターを呼び出します

そのため、入力すると状態（state）が更新され、状態が再レンダリングされ、テキストボックスに新しい状態が表示されます。このメリットは、テキストが変数内に存在するため、ページの他の場所で検証、変換、クリア、または表示できるようになることです。