1. Nextjs에서 zustand로 상태관리하기

저희 테크팀에서는 nextjs 상태관리에 대한 많은 고민 끝에 zustand를 사용하기로 하였습니다.

아래는 zustand를 사용하는 학습과정입니다.

Zustand

 

Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다. 

 

특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다. 

 

그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다.

const useBearStore = create((set) => ({
  // 초기값이 0으로 설정된 bears라는 상태 속성
  bears: 0,
  // bears를 증가 시키는 함수이고, 'set' 함수를 사용하여 이전 상태를 가져와서 bears 값을 1증가
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  // bears의 상태를 0으로 초기화
  removeAllBears: () => set({ bears: 0 }),
}))

 

Zustand의 store는 기본적으로 hook입니다. 여기에는 원시값, 객체, 함수 등을 모두 넣을 수 있습니다.

set 함수를 통해서 상태를 병합하고 업데이트합니다.

 

위 코드에서는 'create' 함수를 사용하여 useBearStore라는 상태관리 hook를 생성하고 있습니다.

이 함수는 상태 저장소를 만들기 위해 사용됩니다. 하나의 매개변수로 'set' 함수를 포함하는 콜백함수를 받아 상태를 업데이트합니다.

 

이제 만든 useBearStore를 작성하였으니 연결만 하면 끝입니다.

어디서든 해당 hook를 사용할 수 있으며, Provider가 필요하지 않습니다. 상태를 선택하면 컴포넌트는 변경 사항이 있을 때 다시 렌더링이 됩니다.

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

 

예제 코드와 같이 생성된 useBearStore라는 hook를 사용하여 업데이트 함수를 가져와 화면에 뿌리기도 하고, 동작시키기도 할 수 있습니다.

 

'BearCounter' 컴포넌트는 useBearStore를 호출하여 bears 상태를 렌더링 하여 화면에 표시하고,

'Controls' 컴포넌트는 increasePopulation를 통해서 버튼 클릭 시 실행됩니다.

 

이처럼 Zustand의 특징 중 하나는 Provider를 사용하지 않아도 상태를 가져올 수 있다는 점입니다. 예제의 소스처럼 작성하면 편리하게 상태가 변경될 때 컴포넌트는 변경 사항을 감지하고 다시 렌더링 하게 됩니다.

 

이상으로 사용하기 간편한 Zustand를 사용하여 상태관리 하는 방법에 대해 알아보았습니다.

 

예시 2

npm install zustand

 

/src/store/modal.ts

import { create } from 'zustand';

interface StateType {
  isModalOpen: boolean;
  setIsModalOpen: (isModalOpen: boolean) => void;
}
const useFileModalStore = create<StateType>((set) => ({
  isModalOpen: false,
  setIsModalOpen: (isModalOpen: boolean) => set({ isModalOpen }),
}));

export default useFileModalStore;

 

다른 component에서 사용시

import useFileModalStore from '@/store/modal';

const Page = () => {
    const {isModalOpen, setIsModalOpen} = useFileModalStore();