React 정리 (1) : useEffect, clean up (조건 별 실행순서), automatic batching

useEffect와 cleanup함수의 조건 별 실행순서

의존성 배열 값이 있을 때

useEffect(()=>{ 
  //함수 A
  return ()=>{
    //함수 B
  }
}, [변수나state])

• Mount(초기 마운트) 시나리오:
  컴포넌트가 처음으로 마운트되면 함수 A가 실행
• Update(업데이트) 시나리오:
  컴포넌트가 업데이트되고 의존성 배열에 포함된 변수나 state가 변경되면, 먼저 함수 B가 실행 후 함수 A가 실행
• Unmount(마운트 해제) 시나리오:
  컴포넌트가 마운트 해제되면 함수 B가 실행

의존성 배열 값이 비었을 때

useEffect(()=>{ 
  //함수 A
  return ()=>{
    //함수 B
  }
}, [])

• Mount(초기 마운트) 시나리오:
  컴포넌트가 처음으로 마운트되면 함수 A가 실행
• Update(업데이트) 시나리오:
  실행되지 않음
• Unmount(마운트 해제) 시나리오:
  컴포넌트가 마운트 해제되면 함수 B가 실행

---

Automatic Batching

리액트 18버전 이상부터 state 변경함수들이 연달아서 여러개 처리되어야한다면 매번 랜더링되는 것이 아니라, state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링된다. 

아래의 경우 마지막에 일어나는 red만 일어나게 됨.

useEffect(()=>{ 
  setColor('red')
  return ()=>{
    setColor('blue')
  }
}, [변수나state])

그럼 어떻게 할까?

시간차를 두면 된다.

useEffect(()=>{ 
  setTimeout(()=>{ setColor('red') }, 100)
  return ()=>{
    setColor('blue')
  }
}, [변수나state])

 

---

출처 : React document, 코딩애플 https://codingapple.com/