새로고침하면 로그인이 풀리던 문제를 Zustand persist로 해결했다

전역 상태를 localStorage에 영속시키기

#프론트엔드 #zustand #상태관리 #React

관리자로 로그인해놓고 페이지를 새로고침했더니 로그인이 그냥 풀려버렸다. 다시 로그인 화면. React로 옮기면서 전역 상태는 Zustand 를 썼는데, 가볍고 보일러플레이트가 거의 없어서 마음에 들었지만 이 부분이 초반에 걸렸다 — 새로고침하면 상태가 전부 날아간다 . 이 글에선 이걸 persist 미들웨어로 어떻게 해결했는지 정리해본다. 왜 날아가나 당연한 일이긴 하다. Zustand든 뭐든 전역 상태는 메모리(자바스크립트 변수)에 들어 있다 . 새로고침하면 페이지가 통째로 다시 로드되면서 메모리가 초기화되니까, 상태도 같이 사라진다. 로딩 중이거나 일회성인 상태(모달 열림 여부 같은 것)는 사라져도 상관없다. 근데 로그인 정보처럼 새로고침해도 유지돼야 하는 상태 가 문제였다. persist 미들웨어 Zustand엔 persist 라는 미들웨어가 있다. 스토어를 이걸로 감싸주면, 상태가 바뀔 때마다 자동으로 localStorage에 저장하고, 페이지 로드될 때 거기서 자동 복원해준다. 내가 직접 localStorage를 건드릴 필요가 없다. import { create } from "zustand"; import { persist } from "zustand/middleware"; const useAdminStore = create( persist( (set) = ({ admin: '', setAdmin: (newAdmin) = set({ admin: newAdmin }), resetAdmin: () = set({ admin: '' }), }), { name: 'admin-storage', // localStorage에 저장될 키 이름 } ) ); 차이는 persist(...)로 한 번 감싼 것 뿐이다. 그런데 이걸로 admin 상태가 localStorage의 admin-storage 키에 자동 저장되고, 새로고침해도 복원된다. setAdmin을 부르면 알아서 저장까지 된다. 전부 persist하면 안 된다 처음엔 신나서 모든 스토어에 persist를 붙일 뻔했는데, 이건 좀 생각해봐야 한다. localStorage에 남는다는 건 브라우저를 닫았다 열어도 계속 남아 있다 는 뜻이다. 그래서 스토어를 성격에 따라 나눴다. 1. 로그인/관리자 상태 — persist 적용 (유지돼야 함) 2. 지금 보고 있는 글 데이터, 잠깐 쓰는 상태 — persist 안 함 (매번 새로 받아야 함) 실제로 글 목록을 persist 했다가, 새 글을 올렸는데 옛날 목록이 localStorage에서 복원돼서 안 보이는 일도 있었다. "유지돼야 하는 것"과 "항상 최신이어야 하는 것"을 구분하는 게 중요했다. 정리하면 Zustand persist는 "전역 상태를 localStorage에 자동으로 붙였다 뗐다 해주는" 미들웨어다. 새로고침에도 살아남아야 하는 상태(로그인 같은 것)에 딱 맞는다. 직접 localStorage 다루는 코드를 한 줄도 안 써도 된다는 게 제일 편했다. 다만 "메모리에만 있어야 할 것"과 "디스크에 남아야 할 것"을 구분하는 건 결국 내 몫이었다. 이 경계만 잘 잡으면, persist는 사용자 경험을 크게 끌어올려주는 작지만 강력한 도구다.