Reactのコーディングメモ（useEffect）

Javascriptのモジュールについて

プログラムをモジュールという単位に分割する．原則としては1ファイル = 1モジュールが基本的．1ファイルから複数のモジュールをexportしたいときにはエントリポイントよく使う．

export default Title;

defaultとしてexportされているのでエイリアスをつける．

export {default as Title} from './Title' 

useStateの使い方

const [state, setState] = useState(initialState)

jsxでのコメントの方法

{/* コメントアウト */} 

Reactにおける3種類のライフサイクル

Mounting（≒ Start）：初期化・レンダリング・マウント後の処理
Updating：レンダリング・更新後の処理
Unmounting（≒ end）：アンマウント後の処理

useEffectの処理について

毎回実行：useEffect

useEffect(() => {
  console.log("useEffect: ", count)
})

初回のレンダリング時にのみ実行

useEffect(() => {
　console.log("useEffect [] : ", count)
}, [])

count変更時に実行されるuseEffect

useEffect(() => {
  console.log("useEffect [count] : ", count)
}, [count])

クリーンアップ処理

必要がなくなったらクリーンアップ関数を使う．

useEffect(()=> {
  return() => { // cleanup
    console.log('Unsubscribe database')
  }
})

FetchとRefetch

APIやデータベースから非同期通信でデータを取得（Fetch）する．
特定の値が変わったらデータを再取得（Refetch）する．

useEffect(() => {
  fetch('https://api.github.com/users/' + id)
    .then(res => res.json())
    .then(data => {
      console.log(data)
    })
    .catch(error => {
      console.error(error)
    })
}, [id])