💾 Zustand persist로 상태 데이터 쟁여두기

프론트엔드 개발을 하다 보면, 상태 관리는 언제나 풀기 어려운 숙제 중 하나로 다가옵니다. 사용자 설정을 저장하거나, 여러 탭에서 동일한 상태를 동기화하는 등, 복잡한 요구사항이 계속해서 쏟아지죠. 특히, 브라우저 새로고침이나 앱 종료 후에도 상태가 유지되어야 하는 경우라면 더 많은 고민이 필요합니다. 상태가 사라지면서 사용자가 입력한 데이터가 증발하는 상황은 누구에게도 좋은 경험이 아니니까요 😮‍💨

이러한 문제를 해결하기 위해 등장한 도구가 바로 Zustand persist입니다. Zustand는 본래 간단하고 직관적인 상태 관리 도구로 알려져 있지만, persist 미들웨어를 결합하면 상태를 브라우저 저장소에 저장하고 복원하는 기능까지 손쉽게 구현할 수 있습니다. 새로고침이나 탭 닫기 같은 상황에서도 상태가 유지되어, 사용자 경험을 매끄럽게 이어갈 수 있는 효율적인 도구입니다.

이번 포스트에서는 Zustand persist의 원리와 기본 사용법, 그리고 확장 가능한 기능과 활용 사례를 살펴보며 이 도구가 애플리케이션에서 어떻게 유용하게 쓰일 수 있는지 알아보겠습니다 👀

Zustand persist란 무엇인고

Zustand persist는 애플리케이션 상태를 브라우저 저장소(localStorage나 sessionStorage)에 저장함으로써, 새로고침이나 종료와 같은 상황에서도 상태가 초기화되지 않도록 합니다. Zustand 스토어 코드에 몇 줄의 설정만 추가하면 손쉽게 상태 저장과 복구 기능을 활성화할 수 있습니다.

이러한 기능은 상태 데이터를 직렬화(serialize) 및 역직렬화(deserialize) 하는 과정을 통해 작동합니다. 여기서 직렬화는 자바스크립트 객체를 JSON 문자열로 변환하는 작업을 의미합니다. 그렇게 변환된 데이터는 브라우저 저장소에 저장되고, 이후 역직렬화를 통해 JSON 문자열을 다시 자바스크립트 객체로 복원하여 원래 상태를 재현합니다. 이러한 과정을 통해 브라우저가 종료되거나 새로고침되더라도 상태를 유지할 수 있습니다.

기본 사용법

Zustand persist를 적용하려면, zustand/middleware 모듈을 사용하면 됩니다. 아래는 상태를 localStorage에 저장하고 복구하는 예시 코드입니다.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: "counter-storage", // localStorage에 저장될 키
    }
  )
);

export default useStore;

위 코드에서 persist 미들웨어는 Zustand 스토어를 확장하여, 상태 데이터를 localStorage에 저장하고, 필요할 때 이를 복구합니다. 예를 들어, count 값은 브라우저를 새로고침하거나 종료했다가 다시 열어도 그대로 유지됩니다.

persist 함수의 name 옵션은 데이터를 저장할 키 이름을 정의하며, 이를 통해 여러 저장소를 구분할 수 있습니다. 이렇게 간단한 설정으로 애플리케이션 상태를 효과적으로 관리할 수 있습니다.

저장소 설정과 활용

Zustand persist는 기본적으로 localStorage를 사용하지만,애플리케이션의 특성과 요구사항에 따라 sessionStorage나 IndexedDB와 같은 커스텀 저장소로 유연하게 전환할 수 있습니다. 이러한 유연성 덕분에 다양한 상황에 맞는 상태 관리 방식을 구현할 수 있습니다.

localStorage와 sessionStorage

그렇담 이들은 각각 어떤 특징이 있을까요? 우선, localStorage는 데이터를 브라우저가 닫힌 후에도 유지할 수 있는 장점이 있습니다. 여기에 저장된 데이터는 명시적으로 삭제하거나 브라우저 캐시를 지우지 않는 이상 지속적으로 유지됩니다. 이런 특성 덕분에 장바구니 상태, 다크 모드 설정처럼 사용자 환경을 보존해야 하는 데이터 관리에 이상적입니다.

이와 달리 sessionStorage는 브라우저 세션 동안에만 데이터를 저장하며, 브라우저를 닫으면 데이터가 초기화됩니다. 이 방식은 로그인 세션이나 임시 입력 데이터처럼 짧은 기간 동안만 상태를 유지해야 하는 경우에 적합합니다. 예를 들어, 사용자가 여러 브라우저 탭에서 독립적으로 작업을 진행하더라도, 각 탭에서 독립적인 세션 상태를 유지하도록 설계할 수 있습니다.

커스텀 저장소를 활용한 확장 가능성

이러한 내장 스토리지가 충족하지 못하는 요구사항이 있다면, 커스텀 저장소를 설정해 기능을 확장할 수 있습니다. 예를 들어, IndexedDB는 브라우저에서 대용량 데이터 저장과 복잡한 데이터 구조 관리에 적합한 대안입니다. 이를 통해 쇼핑몰 애플리케이션에서 사용자 구매 내역을 장기간 보관하거나, 게임 애플리케이션에서 저장 파일을 관리할 수 있습니다.

또한, 협업 도구와 같이 여러 사용자 간 데이터 동기화가 필수적인 경우, 브라우저와 서버 간 데이터를 실시간으로 동기화하는 커스텀 저장소를 구현하여 해결할 수 있습니다. 이렇게 하면 중앙 집중식 데이터 관리가 가능하며, 팀원 간 데이터 일관성을 유지할 수 있습니다.

커스텀 저장소를 구현하려면 데이터를 가져오기, 저장하기, 삭제하기 위한 메서드만 정의하면 됩니다. 이러한 방식으로 Zustand persist와 손쉽게 통합하여 특정 요구사항에 맞는 저장소를 설계할 수 있습니다.

Zustand persist가 적합한 상황

이렇듯 Zustand persist는 상태를 브라우저에 저장하고 복원함으로써 사용자 경험을 크게 향상시킬 수 있는데요, Zustand persist가 특히 활약할 수 있는 몇 가지 사례를 살펴보겠습니다.

브라우저 내에서만 사용하는 상태

서버와 동기화가 필요 없는 상태라면 Zustand persist는 간단하면서도 효과적인 솔루션입니다. 예를 들어, 다크 모드나 언어 설정과 같은 사용자 환경 설정은 브라우저 내에 저장하는 것만으로 충분합니다. 이러한 설정이 유지되면 사용자가 애플리케이션을 재방문할 때 동일한 환경을 제공할 수 있습니다. 서버 통신이 필요하지 않기 때문에 빠른 응답성과 더불어 일관된 사용자 경험을 제공합니다.

다단계 프로세스를 포함한 서비스

여러 단계를 거쳐야 하는 쇼핑몰 같은 서비스에서는 상태 유지를 통해 사용자 경험을 대폭 개선할 수 있습니다. 사용자가 장바구니에 상품을 담고 결제 페이지로 이동하는 도중 브라우저를 새로고침하거나 창을 닫아도 상태가 유지된다면, 사용자는 다시 처음부터 과정을 반복할 필요 없이 매끄럽게 작업을 이어갈 수 있습니다. 설문조사나 회원가입 같은 작업에서도 진행 상황을 저장해두면, 중도 이탈을 줄이고 작업 완료율을 높일 수 있습니다.

변경 빈도가 낮은 상태 관리

변경이 자주 발생하지 않는 상태는 브라우저에 저장하는 것이 효율적입니다. 예를 들어, 마지막 로그인 시각이나 선택한 필터 옵션 같은 데이터는 변경이 드물지만 사용자가 다시 방문했을 때 동일한 상태를 유지하는 것이 중요합니다. 이를 로컬에 저장하면 불필요한 네트워크 요청을 줄이고 애플리케이션의 응답 속도를 향상시킬 수 있습니다.

여러 탭이나 창에서 상태 동기화

브라우저의 여러 탭이나 창에서 동일한 상태를 공유할 수 있도록 지원하는 것도 중요한 사용자 경험 요소입니다. Zustand persist는 브라우저의 localStorage와 storage 이벤트를 활용하여 이러한 상태 동기화를 간단하게 구현할 수 있습니다. 예를 들어, 한 탭에서 장바구니에 상품을 추가하면 다른 탭에서도 즉시 반영된다면 사용자는 혼란 없이 애플리케이션을 사용할 수 있습니다. 이러한 기능은 서비스의 신뢰성을 높이고 사용자 만족도를 향상시킵니다.

도입 시 유의 사항

이렇듯 Zustand persist는 상태를 브라우저에 저장하고 복원하는 데 강력한 기능을 제공하지만, 모든 상태 관리 시나리오에 적합한 것은 아닙니다. 하지만 모든 도구가 그렇듯, 적절한 상황에 활용해야 효과를 극대화할 수 있겠죠 😤 잘못된 사용은 보안 문제를 초래하거나 성능 저하를 유발할 수 있으므로, 도입 전 몇 가지 주의해야 할 점을 꼼꼼히 고려해야 합니다.

민감한 데이터 저장에 대한 보안 우려

localStorage와 sessionStorage는 보안 수준이 낮아, 개발자 도구를 통해 저장된 데이터에 접근할 수 있습니다. 사용자의 인증 토큰이나 개인 식별 정보(PII)를 암호화 없이 저장하면 보안 취약점이 생길 수 있습니다. 민감한 데이터는 가능한 한 서버에서 관리하거나, 암호화 과정을 거쳐 저장해야 합니다. 가령, JWT는 HTTPOnly 쿠키에 저장하여 클라이언트 측 접근을 방지하는 것이 더 안전한 방법입니다.

저장 용량 제한과 성능 고려

브라우저의 localStorage와 sessionStorage는 약 5MB 정도의 데이터 저장 용량 제한이 있습니다. 이 제한을 초과하면 데이터가 저장되지 않거나 손실될 가능성이 있으므로, 저장해야 할 데이터의 크기를 신중히 고려해야 합니다. 예를 들어, 사용자가 업로드한 대량의 이미지 데이터나 복잡한 대규모 객체를 저장하려고 하면, 이러한 스토리지는 적합하지 않습니다. 대신, IndexedDB와 같은 대안적인 저장소를 활용하면 더 많은 데이터를 저장하고 관리할 수 있습니다. IndexedDB는 대용량 데이터 저장에 특화되어 있으며, 비동기 API를 제공해 성능 저하를 최소화합니다.

JSON으로 직렬화할 수 없는 데이터

Zustand persist는 데이터를 저장하기 위해 상태를 JSON으로 직렬화합니다. 그러나 Date 객체, Map, Set 등과 같이 JSON으로 변환할 수 없는 데이터는 저장 및 복원 과정에서 문제가 발생할 수 있습니다. 이러한 데이터를 처리하려면 serialize와 deserialize 옵션을 활용해 커스텀 직렬화 로직을 구현해야 합니다. 예를 들어, Date 객체는 ISO 형식의 문자열로 변환한 후 저장하고, 복원 시 문자열을 다시 Date 객체로 변환하는 방식을 사용할 수 있습니다. 이러한 방식은 데이터 무결성을 유지하면서 저장소 기능을 확장할 수 있도록 돕습니다.

동기화 지연과 데이터 일관성

localStorage는 여러 탭에서 상태를 공유할 수 있는 장점이 있지만, 동기화가 즉각적이지 않아 데이터 불일치가 발생할 수 있습니다. 브라우저의 storage 이벤트를 활용하면 동기화를 수동으로 처리할 수 있지만, 실시간 동기화가 필요한 애플리케이션에서는 WebSocket이나 서버 기반 동기화가 더 적합할 수 있습니다.

마무리하며

Zustand persist는 상태 관리를 단순화하고 사용자 경험을 향상시킬 수 있는 도구입니다. 브라우저 저장소를 활용한 간단한 설정으로 다양한 요구사항에 대응할 수 있으며, 적절한 보안 조치와 설계를 통해 안정적이고 효율적인 애플리케이션을 구현할 수 있습니다. Zustand persist로 사용자 친화적인 경험을 설계해 보세요 🐻