[zustand] 전역상태로 좋아요 관리하기 & persist 새로고침 시 전역상태 초기화 방지

유저가 좋아요한 상품을 관리하는 방식으로 크게 두가지 방식이 있다.

 

1. 서버 API로 관리하기

서버측에서 데이터를 관리하기때문에, 데이터의 일관성, 보안, 데이터가 많아도 효율적으로 관리 할 수있다.

 

2. 프론트엔드 전역 상태로 관리하기

서버의 네트워크 요청없이 진행하기 때문에 UI가 빠르게 반응할 수 있지만, 일관성, 캐시를 지우거나 다른 기기를 사용할때 좋아요 상태 정보를 잃어버릴수 있는 문제점이 발생할 수있는 단점이 존재한다.

 

✨ 일반적으로 상업적인 웹앱에선 서버 API를 통한 관리 방식을 선호한다!

 

 

 

사용자가 좋아요 버튼을 토글하여 , 좋아요 누른 상품들의 productId를 zustand로 전역관리하여,

마이페이지에서 좋아요한 상품들의 productId을 가지고 api호출을 통해 가져와서 띄우는 방식을 채택하였다. 

 

🛠 Zustand persist : 새로고침 시 전역상태 초기화 방지

❗️페이지가 새로고침되거나, 브라우저가 재시작되면 Javascript 환경이 초기화되서 모든 메모리 내 상태 Zustand의 Store까지 초기화되어 전역관리하던 데이터가 날라는 문제가 발생한다.

 

💡해결방안

브라우저의 Storage에 저장하면 이 문제를 해결할 수 있다.

localStorage를 사용하면 브라우저를 닫았다가 다시 열어도 저장된 데이터가 유지되지만, 같은 브라우저로 로그아웃하고 다른 계정으로 로그인을 한다면 로컬스토리지에 저장된 데이터를 그대로 사용하기 때문에, 유저간 독립적으로 좋아요한 상품을 관리할수가 없기 때문에, 사용자가 로그아웃할 때 스토리지를 clear하는 로직을 구현해서 유저간 데이터 공유 문제를 해결한다.

 

프론트 측에서 관리를 하면, 기기나 브라우저가 변경되었을때, 유저의 좋아요한 상품을 반영할수 없는 한계는 존재한다🥲

 

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

interface LikeProductsState {
  likedProducts: number[];
  isLiked: (productId: number) => boolean;
  toggleLikedProduct: (productId: number) => void;
}

export const useLikedProductsStore = create(
  persist<LikeProductsState>(
    (set, get) => ({
      likedProducts: [],
      isLiked: (productId) => get().likedProducts.includes(productId),
      toggleLikedProduct: (productId) =>
        set((state) => {
          const isAlreadyLiked = state.likedProducts.includes(productId);
          if (isAlreadyLiked) {
            return {
              likedProducts: state.likedProducts.filter(
                (id) => id !== productId
              ),
            };
          } else {
            return {
              likedProducts: [...state.likedProducts, productId],
            };
          }
        }),
    }),
    {
      name: "liked-products",
    }
  )
);

 

 

👉🏻 Zustand의 persist를 사용해 로컬 스토리지 저장공간에 저장하고, 유저간 데이터 공유 문제를 방지하기 위해 로그아웃시 로컬스토리지에 저장된 좋아요한 상품정보를 제거해준다. 

 

회고

🥲 좋아요 기능을 일회성으로 사용하는 단점이 존재하지만, 일회성이 아닌 장기적으로 보관하고 싶다면 장바구니 기능을 사용할 수 있기때문에, 사용해보지 않은 persist와 스토리지를 사용해보는데 의미를 두기로 했다.

 

 

 

https://docs.pmnd.rs/zustand/integrations/persisting-store-data

Zustand Documentation