[PPLOG] Zustand 세팅하기

김현중·2024년 9월 17일

zustand 상태 관리 전역변수

PPLOG

목록 보기

3/14

카카오 엔터프라이즈 5기 먀옹팀의 프로젝트 PPLOG의 프론트엔드 기본 세팅 과정입니다.

🌏Zustand 세팅

Zustand란 무엇인가?

Zustand는 Reat 애플리케이션에서 상태 관리를 단순하고 직관적으로 처리할 수 있게 도와주는 상태 관리 라이브러리입니다. 상태 관리의 복잡성을 줄이면서도 성능과 유연성을 유지하는 것이 Zustand의 주된 목표입니다.

Zustand의 특징

React Hook 기반

Zustand는 React의 Hook을 통해 상태를 관리하며, 상태를 가져오고 수정하는 방식이 매우 자연스럽습니다. 이를 통해 컴포넌트 내에서 상태를 쉽게 정의하고 사용할 수 있습니다.

불필요한 리렌더링 방지

Zustand는 상태의 일부만 구독할 수 있어, 상태가 변경되어도 해당 부분과 관련된 컴포넌트만 리렌더링됩니다. 불필요한 리렌더링을 줄여 성능을 최적화할 수 있습니다.

미들웨어 지원

Zustand는 미들웨어를 쉽게 추가할 수 있는 기능을 제공합니다. 상태 관리 로직에서 로깅이나 비동기 작업을 추가하고자 할 때 유용합니다.

서버사이드 렌더링(SSR) 지원

Zustand는 SSR을 지원해서 클라이언트와 서버 사이에서 상태를 동기화할 수 있습니다.

상태 관리는 뭐길래?

(피카츄의 상태 데이터가 변화하면, UI에도 반영을 해주어야 함)

상태 관리는 애플리케이션에서 데이터를 효율적으로 관리하고, 다양한 컴포넌트 간에 일관되게 유지/공유 할 수 있도록 하는 과정입니다. React에서 상태는 UI에 표시될 데이터나 애플리케이션의 현재 상황을 나타냅니다.

🤔그렇다면 상태 관리가 필요한 이유가 뭘까요?

UI와 데이터의 동기화

애플리케이션에서 UI는 상태에 따라 변화합니다. 상태가 업데이트되면 해당 상태를 사용하는 컴포넌트가 다시 렌더링되어 UI가 최신 상태를 반영할 수 있게 됩니다. 이렇게 데이터와 UI가 동기화 시킬 수 있습니다.

복잡한 애플리케이션 구조

애플리케이션이 커지면 여러 컴포넌트가 다양한 데이터를 공유해야 하는 경우가 생깁니다. 각 컴포넌트가 독립적으로 상태를 관리하면 데이터가 일관성이 없어지거나, 컴포넌트 간 데이터를 전달하는 방식이 복잡해질 수 있습니다. 이때 전역 상태 관리를 통해 여러 컴포넌트가 공통 상태를 쉽게 접근할 수 있게합니다.

유지보수

체계적인 상태 관리가 이루어지면, 상태 변경이 한 곳에서 관리되기 때문에, 코드의 흐름이 더 명확하고 오류가 발생할 가능성이 줄어듭니다.

이렇게 상태 관리는 사용자 UI의 데이터 흐름을 명확하게 하고, 복잡한 애플리케이션에서도 일관성을 유지하는 중요한 역할을 합니다.

세팅하기

다음 명령어를 사용해 Zustand를 npm install합니다.

npm install zustand

상태 생성
Zustand는 상태를 만들기 위해 create 함수를 사용합니다. 상태는 함수 안에서 정의되며, 상태를 가져오고 업데이트하는 데 사용할 수 있습니다.

// stroe.ts
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

useStore: Zustand에서 상태를 관리하는 Hook
set: 상태를 업데이트하는 함수
increase, decrease: 상태 변경 로집을 포함하고 있으며, 상태 객체에 바로 접근하여 업이트할 수 있게 하는 함수

상태 사용
생성한 상태를 사용하려는 컴포넌트에서 useStore Hook을 사용하여 상태를 조회하고 업데이트 할 수 있습니다.

// Counter.tsx
const Counter = () => {
  const { count, increase, decrease } = useStore();
  
  return(
    <div>
    	<p>{count}</p>
    	<button onClick={increase}>증가</button>
		<button onClick={decrease}>감소</button>
    </div>
	);
};

이렇게 컴포넌트에서 상태를 사용하고 업데이트할 수 있습니다.

Zustand 확장 사용하기

비동기 작업 처리
Zustand는 비동기 작업도 처리할 수 있습니다. 비동기 요청을 위해서는 상태 내에서 async 함수를 사용할 수 있습니다.

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    set({ data: result });
  },
}));

미들웨어 추가
Zustand는 미들웨어를 통해 로깅, 비동기 작업, 퍼시스트 등 다양한 기능을 추가할 수 있습니다.

import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist((set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }))
  )
);

미들웨어는 뭔데?

미들웨어는 SW 시스템에서 요청과 응답 사이에 위치하며, 중간에서 추가적인 처리를 담당하는 코드입니다. 웹 애플리케이션에서 미들웨어는 일반적으로 클라이언트가 서버로 보낸 요청을 가로채고, 이를 처리 혹은 수정해서 다시 서버로 넘기거나, 서버가 클라이언트로 응답을 하기 전에 추가 작업을 수행하는 역할을 합니다.

Zustand의 퍼시스트(persist)는 상태를 브라우저의 로컬 스토리지 또는 세션 스토리지에 자동으로 저장하고, 애플리케이션이 다시 로드될 때 그 상태를 복원하는 기능을 제공하는 미들웨어입니다. 이는 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열었을 때도 이전 상태를 유지하고 싶은 경우에 유용합니다.

Redux 대신 Zustand를 사용한 이유

Zustand는 상태 관리가 상대적으로 단순하고, 설정이 간편하며 보일러 플레이트 코드가 거의 없어 개발 속도를 높일 수 있기 때문입니다. Redux처럼 복잡한 상태 로직이나 미들웨어가 필요하지 않은 경우, Zustand는 함수형 API를 통해 직관적이고 쉽게 상태 관리를 구현할 수 있습니다.

그리고 성능 최적화 측면에서 불필요한 리렌더링을 방지할 수 있기 때문입니다.