[React] Zustand

---

1.Zustand

상태를 전역적으로 관리할 수 있으며, 사용하기 쉬운 API와 빠른 성능을 제공하는 리엑트 라이브러리

 

 

 

2.Zustand store

상태와 상태를 업데이트하는 함수들을 포함하고 있으며, 상태를 변경할 때마다 리렌더링을 트리거할수있다.
create함수를 통해 생성한다.

 

 

 

 

 

 

3.Context  방식 vs Zustand 방식

2-1. 상태 저장,업데이트

Context 방식

useState를 사용하여 상태를 컴포넌트마다 관리하고 
React.Dispatch<React.SetStateAction<T>> 을 사용하여 업데이트를 한다.

interface GlobalState {
  page: number;
  setPage: React.Dispatch<React.SetStateAction<number>>;
  searched: boolean;
  setSearched: React.Dispatch<React.SetStateAction<boolean>>;
  searchString: string;
  setSearchString: React.Dispatch<React.SetStateAction<string>>;
  searchClicked: boolean;
  setSearchClicked: React.Dispatch<React.SetStateAction<boolean>>; 
}

 

Zustand 방식

zustand 스토어에서 상태를 전역적으로 관리하고
set 함수를 사용하여 상태를 직접 업데이트한다.

interface GlobalState {
  page: number;
  setPage: (page: number) => void; 
  searched: boolean;
  setSearched: (searched: boolean) => void;
  searchString: string;
  setSearchString: (searchString: string) => void;
  searchClicked: boolean;
  setSearchClicked: (searchClicked: boolean) => void;
}

 

 

 

2-2.사용법

Context 방식

Context API와 Provider를 사용한 상태 관리
Provider로 상태 공유

// createContext를 사용하여 전역 상태를 관리할 Context를 생성
const GlobalStateContext = createContext<GlobalState | undefined>(undefined);

interface GlobalStateProviderProps {
    children: ReactNode;
}

const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({ children }) => {
  const [page, setPage] = useState<number>(1);
  const [searched, setSearched] = useState<boolean>(false);
  const [searchClicked, setSearchClicked] = useState<boolean>(false);  // 이 부분을 확인!
  const [searchString, setSearchString] = useState<string>('');

  const globalState = {
    page,
    setPage,
    searched,
    setSearched,
    searchString,
    setSearchString,
    searchClicked,
    setSearchClicked,
  };

  // GlobalStateContext.Provider를 사용하여 globalState를 하위 컴포넌트들에 제공
  return (
    <GlobalStateContext.Provider value={globalState}>
      {children}
    </GlobalStateContext.Provider>
  );
};

 

 

 

Zustand 방식

단일 스토어 방식으로 상태를 전역적으로 관리
useStore 훅을 통해 상태와 함수 직접 호출

const useStore = create<GlobalState>((set) => ({
  page: 1,
  setPage: (page) => set({ page }),
  searched: false,
  setSearched: (searched) => set({ searched }),
  searchString: '',
  setSearchString: (searchString) => set({ searchString }),
  searchClicked: false,
  setSearchClicked: (searchClicked) => set({ searchClicked }),
}));