Ohtani

web制作を専門にやっているエンジニアです。自己学習のまとめや振り返りであったり日常の…

Ohtani

web制作を専門にやっているエンジニアです。自己学習のまとめや振り返りであったり日常のことを書いていきます

useEffect1

毎日投稿の予定だったのに 早速ずれてきている… とりあえず今回のまとめ useState は State の更新時にコンポーネントが再レンタリングされ 関数コンポーネントが最初から実行される。 それに対し useEffect はある値が変わったとき (画面の読み込み時や特定の State 等)に限り処理を実行する。 useEffect の第二引数に[]を設定すると コンポーネントを表示した初回のみ実行する。 第二引数に何も設定しないと全ての State に反応して どの

Ohtani

    • 勉強内容:useState3

      この記録も3日目です(๑>◡<๑) 三日坊主を避けるべく明日も投稿頑張ろう！ import { useState } from 'react';type ProductsType = { id: number; name: string;}[];const UseState3 = () => { const [products, setProducts] = useState<ProductsType>([]); const newProducts = () =>

      Ohtani

      • 勉強内容:useState2

        気づいたら日付が変わってた٩( 'ω' )و いっぱい書こうとすると挫折するので 今日も無理せず少なめです import { useState } from 'react';type NameType = { first: string; last: string;};const UseState2 = () => { const [name, setName] = useState<NameType>({ first: '', last: '' }); retur

        Ohtani

        • 勉強内容:useState1

          コンポーネントは頭文字を大文字で作成するstate の変数はコンポーネントのレンダリングごとに一定。 なのでレンダリング時値が 0 の場合はそれを 1 にするという処理が繰り返されるため関数を 2 つ書いても 1 しか増えない。 なのでカッコ内に関数を書いてその関数の引数に更新直前の state の値を渡すことでその値に 1 を足すことができて今回の場合だと 2 づつ増えた

          Ohtani

        useEffect1

        Ohtani