[resumer] zustand persist 사용, 커링 currying

zustand 는 브라우저 메모리에 올라가기 때문에 새로고침을 하거나 창을 닫았다가 끄면 사라진다.

간단하게 유저 로그인 상태를 확인하고 유저 정보에 빠르게 접근하기 위해서 zustand 를 사용하는건데,

만약 새로고침이나 창을 닫았을때 유저 상태가 날아가버린다면 결국에는 세션으로 다시 상태를 체크해줘야 하고 그러면 zustand 를 사용함으로써 얻을 수 있는 장점이 가려진다는 생각이 들었다.

 

zustand 스토어 생성시 persist 미들웨어를 사용하면 로컬스토리지를 사용해서 위같은 문제를 방지할 수 있다.

 

공식 문서 예제를 살펴보자 " 함수명()() " 이렇게 생긴 낯선 문법을 발견.

분명 예전에 써봤는데 이게 뭐였지 싶어 다시 정리해본다

 

* Currying 함수

함수의 반환값이 함수인 경우. 또는 함수를 인자로 받는 경우를 "고차함수" 라고 한다.

고차함수를 바로 실행해주는 형태로 쓰면 currying 함수가 된다.

여러 인자를 받는 단일 함수의 형태이다.

 

예를 들면

function curry(f) { // 커링 변환을 하는 curry(f) 함수
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

// usage
function sum(a, b) {
  return a + b;
}

let curriedSum = curry(sum);

alert( curriedSum(1)(2) ); // 3

 간단하게 쓰면 이렇게 생겼다.

 

 

persist 미들웨어를 쓰기 위해서는 이 문법으로 스토어를 작성하면 된다.

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

type BearStore = {
  bears: number
  addABear: () => void
}

export const useBearStore = create<BearStore>()(
  persist(
    (set, get) => ({
      bears: 0,
      addABear: () => set({ bears: get().bears + 1 }),
    }),
    {
      name: 'food-storage', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
    },
  ),
)