[React] useEffect hook

1040 ワード
React テキストリンク

useEffect ?


Webサイトを作成する場合は、画面に表示されるデータをサーバから受信し、ステータスを変更するたびに関数を実行するか、イベントリスナーを閉じる操作を実行する必要があります.
この場合はuseEffect hookが必要です!
公式文書ではuseEffectを「reactの純関数世界から命令世界への道」と解釈している.
ここで「純粋世界」とは렌더링(Input→Output)を意味し、レンダリング以外にSide Effectを起こさなければならない脱出口としてEffectを用いることを意味する.
userEffectはSide Effectをレンダリングした後に発生します!

useEffectの使用

import { useEffect } from "react"

useEffect( 실행시킬 동작, [ 타이밍 ] )
document.addEventListener("타이밍", 실행시킬 동작)
import { useEffect } from "react"


// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
}, [value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
  // Side Effect
}, [])
4.条件文
BOJ 2493タワー