[React] useEffect hook

dnjstd·2021년 11월 28일
0

useEffect ?

웹사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 on off 하는 동작이 필요할 수 있다.
이 때 useEffect hook이 필요하다!

공식 문서에서 useEffect를 "React의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요" 라고 설명하고 있다!
여기서 "순수한 세계"란 렌더링(Input → Output)을 뜻하고, 렌더링 이외에 일으켜야 하는 Side Effect를 일으킬 탈출구로 useEffect를 사용하라는 의미이다.

useEffect는 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
}, [])

profile
Frontend Engineer 🌱

0개의 댓글