<div id="readability-page-1" class="page"><div>
                <div id="SE-442141af-d588-4db3-83a9-63b1c1221bef">
                                    <p id="SE-b9b04b4c-197c-449b-b765-6a2340d88612"><span id="SE-541b9c39-f365-49da-a0dc-9410fb2efe6d">2부의 마지막 챕터입니다. 지난 챕터에서 "state는 스냅샷"이라 한 렌더 안에서는 값이 고정된다는 걸 배웠습니다. 그래서 setCount(count + 1)을 세 번 불러도 1만 올랐죠. 이번 챕터는 그 다음 이야기입니다. 정말로 값을 누적하는 법(업데이터 함수), React가 여러 set을 모아 처리하는 배칭, 그리고 숫자가 아니라 객체와 배열을 state로 다룰 때 반드시 지켜야 하는 불변성을 배웁니다.</span></p><p id="SE-9f12a80e-79ac-4edb-8ae7-b1506e60967d"><span id="SE-1de2ab3d-2a41-4e19-8d6c-47ff0d1d4e05">​</span></p><p id="SE-e77bbe22-d046-4b0d-8586-61b3036667f3"><span id="SE-4996376d-aa66-4c21-a293-eb5163585f59">​</span></p><p id="SE-ac592484-5c53-4bcd-bcad-89fab7d16a44"><span id="SE-83588eca-6f0f-4bfc-9230-d5d3b8f4b748"><b>배칭 — React는 set 호출을 모아서 처리한다</b></span></p><p id="SE-b0f97433-c661-4fc6-b065-36f1f395b8e4"><span id="SE-39364212-5042-49d1-92ab-c504b904c42e">먼저 React가 set을 어떻게 처리하는지 봅시다. 한 이벤트 핸들러 안에서 set을 여러 번 불러도, React는 매번 화면을 다시 그리지 않습니다. 핸들러가 끝날 때까지 기다렸다가, 모인 변경을 한 번에 처리합니다. 이걸 </span><span id="SE-ff02e789-f763-4629-8ec1-84d1df4bfdbf"><b>배칭(batching)</b></span><span id="SE-d741aa10-4939-4b41-a8e3-2763e70598c0">이라고 합니다.</span></p>
                            </div>                <div id="SE-2a51a072-24c7-4613-b8d4-e501a55d4e80">
                                    <p>function handleClick() {
  setCount(count + 1);
  setName('김인권');
  setIsOpen(true);
  // 여기까지 끝나면 → 그제야 한 번만 재렌더
}</p>
                                </div>                <div id="SE-221cecb4-a2f2-4fd3-9510-fe5abdc2c395">
                                    <p id="SE-57782920-daa9-4dad-b626-2944fbd99ee8"><span id="SE-31e2085c-3e67-4474-9773-35e4e655f3a8">set을 세 번 불렀다고 화면을 세 번 그리면 낭비겠죠. React는 식당 종업원이 주문을 다 받은 뒤 한 번에 주방으로 가져가듯, 변경을 모아 단 한 번 재렌더합니다. 효율적이고, 화면이 중간 상태로 깜빡이지 않습니다.</span></p><p id="SE-01d4ec78-03b3-4a86-8327-baf4286446b7"><span id="SE-368654f2-d43e-4943-af6a-3fd4c9baa4fa">​</span></p><p id="SE-c4fc5c47-9f2c-4943-a9e8-57c5e7fe17c2"><span id="SE-cee980a0-750a-431c-9416-02d2c291ea3d">​</span></p><p id="SE-214bc410-384a-411a-bb54-e22613716099"><span id="SE-6af9e337-38a0-492a-9121-9da77d45e454"><b>업데이터 함수 — 스냅샷을 넘어 값을 누적하기</b></span></p><p id="SE-12f8497e-cc19-4025-9cf1-b9c17c640793"><span id="SE-53fa617c-c0b2-4e03-8f3d-b2c80a047c4f">그런데 배칭 때문에, 지난 챕터에서 본 것처럼 setCount(count + 1)을 세 번 불러도 count가 스냅샷이라 모두 같은 값을 봅니다. 정말로 3을 올리려면, 값이 아니라 함수를 넘깁니다. 이걸 </span><span id="SE-4dc2cbd9-213e-4668-8c2b-52ddcff191c2"><b>업데이터 함수(updater function)</b></span><span id="SE-b31ad70e-d88d-4387-a51d-2512df53c15b">라고 합니다.</span></p>
                            </div>                <div id="SE-c73f9e58-82f0-4fa9-a2df-43d22f86d10c">
                                    <p>function handleClick() {
  setCount((c) =&gt; c + 1); // "큐에 있는 최신 값에 1을 더하라"
  setCount((c) =&gt; c + 1);
  setCount((c) =&gt; c + 1); // 결과: +3
}</p>
                                </div>                <div id="SE-4bb236c7-0f8d-4088-a6ee-b12149e79c31">
                                    <p id="SE-65ba3906-3785-4c21-ae2a-9333f50e1aae"><span id="SE-92a3da93-9f95-4c11-a362-6462e2e29a1e">차이가 보이나요? setCount(count + 1)은 고정된 값(스냅샷의 count)을 넘기지만, setCount((c) =&gt; c + 1)은 "직전 값에 1을 더하라"는 명령을 넘깁니다.</span></p><p id="SE-53b398e9-bd02-4a3b-9661-f9fad41de86f"><span id="SE-e2ebe894-e249-42cf-a6f7-e186c1b4cb88">​</span></p><p id="SE-aee6e94f-d007-4650-9f2f-c8c4dcc8ecb2"><span id="SE-715045b0-68ec-46c0-b541-eeeee83b1b96">React는 이 명령들을 </span><span id="SE-e3e5cedd-9080-4249-b174-9666685e066c"><b>큐(대기열)</b></span><span id="SE-9cc09ce8-8394-4ea7-a413-207673c53a26">에 차곡차곡 쌓습니다. 그리고 재렌더 직전에 큐를 순서대로 처리합니다. c에는 매번 바로 앞 명령의 결과가 들어옵니다. 매개변수 c는 스냅샷 값이 아니라 큐에서 계산된 직전 값이라서, 제대로 누적됩니다.</span></p>
                            </div>                <div id="SE-97bfc591-263c-485a-8561-a1a5ce434155">
                                    <p>초기 count: 0
(c =&gt; c + 1) 처리 → 0 + 1 = 1
(c =&gt; c + 1) 처리 → 1 + 1 = 2
(c =&gt; c + 1) 처리 → 2 + 1 = 3   ← 최종 count = 3</p>
                                </div>                <div id="SE-525d4a02-8bb0-4122-bb05-3509b0bb8877">
                            <p id="SE-65c7b53b-d082-4413-9db1-c0b9a4a2fe1c"><span id="SE-22f45dd1-b53a-4997-a568-3ffe896ad00d">규칙: 다음 state가 이전 state에 의존할 때는 업데이터 함수 set((prev) =&gt; ...)를 쓴다. "현재 값 기준으로 1 늘리기/토글하기" 같은 경우가 전부 여기에 해당한다. 헷갈리면 그냥 업데이터 함수를 기본으로 써도 안전하다.</span></p>
                        </div>                                <div id="SE-435be7c0-7d4e-4f69-8c56-3c7c0a0994fb">
                            <p id="SE-18bfba56-3947-4a45-a216-ba501f954838"><span id="SE-6d9b6c48-1214-4a56-ac68-99c8d380c61b"><b>객체 state — 직접 바꾸지 말고 새로 만들어라</b></span></p>
                        </div>                <div id="SE-fdc93349-dfee-4974-89aa-a2d8d988399a">
                                    <p id="SE-184faa5c-3845-4898-95d1-55c237e6db3c"><span id="SE-2b5733d8-3a94-432a-86d3-65fe817301a1">​</span></p><p id="SE-f95af59a-7c63-449a-b507-819ad0472690"><span id="SE-50716069-811d-431f-a2f7-35a9238a09aa">지금까지는 숫자만 다뤘습니다. 하지만 실무에서는 객체나 배열을 state로 두는 경우가 훨씬 많죠. 여기서 가장 중요한 원칙이 등장합니다. state는 불변(immutable)으로 다뤄야 한다. 즉, 기존 객체를 직접 수정하지 말고, 새 객체로 교체해야 합니다.</span></p>
                            </div>                <div id="SE-ee0ace2d-df43-4072-92aa-cd85c8eb32bd">
                                    <p>type User = { name: string; age: number };

function Profile() {
  const [user, setUser] = useState&lt;User&gt;({ name: '김인권', age: 30 });

  function handleBirthday() {
    user.age = user.age + 1; // 🔴 직접 수정 — 화면이 안 바뀐다
    setUser(user);           // 같은 객체를 넘겨서 React가 변화를 모름
  }
  // ...
}</p>
                                </div>                <div id="SE-4376b24c-62a7-4cf7-91c4-76149d646be4">
                                    <p id="SE-3da53458-d48a-41ff-b3e9-071c9e4c5582"><span id="SE-f72cbb22-30db-48b4-97ca-d7d475322a07">user.age = ...처럼 기존 객체를 직접 고치면 안 됩니다. 두 가지가 어긋납니다. 첫째, React는 "객체의 참조가 그대로면 안 바뀐 것"으로 보기 때문에 재렌더하지 않습니다. 둘째, 이건 순수성 챕터에서 배운 원칙에도 어긋납니다.</span></p><p id="SE-13b58969-3fdd-41f4-9acc-6d9a302bd073"><span id="SE-c4afdc17-befe-4cba-916d-7bd7224a0d1a">​</span></p><p id="SE-a50d7f21-eef7-4eb3-a822-38b02f7ddf70"><span id="SE-efbcfebc-c719-493e-bc5a-39858418989d">올바른 방법은 전개 연산자(...)로 복사한 새 객체를 만들어 넘기는 것입니다.</span></p>
                            </div>                <div id="SE-ff0642d6-1222-43b0-b3a4-df97606de23f">
                                    <p>function handleBirthday() {
  setUser({ ...user, age: user.age + 1 }); // ✅ 새 객체로 교체
}</p>
                                </div>                <div id="SE-4e2b853d-49d5-4a97-8b9a-a85832301245">
                            <p id="SE-f37cfd23-b4ae-42dc-a1ab-e4dcebaa6459"><span id="SE-9e7d61f2-062f-4384-ac27-b3ddb4b340de">{ ...user, age: user.age + 1 }는 "기존 user의 모든 속성을 복사하되, age만 새 값으로 덮어쓴 새 객체"입니다. 참조가 바뀌었으니 React가 변화를 감지하고 재렌더합니다.</span></p>
                        </div>                                                <div id="SE-98b38999-73a8-4914-aa08-da76523ea44c">
                                    <p id="SE-78086db2-17be-43f0-bd08-b3dfb541b61d"><span id="SE-f81d0eb7-fdcf-4aba-bd42-69285d94de2c">​</span></p><p id="SE-09cedd57-8c74-472c-b6ae-4a4cb8a822a9"><span id="SE-f1348cea-9adf-454c-a2ed-256ce58521d6">배열도 똑같습니다. push, splice, sort처럼 원본을 바꾸는 메서드는 쓰지 않습니다. 대신 새 배열을 만드는 방식(..., map, filter)을 씁니다.</span></p>
                            </div>                <div id="SE-0daafdee-fde9-4356-8252-652c0cc01a9a">
                                    <p>type Todo = { id: number; text: string };

function TodoList() {
  const [todos, setTodos] = useState&lt;Todo[]&gt;([]);

  // 추가 — push 대신 전개로 새 배열
  function addTodo(text: string) {
    setTodos([...todos, { id: Date.now(), text }]); // ✅
  }

  // 삭제 — filter로 걸러낸 새 배열
  function removeTodo(id: number) {
    setTodos(todos.filter((t) =&gt; t.id !== id)); // ✅
  }

  // 수정 — map으로 해당 항목만 교체한 새 배열
  function renameTodo(id: number, text: string) {
    setTodos(todos.map((t) =&gt; (t.id === id ? { ...t, text } : t))); // ✅
  }
  // ...
}</p>
                                </div>                <div id="SE-73a6cfaa-8522-4240-bbbc-24739a647f51">
                            <p id="SE-b0b4d9db-e728-4225-b75e-7fea5edc0c5e"><span id="SE-89f21f7f-a0f9-4015-b718-1e3a96b44154">핵심 패턴을 외워두면 편합니다. 추가는 [...arr, 새 항목], 삭제는 filter, 수정은 map. 셋 다 원본을 건드리지 않고 새 배열을 만듭니다.</span></p>
                        </div>                <div id="SE-3432f71a-2b53-4c63-902a-12ac3ba42d33">
                                    <p>todos.push(newTodo);   // 🔴 원본을 변경 — 재렌더 안 됨
setTodos([...todos, newTodo]); // ✅ 새 배열로 교체</p>
                                </div>                                <div id="SE-b039c4c5-ea02-4794-aabf-b5daf0e23220">
                                    <p id="SE-87f6479b-d75e-4127-88f7-10ee28e4480a"><span id="SE-006dc2d9-eb46-40d1-9359-5a2a4f862991"><b>⚠️ 함정 — 중첩 객체는 얕은 복사로 부족하다</b></span></p><p id="SE-f6a73345-fda1-4856-969d-e10c67f06767"><span id="SE-c7ab275c-1e7b-4939-a254-579caf655586">​</span></p><p id="SE-614687df-b56d-42fc-b20a-285ce05e11ac"><span id="SE-f8cc3d5f-713e-4d38-a60c-e538beb576e2">...는 한 겹만 복사합니다(얕은 복사). 그래서 객체 안의 객체를 바꿀 때는 안쪽도 따로 복사해야 합니다.</span></p>
                            </div>                <div id="SE-9d75a964-6484-498d-8090-5d4a2019fe31">
                                    <p>type State = { user: { name: string; age: number } };

// 🔴 바깥만 복사 — 안쪽 user는 여전히 원본을 가리킨다
setState({ ...state, user: { age: 31 } }); // name이 통째로 사라지기도 함

// ✅ 각 단계를 복사하고, 바꿀 값만 덮어쓴다
setState({
  ...state,
  user: { ...state.user, age: 31 },
});</p>
                                </div>                <div id="SE-c965e986-5fc3-4a31-9b25-b6a72bbda0ae">
                                    <p id="SE-51a17e99-f229-4dee-bb97-d5ea0dc78c85"><span id="SE-0eeacd2e-b74d-428e-a34c-7c35b1d69512">중첩이 깊어질수록 번거롭습니다. 그래서 실무에서는 Immer 같은 라이브러리로 이 복사를 간편하게 처리하기도 합니다. 다만 입문 단계에서는 "각 단계를 복사하고 바꿀 값만 덮어쓴다"는 원리를 손으로 익히는 게 먼저입니다.</span></p><p id="SE-df254c53-8548-42b7-8d77-230ab645b352"><span id="SE-f763670f-286b-49ef-a4fa-d1a91951fa31">​</span></p><p id="SE-0553507a-c639-4459-964c-7e254ebd7928"><span id="SE-f1ce29dc-03ad-45b3-bb4d-b61d344bace8">왜 이렇게까지 불변성을 지킬까? React가 "참조 비교"로 변경을 감지하기 때문만은 아닙니다. React Compiler도 state가 불변이라는 가정 위에서 동작합니다. state를 직접 변경하면 React의 재렌더 감지도, 컴파일러의 최적화도 어긋날 수 있습니다. 불변성은 React 생태계 전체가 딛고 선 약속입니다.</span></p>
                            </div>                                                <div id="SE-8f6416e2-ed4b-46b4-a26e-74b149725007">
                                    <p id="SE-65ad3d0c-ec33-44a1-a225-be8f5eb01cb4"><span id="SE-2677d3d8-9846-41fe-8b21-95d5240a63b0">​</span></p><ul><li><p id="SE-e6f3227f-8561-492c-9326-a0d3c6829a7f"><span id="SE-95738291-7344-4a03-b7e1-e14cc99ef7fe">React는 한 이벤트의 여러 set 호출을 모아 한 번만 재렌더한다(배칭).</span></p></li><li><p id="SE-5a2d8452-d57b-49a4-b4a4-528641c4d3b4"><span id="SE-5a96dc8f-53b1-4d63-880b-c9e0e95b0a2c">다음 값이 이전 값에 의존하면 업데이터 함수 set((prev) =&gt; ...)를 쓴다. 스냅샷에 갇히지 않고 누적된다.</span></p></li><li><p id="SE-de271fe6-ea33-476b-b021-b45558431b05"><span id="SE-38af8096-1e6d-482b-8eff-f43cd40c2322">객체·배열 state는 직접 수정하지 않는다(불변성). 새 객체/배열로 교체한다.</span></p><ul><li><p id="SE-a428ae0f-0b43-437c-9cf4-bcb38b3ee03a"><span id="SE-d4493c54-3a41-48f8-9972-bfca0124667d">객체: { ...obj, 바꿀키: 새값 }</span></p></li><li><p id="SE-371abacf-cb0a-47ce-a7af-17aae4026b83"><span id="SE-16ae06c2-364c-4bbb-af12-5563f53d3798">배열 추가: [...arr, 새항목] / 삭제: filter / 수정: map</span></p></li></ul></li><li><p id="SE-134379b8-fe42-4210-a211-d9a704146075"><span id="SE-0277eb20-df73-4705-a572-51c6ec60aa9c">...는 얕은 복사다. 중첩 객체는 각 단계를 복사해야 한다.</span></p></li><li><p id="SE-ea0e455b-f0f6-4094-83ab-6950ca5406b7"><span id="SE-a1b2ed19-130e-4c49-a20c-011afcbc43d8">불변성은 React의 변경 감지와 React Compiler 최적화의 공통 전제다.</span></p></li></ul>
                            </div>                                                <div id="SE-9c76bba1-c316-4892-9ec4-692a4babf97a">
                                    <p id="SE-eef6a6f7-8f68-4d11-86d1-52b30f945dd9"><span id="SE-7b014121-6a2d-4fe3-a887-37fac6273237">​</span></p><ul><li><p id="SE-b5ee268b-97d0-4e24-a0fc-fb1465f5fa62"><span id="SE-d832f5d8-1977-442e-b3c0-f442a67164e9">Queueing a Series of State Updates — React 공식 문서 (확인: 2026-06-14)</span></p></li><li><p id="SE-82572f04-71e7-497b-b0ae-3d28024f70fe"><span id="SE-cafdb0b3-0499-4d12-a199-5ee3dbe1b16a">Updating Objects in State — React 공식 문서 (확인: 2026-06-14)</span></p></li><li><p id="SE-fb9f0cd1-de70-4aef-80f5-8e01546ebe86"><span id="SE-b4b13c23-0ba7-4f03-bc8f-1dec3233bd1d">Updating Arrays in State — React 공식 문서 (확인: 2026-06-14)</span></p></li></ul><p id="SE-603246d1-e6ee-4ad0-8e8c-acd75e96e1f3"><span id="SE-e37d8aff-b1df-492d-90c9-bb338f555d32">​</span></p><p id="SE-bf21a652-7f7c-4e48-99ec-268744d3b72f"><span id="SE-4104059a-e519-4f11-ba54-1ac8b413d778">​</span></p><p id="SE-da51ff6c-e038-4aa6-bf40-32b3a4cd01eb"><span id="SE-b534c720-44d7-4c57-9671-a78439194922">​</span></p><p id="SE-973b7b50-5559-49c5-97e3-dd87a3565028"><span id="SE-b9fd7638-685a-4611-90a5-c6cbc7b24a1d">​</span></p>
                            </div>    </div></div>

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

2부의 마지막 챕터입니다. 지난 챕터에서 "state는 스냅샷"이라 한 렌더 안에서는 값이 고정된다는 걸 배웠습니다. 그래서 setCount(count + 1)을 세 번 불러도 1만 올랐죠. 이번 챕터는 그 다음 이야기입니다. 정말로 값을 누적하는 법(업데이터 함수), React가 여러 set을 모아 처리하는 배칭, 그리고 숫자가 아니라 객체와 배열을 state로 다룰 때 반드시 지켜야 하는 불변성을 배웁니다. 배칭 — React는 set 호출을 모아서 처리한다 먼저 React가 set을 어떻게 처리하는지 봅시다. 한 이벤트 핸들러 안에서 set을 여러 번 불러도, React는 매번 화면을 다시 그리지 않습니다. 핸들러가 끝날 때까지 기다렸다가, 모인 변경을 한 번.......

업데이터 함수와 불변성 — 객체·배열 state 다루기

댓글