React에서 useState를 사용할 때, 상태가 바로 바뀔 것 같지만 실제로는 즉시 반영되지 않는다!
특히 axios와 함께 사용할 때는 더 헷갈릴 수 있는데, 왜 그런지 쉽게 설명해볼게.

의문점?

• setState 로 isAnswered로 상태값이 true 변경이 됐는데... console 창에는 false 로 나오지...?
  

1️⃣ useState는 원래 동기적으로 실행된다?

• useState는 동작 순서대로 실행되지만, 상태 변경은 즉시 반영되지 않고 "예약"된 후에 업데이트된다!
  즉, 리액트는 한 번에 여러 개의 상태 변경을 처리하기 위해 한꺼번에(batch) 업데이트하는 특징이 있어.

const [count, setCount] = useState(0);

setCount(1);
console.log(count); // ❓ 예상: 1 → ❌ 실제: 0

setCount(1)을 했는데 왜 console.log(count)는 0일까?
👉 이유: setState는 "상태 변경을 예약"만 하고, 다음 리렌더링 때 반영되기 때문!

2️⃣ 그런데 axios랑 같이 쓰면 비동기처럼 동작한다고?

axios는 데이터를 받아오는 비동기 함수라서, 네트워크 요청이 끝날 때까지 기다려야 해!
그래서 axios 안에서 setState를 하면, 데이터를 다 받은 후에 상태가 변경되는 것처럼 보이는 거야.

const [data, setData] = useState(null);

useEffect(() => {
  axios.get("https://api.example.com/data")
    .then((res) => {
      setData(res.data); // ❗ 서버에서 데이터를 받은 후 상태 변경
    });

  console.log(data); // ❌ 여전히 null (이전 값)
}, []);

setData(res.data);를 했는데도, console.log(data);가 null로 찍히는 이유는?
👉 이유: axios는 비동기 함수라서 데이터를 받아오기도 전에 console.log가 실행되기 때문!

3️⃣ 해결 방법은?

✅ useEffect를 활용해서 상태가 변경된 후에 console.log를 찍으면 해결할 수 있어!

useEffect(() => {
  console.log("데이터 변경됨:", data);
}, [data]); // 데이터가 바뀌면 실행됨!

이렇게 하면 데이터가 변경된 후에 로그가 출력되므로, 원하는 값을 볼 수 있어! 😊

4️⃣ 쉽게 정리하자면!

• useState는 상태를 바로 변경하지 않고, 예약 후 리렌더링 때 반영!

• axios는 데이터를 받아오는 비동기 함수라서, 데이터를 다 받아야 setState가 실행됨.

• 그래서 axios 안에서 setState를 하면 "비동기적으로 변경되는 것처럼" 보이지만, 사실 useState 자체는 항상 같은 방식으로 동작함.

• 해결 방법? useEffect를 활용해서 상태가 바뀐 후에 원하는 값을 확인하면 된다!

🎯 한 줄 정리

useState는 비동기처럼 보일 때가 있지만, 사실 "예약"된 후 업데이트되는 것일 뿐이다!

동기 비동기 이해 블로그

• 동기와 비동기의 이해 참고 블로그

  https://seo0yoon.tistory.com/124
  자바스크립트는 싱글 스레드이기에 비동기적으로 실행할 수 밖에 없구나....