🐥 React × TypeScript でのメモアプリ作成 #3
作成日: 2022/02/01
1

学習メモ

関数コンポーネントとクラスコンポーネント

Hooks が実装される前は、クラスコンポーネントを使う必要があったが
今は関数コンポーネントを使うことが推奨されている

参考リンク:

useStateを使って数字をカウントさせるときの挙動について

useStateを使って数字をカウントアップするような実装をしたいとき、
教材では以下のような記述になっていることが多いが

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

const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);

以下が正しい書き方

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

const increment = () => setCount((prevCount) => prevCount + 1);
const decrement = () => setCount((prevCount) => prevCount - 1);

参考リンク:
【React】そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか

所感

参考にしようとしたコードがクラスコンポーネントで書かれていたため
関数コンポーネントとの書き方の違いを調べていました。

また、ボタンを押したときにカウントアップさせるようなやり方を考えていましたが
Reactではmapメソッドを使うことを思い出しました。次回はmapでの実装をすすめます。