<div id="readability-page-1" class="page"><div>
 <div id="SE-4adbc7d7-c7f5-4c9b-8c10-c9eadf6c81d3">
 지난 챕터 마지막에 수수께끼 하나를 던졌습니다. 한 핸들러에서 setCount(count + 1)을 세 번 부르면 숫자가 3 오를까요?
 </div> <div id="SE-e3e8d5f0-c452-46fa-be64-99522c6887b6">
 function handleClick() {
 setCount(count + 1);
 setCount(count + 1);
 setCount(count + 1);
}
 </div> <div id="SE-198dc624-6152-4b5a-9003-79fd3a9c91c9">
 직관적으로는 3이 오를 것 같지만, 실제로는 1만 오릅니다. 이게 버그처럼 느껴진다면, 아직 React가 화면을 어떻게 갱신하는지에 대한 멘탈모델이 빠져 있는 겁니다. 이번 챕터에서 그 모델 — 렌더링의 3단계와 "state는 스냅샷이다" — 를 잡으면, 위 코드가 왜 1만 오르는지 완벽하게 이해됩니다. 이건 React에서 가장 중요한 멘탈모델 중 하나입니다.​​화면이 갱신되는 3단계 — 트리거, 렌더, 커밋React가 화면을 업데이트하는 과정은 음식점에 비유할 수 있습니다.<ol><li>트리거(Trigger) — 주문하기. 누군가 setState를 호출하면 "화면을 다시 그려야 한다"는 주문이 주방으로 들어갑니다. (첫 화면은 앱이 시작될 때 자동으로 주문됩니다.)</li><li>렌더(Render) — 요리하기. React가 컴포넌트 함수를 호출해서, 지금 화면이 어떻게 생겨야 하는지 JSX를 계산합니다. 이게 "렌더링"입니다.</li><li>커밋(Commit) — 서빙하기. React가 계산된 결과를 실제 DOM에 반영합니다. 이제야 사용자 눈에 보입니다.</li></ol>​여기서 꼭 기억할 점. 렌더링은 "컴포넌트 함수를 호출하는 것"일 뿐입니다. 그리고 React는 변경이 필요할 때만 이 과정을 돌립니다. setState를 부르면 트리거가 걸리고, 그래서 화면이 갱신되는 거죠.​​state는 스냅샷이다이제 핵심입니다. 많은 사람이 state를 "계속 바뀌는 변수 상자"처럼 상상합니다. 값을 넣으면 그 상자의 내용이 즉시 바뀐다고요. 하지만 React의 state는 그렇게 동작하지 않습니다.​각 렌더는 그 시점의 state 값을 사진처럼 찍어서 고정해 갖습니다. 한 번의 렌더가 진행되는 동안, 그 안의 count는 절대 변하지 않는 상수입니다. 마치 사진(스냅샷) 한 장처럼요. 이게 "state는 스냅샷"이라는 말의 뜻입니다.​코드로 확인해봅시다.
 </div> <div id="SE-6a4b5423-7fc2-4be8-8579-bae8d485a1fe">
 import { useState } from 'react';

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

 function handleClick() {
 setCount(count + 1);
 console.log(count); // 여기서 찍히는 값은?
 }

 return &lt;button onClick={handleClick}&gt;클릭: {count}&lt;/button&gt;;
}
 </div> <div id="SE-426ea390-768d-4439-85d2-7532ba1725f2">
 처음 클릭했을 때 console.log(count)에는 무엇이 찍힐까요? 1이 아니라 0입니다. setCount를 분명히 불렀는데도요.​이유는 이렇습니다. 이 handleClick은 count가 0이던 렌더에서 만들어진 함수입니다. 그 렌더의 스냅샷 안에서 count는 영원히 0입니다. setCount(count + 1)은 "다음 렌더에서는 count를 1로 해줘"라는 예약일 뿐, 지금 이 순간의 count를 바꾸지는 않습니다. 그래서 바로 다음 줄의 console.log(count)는 여전히 0을 봅니다.​입문자가 가장 많이 당황하는 지점: "분명 set을 호출했는데 왜 바로 다음 줄에서 값이 안 바뀌어 있지?" 답은 이번 렌더의 count는 스냅샷이라 고정이기 때문입니다. 바뀐 값은 다음 렌더에서 만납니다.
 </div> <div id="SE-e338a46a-8312-4313-b8e5-f84e35ccd42f">
 수수께끼 해결 — 왜 세 번 불러도 1만 오르나?
 </div> <div id="SE-3781d3be-8f3b-4f08-9e57-41a25f45a47c">
 function handleClick() {
 setCount(count + 1);
 setCount(count + 1);
 setCount(count + 1);
}
 </div> <div id="SE-f04cbd97-7304-4799-b94c-54589e45c7d1">
 이 렌더에서 count는 스냅샷이라 0으로 고정되어 있습니다. 그러니 세 줄은 모두 이렇게 읽힙니다.
 </div> <div id="SE-c5072979-aa88-4307-b957-a7ba87b16de1">
 setCount(0 + 1); // "다음 count는 1로"
setCount(0 + 1); // "다음 count는 1로"
setCount(0 + 1); // "다음 count는 1로"
 </div> <div id="SE-97d8fe75-88d4-47e8-aa3b-290ef408f118">
 세 번 다 "다음 count는 1"이라고 예약한 셈입니다. 그래서 결과는 3이 아니라 1입니다. count가 세 줄 사이에 1, 2, 3으로 올라갈 거라는 상상은, state를 "즉시 바뀌는 변수"로 착각한 데서 나온 겁니다. 스냅샷 모델로 보면 너무나 자연스러운 결과죠.
 </div> <div id="SE-9c8c1b21-4b97-4aa4-81d4-bdbd3642e7e2">
 ​방법은 두 가지입니다. 하나는 지금 당장 알 수 있고, 하나는 다음 챕터의 주제입니다.​​지금 할 수 있는 것 — 다음 값을 직접 계산해서 한 번에 넘기기. 스냅샷 값에 의존하지 말고, 필요한 최종 값을 만들어 넘기면 됩니다.
 </div> <div id="SE-6fa9fc45-b2aa-486b-94f5-b2de4721da24">
 function handleClick() {
 const next = count + 3;
 setCount(next); // 한 번에 3 올리기
}
 </div> <div id="SE-cb47c841-f10f-4301-ac9a-e1774c2840ec">
 ​다음 챕터에서 배울 것 — 업데이터 함수."현재 값에 1을 더하라"를 값이 아니라 함수로 넘기는 방법이 있습니다. 이러면 스냅샷에 갇히지 않고 누적할 수 있습니다.
 </div> <div id="SE-13cbff81-fd2f-47e3-8301-0468ab0449e7">
 function handleClick() {
 setCount((c) =&gt; c + 1); // 이런 방식 — 다음 챕터에서 자세히
 setCount((c) =&gt; c + 1);
 setCount((c) =&gt; c + 1); // 이건 정말 3 오른다
}
 </div> <div id="SE-f55937d3-fb45-4cbc-a07f-7b43b6984c3b">
 왜 이게 되는지, 그리고 React가 여러 set 호출을 어떻게 모아 처리하는지(배칭)는 바로 다음 챕터에서 다룹니다.
 </div> <div id="SE-05587afb-1baa-487b-bbae-e0b07c87b4a9">
 ​<ul><li>화면 갱신은 3단계다: 트리거(setState 호출) → 렌더(컴포넌트 함수 호출로 JSX 계산) → 커밋(실제 DOM에 반영).</li><li>렌더링 = 컴포넌트 함수를 호출하는 것일 뿐이다.</li><li>state는 스냅샷이다. 한 번의 렌더 동안 그 안의 state 값은 고정된 상수다.</li><li>그래서 set 호출은 "다음 렌더의 값"을 예약할 뿐, 이번 렌더의 값을 즉시 바꾸지 않는다. set 직후에 그 변수를 읽으면 옛날 값이 보인다.</li><li>setCount(count + 1)을 세 번 불러도 count가 스냅샷이라 모두 같은 값을 보고, 결과는 +1이다.</li></ul>​스냅샷 모델을 잡았으니, 다음 챕터에서는 그 위에서 한 걸음 더 나아갑니다. React가 여러 set 호출을 한 번에 모아 처리하는 배칭(batching), 정말로 값을 누적하는 업데이터 함수, 그리고 숫자가 아니라 객체와 배열을 state로 다룰 때 반드시 지켜야 하는 규칙(불변성)을 배웁니다.
 </div> <div id="SE-3c89457e-8816-4fbf-a250-9b514bb1c0fc">
 ​<ul><li>Render and Commit — React 공식 문서 (확인: 2026-06-14)</li><li>State as a Snapshot — React 공식 문서 (확인: 2026-06-14)</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

지난 챕터 마지막에 수수께끼 하나를 던졌습니다. 한 핸들러에서 setCount(count + 1)을 세 번 부르면 숫자가 3 오를까요? 직관적으로는 3이 오를 것 같지만, 실제로는 1만 오릅니다. 이게 버그처럼 느껴진다면, 아직 React가 화면을 어떻게 갱신하는지에 대한 멘탈모델이 빠져 있는 겁니다. 이번 챕터에서 그 모델 — 렌더링의 3단계와 "state는 스냅샷이다" — 를 잡으면, 위 코드가 왜 1만 오르는지 완벽하게 이해됩니다. 이건 React에서 가장 중요한 멘탈모델 중 하나입니다. 화면이 갱신되는 3단계 — 트리거, 렌더, 커밋 React가 화면을 업데이트하는 과정은 음식점에 비유할 수 있습니다. 트리거(Trigger) — 주문하기. 누군가.......

렌더와 커밋, 그리고 state는 스냅샷이다

댓글