React] Hook : useState 비동기 → 동기 하는 법

본인이 작성한 흐름 따라 값이 변할 것으로 예상하고 setState를 사용했을 때,

바로 다음줄에 값이 변하지 않는 것을 종종 확인할 수 있습니다.

 

이는 useState설명할 때처럼 비동기로 동작하기 때문입니다.

 

(관련 설명은 아래 글 확인하시면 될 것 같습니다.)

2023.06.04 - [Front-End/React] - React] React 란...?

2023.06.06 - [Front-End/React] - Hook) useState

 

그렇다면 useState를 동기로 처리하려면 어떻게 해야 될지 2가지 방법이 있습니다.

 

 

---

 

 

useEffect 사용

 

useEffect를 사용하여 의존성을 부여하고, content가 바뀔 때마다 갱신해 주면 됩니다.

 

2023.06.20 - [Front-End/React] - Hook) useEffect

 

 

---

 

 

콜백함수 사용

 

 

setState할 때, 변수를 직접 넣기보다는 콜백함수를 사용하여 넣어주면 됩니다.

 

 

---

 

 

생각보다 놓치기 쉬운 사항이기도 하고, 개발하다 보면 자주 실수 할 수 있는 부분이라고 생각합니다.
중요할 듯...