[React] setTimeout, setState, useEffect 관계

setState, useEffect, setTimeout이 서로 어떤 영향을 주는지 여러 케이스를 테스트 해보았다.

 

함수 내에 setState만 2번 사용하는 경우 (setState에 number 할당)

const [state, setState] = useState(false)
    
const stateHandler = () => {
  setState(1)  // state를 초가깂에서 1로 변경
  setState(2)  // state를 초가깂에서 2로 변경
}

console.log('state', state)

useEffect(() => {
  console.log('useEffect 실행')
}, [state])

// console.log 결과
  // state 2
  // useEffect 실행

 

1. 결과

  - state가 초기값(false)에서 2로 변경됨

  - useEffect 1번 실행

 

2. 원인

  - setState는 Promise를 통해 비동기적으로 상태를 변경시킴

  - 반복문 내의 setState와 마찬가지로 마지막 setState만 적용됨

 

setState와 setTimeout을 같이 사용하는 경우 (setState에 number 할당)

const [state, setState] = useState(false)
    
const stateHandler = () => {
  
  setState(1) // state를 초가깂에서 1로 변경

  setTimeout(()=>{
    setState(2)  // state를 초기값에서 2로 변경
  }, 3000) 
}

console.log('state', state)

useEffect(() => {
  console.log('useEffect 실행')
}, [state])

// console.log 결과
  // state 1
  // useEffect 실행
  // state 2
  // useEffect 실행

 

1. 결과

  - state가 초기값(false)에서 1로 변경됨

  - state가 초기값(false)에서 2로 변경됨

  - state가 바뀔때마다 useEffect가 실행됨 (총 2번)

 

2. 원인

  - setTimeout API로 인해 두 개의 setState를 별개의 Promise로 인식함

 

함수 내에 setState만 2번 사용하는 경우 (setState에 Boolean 할당)

  const [state, setState] = useState(false)
     
  const stateHandler = () => {
    setState(!state)  // state를 초기값에서 true로 변경
    setState(!state)  // state를 초기값에서 true로 변경
  }

  console.log('state', state)

  useEffect(() => {
    console.log('useEffect 실행')
  }, [state])

  // console.log 결과
    // state true
    // useEffect 실행

 

1. 결과

  - state가 초기값(false)에서 true로 변경됨

  - useEffect 1번 실행

 

2. 원인

  - setState는 Promise를 통해 비동기적으로 상태를 변경시킴

  - 반복문 내의 setState와 마찬가지로 마지막 setState만 적용됨 (위와 동일)

 

setState와 setTimeout을 같이 사용하는 경우 (setState에 Boolean 할당)

<Case1 : setState가 같을 때>

const [state, setState] = useState(false)
  
const stateHandler = () => {

  setState(!state)  // state를 초기값에서 true로 변경

  setTimeout(()=>{
    setState(!state)  // state를 초기값에서 true로 변경
  }, 3000) 
}

console.log('state', state)

useEffect(() => {
  console.log('useEffect 실행')
}, [state])

// console.log 결과
  // state true
  // useEffect 실행
  // state true

 

1. 결과

  - state가 초기값(false)에서 true로 변경됨

  - state가 초기값(false)에서 true로 변경됨

  - state가 바뀔때마다 useEffect가 실행됨 (총 1번)

 

2. 원인

  - setTimeout API로 인해 두 개의 setState를 별개의 Promise로 인식함 (위와 동일)

  - 두 번째 setState가 실행되는 시점에는 이미 함수 밖에서의 state 값이 true임

  - 따라서 state가 변경되지 않아, 두 번째 setState가 실행되어도 useEffect 작동 안 됨

 

<Case2 : setState가 다를 때>

const [state, setState] = useState(false)

const stateHandler = () => {

  setState(!state)  // state를 초기값에서 true로 변경

  setTimeout(()=>{
    setState(!!state)  // state를 초기값에서 false로 변경
  }, 3000) 
}

console.log('state', state)

useEffect(() => {
  console.log('useEffect 실행')
}, [state])

// console.log 결과
  // state true
  // useEffect 실행
  // state false
  // useEffect 실행

 

 

1. 결과

  - state가 초기값(false)에서 true로 변경됨

  - state가 초기값(false)에서 false로 변경됨 (결과만 놓고 보면 변화 없음)

  - state가 바뀔때마다 useEffect가 실행됨 (총 2번)

 

2. 원인

  - setTimeout API로 인해 두 개의 setState를 별개의 Promise로 인식함 (위와 동일)

  - 두 번째 setState가 실행되는 시점에는 이미 함수 밖에서의 state 값이 true임

  - 이 경우 state가 true에서 false로 변경되어, 두 번째 setState가 실행되면 useEffect 작동됨