1월 25일 - Zustand

Yullgiii·2024년 1월 25일

개발자로의 취업을 준비하며 TIL

목록 보기

124/286

Zustand란?

Zustand는 리액트(React) 상태 관리 라이브러리로, 글로벌 상태를 관리하는 데 사용됩니다. 상태 관리는 웹 애플리케이션에서 중요한 부분이며, Zustand는 이를 단순화하고 효율적으로 만들어줍니다. Redux, MobX와 같은 다른 상태 관리 라이브러리와 비교할 때, Zustand는 더 가볍고, 설정이 적으며, 사용하기 쉽다는 장점이 있습니다.

Zustand의 주요 특징

간결하고 직관적인 API: Zustand는 사용하기 쉬운 API를 제공합니다. 복잡한 설정이나 보일러플레이트 코드가 거의 없습니다.
훅 기반: Zustand는 React Hooks를 사용하여 상태 관리를 합니다. useStore 같은 훅을 사용하여 상태를 읽고 업데이트할 수 있습니다.
불변성 유지: Zustand는 상태의 불변성을 유지합니다. 이는 리액트 컴포넌트의 리렌더링을 최적화하는 데 도움이 됩니다.
미들웨어 지원: Zustand는 로깅, 지속성, 비동기 상태 등을 처리하기 위한 미들웨어를 지원합니다.

예시

import create from 'zustand'

// 상태 정의
const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

// 컴포넌트에서 사용
function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} bears around here ...</h1>
}

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

Zustand, Redux, MobX, 그리고 Context API 비교

Redux

엄격한 아키텍처: Redux는 엄격한 데이터 흐름과 불변성을 유지하는 아키텍처를 가지고 있습니다.
보일러플레이트 코드: Redux를 사용하면 많은 양의 보일러플레이트 코드를 작성해야 합니다. 예를 들어, 액션 타입, 액션 생성자, 리듀서 등을 정의해야 합니다.
미들웨어와 확장성: Redux는 다양한 미들웨어를 지원하여, 비동기 작업, 로깅, 상태 변화에 대한 반응 등을 용이하게 합니다.
대규모 프로젝트에 적합: Redux는 대규모 프로젝트와 팀에서 상태 관리를 일관되게 유지하는 데 유리합니다.

MobX

반응적 상태 관리: MobX는 관찰 가능한 상태와 반응적 업데이트를 제공합니다. 상태가 변하면 자동으로 관련 컴포넌트가 업데이트됩니다.
간편한 상태 업데이트: MobX를 사용하면 상태 업데이트 로직이 간결해지며, 보다 선언적인 코드 작성이 가능합니다.
밀접한 컴포넌트 간 결합: 상태와 컴포넌트 간의 밀접한 결합으로 인해, 때때로 디버깅이 복잡해질 수 있습니다.

Zustand

간결함과 자유도: Zustand는 매우 간결한 API를 제공하며, 불필요한 보일러플레이트 코드가 거의 없습니다. Redux보다 더 자유도가 높습니다.
훅 기반의 단순성: React Hooks 기반으로 간단하게 상태를 관리할 수 있습니다.
경량화와 유연성: Zustand는 가벼우며, 다양한 유형의 애플리케이션에서 유연하게 사용할 수 있습니다.

Context API

리액트 내장 기능: Context API는 React에 내장된 상태 관리 기능입니다. 추가 라이브러리 없이 사용할 수 있습니다.
컴포넌트 트리 전달: 상태를 컴포넌트 트리를 통해 깊숙이 전달할 수 있으며, prop drilling(중첩된 컴포넌트를 통한 props 전달) 문제를 해결합니다.
간단한 상태 관리에 적합: Context API는 간단한 상태 관리에 적합하지만, 복잡한 상태 로직이나 중앙 집중식 상태 관리에는 한계가 있을 수 있습니다.
성능 고려: Context API를 사용할 때는 컴포넌트의 불필요한 리렌더링을 피하기 위해 성능을 고려해야 합니다.