useState 변경함수 바로 업데이트 안되는 이슈 - setState()는 비동기 함수

useState 변경함수 바로 업데이트 안되는 이슈 - setState()는 비동기 함수

 

javascript의 동작 방식

console.log(1)
console.log(2)
console.log(3)

결과

1
2
3

위에서 아래로 순서대로 동작함

---

ajax, 이벤트리스너, setTimeout 와 같은 함수들은 비동기 함수이다. 이러한 함수들은 순차적으로 실행되지않고 실행이 완료되면 실행된다. 

console.log(1)
axios로 get요청 후 console.log(2) 실행
console.log(3)

결과

1
3
2

axios get이 0.00초 걸리더라도 1,3이 실행되고 2가 실행된다.

---

React의 setState() 와 같은 state 변경함수들은 전부 asynchronous (비동기적) 으로 처리된다.

=> setName()이 오래걸리면 이 함수는 제껴두고 다른 밑에 있는 코드들부터 실행한다.

setState()후 바로 다른 함수를 실행하고 싶다면

해결방안 1 - useEffect 사용

useEffect(()=>{
	//변경 후 실행할 함수
},[value])

setValue('newValue')

해결방안 2 - state가 아닌 일반 변수 사용 

state는 변경 시 HTML 자동 재렌더링이 필요한 경우에 사용 권고

let value = 'newValue'
serverCall(value)

해결방안 3 - callBack 함수 사용

setValue('newValue',()=>{
	serverCall(value)
})

 

더 자세히 설명해놓은 이 글을 참고하세요!!!!!

https://yjae-sw.tistory.com/224

[React] setState() 후 state값을 바로 API 파라미터로 호출할 때 주의점, setState후 console.log()에 새로운

 

 

 

 

참고 : https://codingapple.com/unit/react-setstate-async-problems/

https://earth-kor.github.io/2021/01/16/%EB%B0%A9%EB%B2%95/

https://zigsong.github.io/2021/10/16/fe-await-setstate/

https://velog.io/@dosilv/TIL-React-setState-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-648sv7je