[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 작동됨