🫠
useStateを理解「基礎編」
はじめに
Reactを触り始めてから１年弱。今まで何となくで使ってきたフック達をこの記事を通してちゃんと理解していきたいと思います！
useStateとは
useStateはReactHooksのうちの一つで、関数コンポーネント内でState（状態）を持たせることができる関数です。
構造は下記の通りとなります。
const [状態変数, 更新関数] = useState(初期値);
-
状態変数
現在の状態を保持し、これを使ってコンポーネント内でstateを参照します。 -
更新関数
新しい値を引数として受け取り、現在の値を更新します。 -
初期値
最初に設定する値
useStateの基礎的な使い方
const Hoge =()=> {
const [count,setCount]=useState(0);
const increment =()=> {
setCount(count + 1);
}
return(
<div>
<p>Count:{count}</p>
<button onClick =(increment)>Increment</button>
</div>
);
}
export default Hoge;
解説
const [count,setCount]=useState(0);
- useStateフックを使用して、countとsetCountという状態変数と更新関数を定義。初期値には0を設定。
const increment =()=> {
setCount(count + 1);
}
- incrementという名前の関数を定義しており、setCount関数を呼び出してcountの値を1増加させます。
<div>
<p>Count:{count}</p>
<button onClick =(increment)>Increment</button>
</div>
- onClickイベントで、incrementを呼び出すことで{count}の値を更新して表示させます。
つまり、ユーザーがボタンをクリックするたびに、incrementという名前の関数を通じてuseStateの値が更新されていきます。
boolean値を使ったパターン
const Hoge =()=> {
const [isOpen,setOpen]= useState(false);
const open =()=> {
setOpen(isOpen => !isOpen);
}
return(
<div>
<p>Status:{isOpen ? 'ON':'OFF'}</p>
<button onClick={open}>Open</button>
</div>
);
}
export default Hoge;
解説
const [isOpen,setOpen]= useState(false);
useStateフックを使用して、isOpenとsetOpenという状態変数と更新関数を定義。初期値にはfalseを設定。
const open =()=> {
setOpen(isOpen => !isOpen);
}
- 現在の値を反転させています。つまり、isOpenがtrueの場合はfalseに、falseの場合はtrueに変更しています。
<div>
<p>Status:{isOpen ? 'ON':'OFF'}</p>
<button onClick={open}>Open</button>
</div>
onClickイベントでopenを呼び出すことで、isOpenがtrueであれば、'ON'、falseであれば'OFF'表示します。
ジェネリクスを使ったパターン
type Person = {
name:string;
age :number;
}
const Hoge:FC =()=> {
const[person,setPerson] = useState<Person>({name:'',age:0});
const updatePerson = (newPerson:Person)=> {
setPerson(newPerson);
};
return(
<div>
<p>Name:{person.name},Age:{person.age}</p>
<button onClick={() => updatePerson({ name: 'Alice', age: 25 })}>
Update Person
</button>
</div>
);
};
export default Hoge;
解説
const [person, setPerson] = useState<Person>({ name: '', age: 0 });
- personとsetPersonという状態変数と更新関数を定義。ここでジェネリクス(Person)を使って、この状態がPerson型であることを明示します。初期値には、空のnameとageには0を設定。
const updatePerson = (newPerson: Person) => {
setPerson(newPerson);
};
- 新しいPersonオブジェクトを受け取って、useStateで設定したsetPerson関数を呼び出してpersonの値を更新します。
return (
<div>
<p>Name: {person.name}, Age: {person.age}</p>
<button onClick={() => updatePerson({ name: 'taku', age: 100 })}>
Update Person
</button>
</div>
);
- ボタンがクリックされると、personの値が更新され、新しい値が表示されます。
最後に
今回は、useStateの基本的な使い方から始めて、boolean値の管理、そしてジェネリクスを利用した型指定までを学んでみました。ReactHooksには、useState以外にもuseEffect、useContext、useReducerなど、多くのフックがあります。冒頭にも言いましたが、私はReactを学習し始めてからReactHooksを何となくで使用しておりました。実案件に携わることで、各フックの本質を知りたいと思い今回の記事を書かせていただきました。まずは基礎編ということで、基礎的なuseStateの使い方を学びましたが、今後は他のReactHooksの記事に加え、応用編も書いていきたいと思います！
引用
Discussion