React 프레임워크 + zustand 라이브러리 사용

현 회사에서 React 프레임워크를 사용하고 있다. 

스타트업 특성 상 정리가 안되어있고.. es7에 장점을 최대한 이끌어내지 못하는 코드들이 많이 보였다..

 

프리랜서들이 걸쳐 나간 흔적이 꽤나 짙어보였다.

타입스크립트를 사용 하는 이유가 사라질정도로 any 도 남발하였고 api 문서가 정리된부분이 없어서 꽤나 애를 많이 먹는 작업이였다.

 

store 를 사용하지 않고 세션스토리지를 사용하는 모습이 많이 눈에 보였다.

리액트 store 는 익숙치 않아서 일단 책에서 읽은 내용과 검색한 내용을 합쳐서  zustand 라이브러리를 사용하여 store를 만들어 봤다.

 

기본 구조는  

type InitialState = ReturnType<typeof getDefaultInitialState>;
type StoreAction = {
    // 다양한 액션들의 타입을 정의
    // 예를 들어, setHospitalName, setIsHospital, setUserId 등 다양한 액션들이 정의되어 있음
};

const getDefaultInitialState = () => {
    // 초기 상태를 정의하는 함수
};

export const useStore = create(
    // persist 미들웨어를 사용하여 Zustand 상태를 생성
    persist<InitialState & StoreAction>(
        // set 함수를 통해 상태를 업데이트할 수 있는 액션들을 정의
        (set) => ({
            // 여러 액션들과 초기 상태를 포함한 객체를 반환
        }),
        {
            // persist 옵션 설정
            name: 'account',  // 상태를 지속시킬 때 사용할 이름
            storage: createJSONStorage(() => sessionStorage),  // 지속시킬 데이터를 저장할 storage를 설정 (여기서는 sessionStorage 사용)
        }
    )
)

 

위와 같은 형태로 만들어주고 사용 하였다. vuejs 에서 내장으로 있는 store와 거의 비슷한 느낌에 형태였다.

 

모든 프론트 프레임워크는 상태관리는 개념은 거의 비슷 하다고 느꼇다. 그부분에서 많은 어려움을 느끼지는 못하였다.

 

사용 방법은

 

type StoreAction = {

setCompanyName: (companyName: string) => void;

 

const getDefaultInitialState = () => ({
companyName: '',

 

const useStore = create(
persist<InitialState & StoreAction>(

setCompanyName: (companyName: string) => set({companyName}, false),

 

으로 값을 넣어주고 

 

import {useStore} from '@/lib/store';

const { companyName } = useStore();

 

위에처럼 변수로 선언해주고 사용한다.