[React] useEffect 랜더링 순서

기본 형태

// 실행순서 : A -> B -> A
useEffect(() => {
  // 이 컴포넌트가 마운트될 때 실행되는 함수 (A)

  return () => {
    // 이 컴포넌트가 언마운트될 때 실행되는 함수 (B)
  }
}, [])

 

Example - ToDo App

위 기본형태의 실행 순서를 ToDo로 예제로 보면

// todo가 A -> B로 변경될 때 
useEffect(() => {
  // todo가 바뀔 때마다 실행됨

  return () => {
    // todo가 바뀌기 직전에 실행됨 (cleanUp)
  }
}, [todo])

 

todo가 A -> B로 변경될 때의 실행순서는 A useEffect → A cleanUp → B useEffect 로 이루어진다.

 

참고로 useEffect의 배열 부분인 의존성(Dependency)가 없으면 랜더링마다 useEffect가 실행되어 불필요한 랜더링이 발생할 수 있다.

useEffect(() => {

  return () => {
  }
})