setState를 썼는데 값이 왜 이상하지? — async 완전 이해하기

🍔 핵심 개념을 비유로 먼저 이해하기

카페에서 주문을 받는 직원이 있다고 상상해보세요.

일반 손님 (동기, sync): 주문 → 커피 만들기 → 다음 손님 받기. 무조건 한 번에 한 명씩 순서대로 처리합니다.

카페 직원 (비동기, async): 주문을 받은 뒤 커피 기계에 버튼 눌러두고 → 커피가 나오는 동안 기다리지 않고 → 다음 손님 주문을 먼저 받습니다. 커피는 나중에 완성되면 가져다줍니다.

자바스크립트와 리액트가 딱 이 카페 직원처럼 동작합니다.

---

📌 1단계 — 자바스크립트의 기본: 코드는 위에서 아래로 실행된다 (동기)

보통 코드는 그냥 위에서 아래로 순서대로 실행됩니다.

 

 

js

console.log(1 + 1)  // 2 출력
console.log(2 + 1)  // 3 출력
console.log(3 + 1)  // 4 출력

콘솔에 2, 3, 4 순서대로 출력됩니다. 당연한 얘기처럼 들리죠?

---

📌 2단계 — 그런데 특별한 함수들은 다르게 동작한다 (비동기)

ajax, 이벤트리스너, setTimeout 같은 함수들은 처리하는 데 시간이 걸립니다. 예를 들어 서버에서 데이터를 가져오는 ajax는 인터넷 상황에 따라 1초, 10초도 걸릴 수 있습니다.

자바스크립트는 이런 코드를 만나면 "이거 오래 걸리니까 일단 제쳐두고 아래 코드 먼저 실행할게!" 합니다.

 

 

js

console.log(2)              // ① 먼저 실행 → 2 출력
axios.get('/data').then(() => {
  console.log(3)            // ③ ajax 완료되고 나서 → 3 출력
})
console.log(4)              // ② ajax 기다리지 않고 먼저 실행 → 4 출력

결과: 2 → 4 → 3 순으로 출력됩니다.

심지어 ajax가 0.001초밖에 안 걸려도 2 → 4 → 3 입니다. 자바스크립트의 특성이 그렇습니다.

---

📌 3단계 — 리액트의 setState도 비동기입니다!

여기서부터가 진짜 중요합니다.

리액트에서 state를 바꿀 때 쓰는 setState 함수 (setCount, setName 등)도 비동기로 처리됩니다. 즉, 실행을 요청해놓고 완료되기 전에 다음 줄 코드가 먼저 실행될 수 있습니다.

---

🐛 실제 버그 예시 — "왜 한 번 더 실행되지?"

아래 같은 기능을 만들고 싶다고 해봅시다.

버튼을 누를 때마다 나이가 1씩 늘어나는데, 3번 이상 누르면 나이가 더 이상 늘지 않아야 한다.
(20살에서 시작해서 22살에서 멈춰야 함)

 

 

jsx

function App() {
  let [count, setCount] = useState(0)  // 버튼 누른 횟수
  let [age, setAge] = useState(20)     // 나이

  return (
    <div>
      <p>나이: {age}살</p>
      <button onClick={() => {
        setCount(count + 1)        // ① count를 +1

        if (count < 3) {           // ② count가 3 미만이면
          setAge(age + 1)          // ③ 나이도 +1
        }
      }}>
        누르면 한 살 먹기
      </button>
    </div>
  )
}

언뜻 보면 맞는 코드 같습니다. 그런데 실제로 돌려보면 23살까지 증가합니다. 22살에서 멈춰야 하는데 왜 그럴까요?

🔍 버그의 원인

버튼을 세 번째 눌렀을 때를 분석해보면:

 

 

① setCount(count + 1) 실행 → count를 3으로 바꿔달라고 요청
   ↓ 그런데 이 작업이 비동기라서 아직 완료가 안 됨!
   ↓ count는 아직 2인 상태

② if (count < 3) 을 체크 → count가 아직 2니까 조건이 참!
   ↓ setAge(age + 1) 실행됨 → 나이가 또 +1

③ 나중에 setCount가 완료되어 count가 3이 됨

즉, "count를 3으로 바꿔라" 는 요청을 해놨지만 아직 완료되기 전에 if (count < 3) 을 체크해버리니까, count가 여전히 2로 보여서 나이가 한 번 더 증가하는 겁니다.

---

✅ 해결책 — useEffect 활용

해결 방법은 이렇습니다. "count가 완전히 바뀌고 난 다음에 age를 바꾸는 코드를 실행해라" 고 순서를 보장해주면 됩니다. 이때 useEffect를 씁니다.

 

 

jsx

function App() {
  let [count, setCount] = useState(0)
  let [age, setAge] = useState(20)

  // count가 변경된 이후에 실행됨
  useEffect(() => {
    if (count !== 0 && count < 3) {  // count가 0(초기값)일 때는 제외
      setAge(age + 1)
    }
  }, [count])  // count가 바뀔 때만 이 코드 실행

  return (
    <div>
      <p>나이: {age}살</p>
      <button onClick={() => {
        setCount(count + 1)  // 버튼 누르면 count만 바꿈
      }}>
        누르면 한 살 먹기
      </button>
    </div>
  )
}

동작 순서

 

 

① 버튼 클릭 → setCount(count + 1) 실행
② count가 완전히 변경됨
③ useEffect 발동 → 이 시점의 count는 진짜 새 값
④ if (count !== 0 && count < 3) 체크 → 정확한 값으로 판단
⑤ 조건에 맞으면 setAge(age + 1) 실행

이렇게 하면 count가 3이 된 순간부터 count < 3 조건이 거짓이 되어 나이가 더 늘지 않습니다. 22살에서 정확히 멈춥니다!

💡 count !== 0 조건을 추가한 이유: useEffect는 페이지가 처음 로드될 때도 한 번 실행됩니다. 그때 count는 0인데, 이 시점에 나이가 늘어버리면 안 되니까 count가 0일 때는 건너뛰게 한 겁니다.

---

🔖 한 줄 정리

개념쉬운 설명

동기 (sync)	코드가 위에서 아래로 순서대로 실행됨
비동기 (async)	오래 걸리는 작업은 제쳐두고 다음 코드 먼저 실행
setState는 비동기	state 변경 요청 후 완료 전에 다음 줄이 실행될 수 있음
해결책	useEffect로 "이 state가 바뀐 다음에 실행해줘" 순서 보장

setState 쓰다가 값이 이상하게 동작한다면, "비동기라서 아직 값이 안 바뀐 상태일 수 있다" 는 걸 먼저 떠올려보세요!