28:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 29:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 2a:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 2e:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 27:T522,{"@context":"https://schema.org","@type":"BlogPosting","headline":"React에서 말하는 “스냅샷(Snapshot)”이란?","description":"React를 공부하다 보면 이런 말을 자주 본다.“React는 state를 스냅샷으로 다룬다.”그런데 막상 보면 감이 잘 안 온다.버튼을 누르면 값이 바뀌는데, 대체 뭐가 스냅샷이라는 걸까?이 글에서는 다음을 정리한다:스냅샷의 정확한 의미state와 스냅샷의 차이왜 setState를...","image":["https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2026-02-24T05:47:36.367Z","dateModified":"2026-08-17T12:40:54.760Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80"},"url":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80"}2b:T22cc,

React를 공부하다 보면 이런 말을 자주 본다.

“React는 state를 스냅샷으로 다룬다.”

그런데 막상 보면 감이 잘 안 온다.
버튼을 누르면 값이 바뀌는데, 대체 뭐가 스냅샷이라는 걸까?

이 글에서는 다음을 정리한다:

스냅샷의 정확한 의미
state와 스냅샷의 차이
왜 setState를 여러 번 호출해도 1만 증가하는지
Virtual DOM과의 관계

1. 스냅샷이란 무엇인가?

React에서 스냅샷은 다음을 의미한다.

“컴포넌트가 렌더링되는 그 순간의 state/props 값 묶음”

중요한 점은:

state 자체가 스냅샷이 아니다.
렌더 시점에 사용되는 state 값이 스냅샷이다.

2. 값이 변하는 게 아니라, 렌더가 새로 만들어진다

먼저 가장 단순한 예제를 보자.

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

이 코드를 보면 우리는 보통 이렇게 생각한다.

count = 0
→ 버튼 클릭
→ count = 1
→ 다시 클릭
→ count = 2

마치 count라는 하나의 변수가 계속 바뀌는 것처럼 보인다.

하지만 React 내부에서는 다르게 동작한다.

실제로는 이렇게 진행된다

✅ 첫 번째 렌더

컴포넌트가 처음 실행된다.

Render #1
count = 0

화면에는 0이 보인다.

이 시점의 count 값이 바로 첫 번째 스냅샷이다.

✅ 버튼 클릭

setCount(count + 1)이 실행된다.

여기서 중요한 점:

이 코드가 보고 있는 count는
현재 렌더(Render #1)의 값(0) 이다.

React는 이렇게 이해한다:

"다음 렌더에서 count를 1로 설정하자"

✅ 두 번째 렌더

React가 컴포넌트를 다시 실행한다.

Render #2
count = 1

이건 기존 값이 수정된 게 아니라,
새로운 렌더가 생성된 것이다.

핵심 차이

우리가 생각하는 모델:

count라는 변수 하나가 계속 변경됨

React 실제 모델:

Render #1 → count = 0
Render #2 → count = 1
Render #3 → count = 2

즉,

값이 변하는 게 아니라
렌더가 새로 만들어지는 것이다.

그리고 각 렌더는
자기만의 state 값(스냅샷)을 가진다.

3. 왜 setState를 여러 번 호출해도 1만 증가할까?

다음 코드를 보자.

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

왜 3이 아니라 1만 증가할까?

이유는 간단하다.

count는 최신 state가 아니라
현재 렌더의 스냅샷 값이기 때문이다.

예를 들어 현재 렌더의 count가 0이라면:

setCount(0 + 1);
setCount(0 + 1);
setCount(0 + 1);

React는 결국 “다음 state를 1로 설정”을 세 번 받는 셈이다.

해결 방법: Functional Update

setCount(prev => prev + 1);

이 방식은:

스냅샷 값이 아니라
React의 업데이트 큐 기준으로 계산한다.

그래서 정상적으로 3이 증가한다.

4. state와 스냅샷의 차이

정확히 구분하면 다음과 같다.

개념	의미
state	React 내부에 저장된 최신 상태
snapshot	렌더 시점에 사용되는 고정된 상태 값

정리하면:

state는 시간에 따라 업데이트되지만
snapshot은 렌더 단위로 고정된다.

5. Virtual DOM과의 관계

렌더 과정은 다음과 같다.

state 변경 요청
→ 새로운 스냅샷 생성
→ 컴포넌트 실행
→ Virtual DOM 생성
→ 이전 Virtual DOM과 비교
→ 실제 DOM 반영

즉:

스냅샷은 입력값
Virtual DOM은 결과물

스냅샷이 Virtual DOM은 아니지만,
Virtual DOM을 만들기 위한 기반 데이터다.

6. 왜 React는 이렇게 설계했을까?

이 구조 덕분에:

예측 가능한 렌더링
부작용 최소화
Concurrent Rendering 가능
이전 트리를 유지하면서 새 트리 계산 가능

만약 state가 직접 mutate됐다면
React 18의 동시성 모델은 거의 불가능했을 것이다.

핵심 한 줄 요약

React에서 스냅샷이란,
“렌더 시점에 고정된 state 값”이다.
상태가 변하는 것이 아니라,
새로운 렌더와 함께 새로운 스냅샷이 생성된다.

1f:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$27"}}],["$","$21",null,{"fallback":null,"children":["$","$L28",null,{"postId":20,"slug":"react에서-말하는-스냅샷snapshot이란","categorySlug":"react"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L29",null,{"href":"/blog/category/react"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"React에서 말하는 “스냅샷(Snapshot)”이란?"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2026-02-24"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"React"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$21",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L2a",null,{"post":{"id":20,"title":"React에서 말하는 “스냅샷(Snapshot)”이란?","content":"$2b","updatedAt":"$D2026-08-17T12:40:54.760Z"}}]]}]}],"$L2c"]}],"$L2d"]}]] 22:null 26:[["$","title","0",{"children":"React에서 말하는 “스냅샷(Snapshot)”이란?"}],["$","meta","1",{"name":"description","content":"React를 공부하다 보면 이런 말을 자주 본다.“React는 state를 스냅샷으로 다룬다.”그런데 막상 보면 감이 잘 안 온다.버튼을 누르면 값이 바뀌는데, 대체 뭐가 스냅샷이라는 걸까?이 글에서는 다음을 정리한다:스냅샷의 정확한 의미state와 스냅샷의 차이왜 setState를..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"React에서 말하는 “스냅샷(Snapshot)”이란?"}],["$","meta","10",{"property":"og:description","content":"React를 공부하다 보면 이런 말을 자주 본다.“React는 state를 스냅샷으로 다룬다.”그런데 막상 보면 감이 잘 안 온다.버튼을 누르면 값이 바뀌는데, 대체 뭐가 스냅샷이라는 걸까?이 글에서는 다음을 정리한다:스냅샷의 정확한 의미state와 스냅샷의 차이왜 setState를..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2026-02-24T05:47:36.367Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T12:40:54.760Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"React에서 말하는 “스냅샷(Snapshot)”이란?"}],["$","meta","26",{"name":"twitter:description","content":"React를 공부하다 보면 이런 말을 자주 본다.“React는 state를 스냅샷으로 다룬다.”그런데 막상 보면 감이 잘 안 온다.버튼을 누르면 값이 바뀌는데, 대체 뭐가 스냅샷이라는 걸까?이 글에서는 다음을 정리한다:스냅샷의 정확한 의미state와 스냅샷의 차이왜 setState를..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-%EB%A7%90%ED%95%98%EB%8A%94-%EC%8A%A4%EB%83%85%EC%83%B7snapshot%EC%9D%B4%EB%9E%80/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L2e","33",{}]]

React에서 말하는 “스냅샷(Snapshot)”이란?

댓글