[React] 리액트의 useState와 Zustand의 store에 저장된 데이터는 브라우저의 어느 위치에 저장되는 것일까?

메모리와 브라우저의 관계

리액트를 활용해 애플리케이션을 개발하면서, 상태 관리의 메커니즘을 정확히 이해하는 것은 매우 중요합니다.

이번 글에서는 React의 useState와 Zustand의 상태 데이터가 어디에 저장되는지, 그리고 브라우저와 어떤 관계가 있는지 알아보겠습니다.

 

브라우저와 자바스크립트의 역할

브라우저는 HTML, CSS, JavaScript를 해석하고 실행하는 도구입니다.

브라우저 내부에는 자바스크립트 코드를 실행하기 위해 JavaScript 엔진(V8, SpiderMonkey 등)이 포함되어 있습니다.

이 엔진은 콜스택(Stack), 힙 메모리(Heap), 이벤트 루프(Event Loop) 등의 런타임 환경을 통해 자바스크립트를 실행합니다.

React와 Zustand의 상태 데이터는 브라우저의 JavaScript 런타임 메모리(RAM)에서 관리됩니다.

따라서 브라우저는 상태 데이터를 저장하지 않으며, 단순히 데이터를 메모리에 저장하고 관리하는 플랫폼 역할을 합니다.

 

React의 useState 데이터 저장 위치

useState의 데이터는 브라우저의 JavaScript 런타임 메모리 힙에 저장됩니다.

각 컴포넌트는 고유의 스코프를 가지며, 다른 컴포넌트에서 해당 상태에 직접 접근할 수 없습니다.

React는 컴포넌트를 렌더링하거나 리렌더링할 때 이 상태를 참조합니다.

컴포넌트가 언마운트되면 React는 해당 상태를 메모리에서 제거하며, 이는 브라우저의 가비지 컬렉션(Garbage Collection) 메커니즘을 통해 이루어집니다.

결론

React의 useState 데이터는 컴포넌트 라이프사이클 동안 메모리에 저장되며, 브라우저의 새로고침 또는 컴포넌트 언마운트 시 초기화됩니다.

 

Zustand 상태 데이터 저장 위치

Zustand의 상태는 브라우저의 JavaScript 런타임 메모리 힙에 저장되며, React 컴포넌트와 독립적으로 동작합니다.

상태 데이터는 전역 스코프에서 관리되므로, 여러 컴포넌트가 동일한 데이터를 참조하고 수정할 수 있습니다.

컴포넌트가 마운트되거나 언마운트되어도 Zustand의 상태 데이터는 유지됩니다.

그러나 Zustand의 상태 데이터도 브라우저의 새로고침이나 앱 종료 시 초기화됩니다.

이를 방지하기 위해 zustand persist 미들웨어를 사용해 데이터를 브라우저의 localStorage 또는 sessionStorage와 같은 저장소에 저장할 수 있습니다.

결론

기본적으로 Zustand 상태는 앱 실행 중에만 유지되지만, persist를 활용하면 영구적으로 저장할 수 있습니다.

 

useState와 Zustand의 주요 차이점

항목	React	Zustand
저장 위치	브라우저의 JavaScript 메모리 힙	브라우저의 JavaScript 메모리 힙
스코프	개별 컴포넌트 스코프	앱 전역 스코프
유지 기간	컴포넌트 라이프사이클 동안	앱 실행 동안
데이터 공유	컴포넌트 간 데이터 공유 불가	여러 컴포넌트에서 데이터 공유 가능
새로고침 시 상태 유지	유지되지 않음	유지되지 않음 (persist를 활용하면 유지 가능)

 

zustand persist를 활용한 상태 유지

Zustand의 상태 데이터를 브라우저 새로고침 이후에도 유지하려면 zustand persist 미들웨어를 사용할 수 있습니다.

이 미들웨어는 Zustand 데이터를 브라우저의 localStorage 또는 sessionStorage에 저장합니다.

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'zustand-storage', // localStorage 키 이름
    }
  )
);

function Counter() {
  const { count, increase } = useStore();
  return (
    <button onClick={increase}>Count: {count}</button>
  );
}

위 코드를 실행하면 Zustand의 상태 데이터가 localStorage에 저장됩니다.

따라서 앱을 새로고침하거나 종료한 후에도 상태가 복구됩니다.

 

결론

React와 Zustand는 각각 컴포넌트 상태 관리와 전역 상태 관리에 특화된 도구입니다.

React의 useState는 컴포넌트 스코프에서 메모리에 저장되고, Zustand는 전역 스코프에서 상태를 관리합니다.

두 상태 데이터 모두 브라우저의 자바스크립트 메모리 힙에 저장되며, 앱 실행 중에만 유지됩니다.

브라우저 새로고침 후에도 데이터를 유지하려면 Zustand의 persist 미들웨어나 브라우저 저장소(localStorage, sessionStorage 등)를 활용해야 합니다.

이처럼 React와 Zustand의 동작 원리를 이해하면 더 나은 상태 관리 설계와 효율적인 앱 개발이 가능해집니다.