리액트에서 전역으로 상태를 관리하기 위해 라이브러리를 사용하려고 했다.

사용계기

작업을 하다가 자식들에게 props를 주는 것이 너무 많아 져서 코드가 꼬이는것도 많고 정리를 하기 위해서 사용하려고 마음 먹었다.
기존에 사용했던 그대로 recoil을 사용하려고 했는데 검색해보니 recoil을 더이상 사용하지 않고 보내줘야 한다는 글들이 많이 있었다.
기존에 잘 사용했기도 했어서 무슨 문제가 있나 블로그 글들을 읽어 보니
이번 년도 초(?) 쯤에 recoil 헤드 개발자가 퇴사를 하게 되었다고 한다. 그리고 기존 업데이트도 잘 되지 않고 있기도 하였고
ssr대응이 안되어서 문제들이 많이 있었다.

기존 recoil을 사용하는 것을 이런 글들을 보고 중단하게 되었다. 그리고 무엇이 지금 많이 사용되는지 트렌드를 보게 되었다.
npm trends

zustand가 많이 사용되고 jotal가 뜨고 있다고 하였다.

react-redux 를 사용하면 zustand로 많이 가고
jotal가 recoil과 비슷하게 atom형식으로 사용해서 recoil -> jotal 로 많이 이동한다고 했다.

나도 jotal로 갈까 고민도 하였지만 recoil을 많이 쓰기도 해서 지겨운 느낌도 들었기도하고 zustand가 사용량이 더 많았기에
zustand 공부도 할겸 zustand를 선택하게 되었다.

사용 후기

사용 법에 관련해서는 많은 정보가 블로그로 있기 때문에 간략하게 마지막으로 내가 썼던 방식만 정리해 보고자 한다.
후기를 먼저 말하자면

redux, recoil같은 경우 사전에 app.ts, app.js에서 감싸주는 작업이 필요했었다. (처음 사용하시는 분들은 모르겠지만 react-query같은 라이브러리를 사용하면 사전에 app.js 등에서 dom을 감싸서 사용해야 했었다. )

하지만 jotal, zustand는 감싸주는 작업이 필요없다. 바로 store에 가서 import 를 진행하고 바로 사용하면 되어서 엄청 편리하였다.
그리고 용량도 적어서 가벼운 느낌이 났다.

기존 recoil 에서는 reset, useRecoilState등등 기존 정의된 함수들의 기능이 있어서 그것도 편리하였는데 확실히 용량이 적어서 그런지 기본 내장 함수들이 없어서 그점은 조금 불편하기도 하였다. 뭐 자유도의 차이겠지만 reset부분을 recoil에서 잘 사용했는데

zustand를 사용하니 reset함수를 내가 만들어서 사용을 했다.

zustand를 사용해보니 캡슐화 처럼 사용할수 있던점이 가독성이 좋았던것 같다. 관련된 데이터와 함수들을 정리해서 export 해서 사용하니 정리가 잘된 느낌이 들었다.

recoil도 써보고 zustand 도 써봤는데 zustand가 recoil보다는 어려운 감이 있지만 쓰다보면 적용될것 같다.

다음은 내가 사용한 예시이다.

사용 예시

import { create } from "zustand";

interface SettingInfoStore {
  userData: GetUserCustomSentimentType;
  setUserData: (newData: GetUserCustomSentimentType) => void;
  setInitialData: (
    key: keyof GetUserCustomSentimentType,
    value: string | number
  ) => void;
  resetUserData: () => void;
}

export const useSettingInfoStore = create<SettingInfoStore>((set) => ({
  userData: { 넣고싶은데이터  },
  setUserData: (newData) => set({ userData: newData }),
  setInitialData: (key, newData) =>
    set((prev) => ({ userData: { ...prev.userData, [key]: newData } })),
  resetUserData: () =>
    set({
      userData: {리셋 데이터 
      },
    }),
}));

내가 사용한 코드이다. 기본 데이터들은 숨겼다.
나는 ts를 사용했기에 interface를 만들어 주었다.

crate함수로 모듈을 만들어 준다. 그리고 기본 데이터와 set함수를 만들어 준다. 파라미터의 set에서는 useSettingInfoStore 의 객체 값을 가져올수가 있다. props 느낌이다.

useState와 비슷하게 만들었는데 개별값을 변경해주는 함수도 따로 만들어 주었다.
하나로 합칠수도 있을것 같은데 일단 나눠서 함수를 만들어두었다.

차차 사용해보면서 익혀 나갈수 있을것 같다.