Zustand 기본 개념 정리

기존에 React를 공부하면서 상태관리 라이브러리는 Redux를 사용했었다. 아는게 그것 뿐이었고 가장 많이 사용하는 도구여서 사용했지만, Redux는 구조가 매우 복잡해서 처음 학습할 때부터 이해하기가 어려웠다. 최근에 React의 상태관리 라이브러리로 Zustand가 떠오르는 추세여서 기본적인 개념을 공부해봤다.

---

Zustand

React에서 최소한의 API를 사용하여 직관적이고 가벼운 방법으로 전역 상태를 관리할 수 있는 라이브러리.

독일어로 "상태"를 의미하며, 2020년 3월에 처음 출시되었다.

React의 상태 관리 시스템 (Context API나 useState, useReducer 등)의 대체제나 보완제로 사용된다. "store"라는 개념을 사용하여 전역 상태를 관리하며, 이 store는 상태(state)와 상태를 업데이트하는 메서드(actions)를 포함한다.

Zustand 특징

• 간결한 API: Zustand는 매우 간단한 API를 제공하며, create() 함수를 사용해 store를 정의할 수 있다. Redux와 같은 액션 타입, 리듀서, 미들웨어 등의 복잡한 설정 없이도 상태를 간편하게 관리할 수 있다.
• 성능 최적화: React에서 상태가 변경될 때 컴포넌트가 불필요하게 다시 렌더링되는 문제를 방지하기 위한 성능 최적화가 되어 있다. 상태가 변경될 때 관련 컴포넌트만 렌더링되도록 되어있어 불필요한 리렌더링을 최소화한다.
• 미들웨어와 플러그인: 상태 관리에 추가적인 기능이 필요한 경우 미들웨어를 사용할 수 있다. 예를 들어, 로컬 스토리지와의 동기화나 상태에 대한 로깅 등을 쉽게 구현할 수 있다.
• React의 종속성 최소화: React에 종속된 것이 아니라서, React 외의 프레임워크나 환경에서도 독립적으로 사용할 수 있는 상태 관리 라이브러리이다.
• React DevTools 지원: React 개발 도구와의 호환성을 제공하여 상태를 쉽게 추적하고 디버깅할 수 있다.

Zustand 장단점

장점

- 단순함: 복잡한 설정이나 추가 도구 없이 상태 관리가 가능하다. Redux와 달리 "보일러플레이트" 코드가 거의 없어 코드가 간결하다. - 퍼포먼스: React의 useState와 같은 퍼포먼스를 제공한다. 불필요한 리렌더링을 방지하기 위한 성능 최적화가 기본 적용되어, 컴포넌트는 필요한 경우에만 리렌더링된다. - 유연성: 상태를 공유해야 하는 경우나 특정 상태를 업데이트해야 하는 상황에서 매우 유연하게 사용할 수 있다. 비동기 함수나 비동기 상태 관리에도 유연하게 대처할 수 있다. - 작은 번들 크기: Zustand의 크기는 매우 작아(약 1kB) 프로젝트에 거의 부담을 주지 않는다. 이는 특히 번들 사이즈를 신경써야 하는 애플리케이션에서 중요한 장점이다. - 쉬운 학습곡선: 다른 복잡한 상태 관리 라이브러리보다 배우기 쉬우며, 기존의 React hooks와 유사한 사용 방식을 제공한다.

단점

- 기능의 제한: 상태 관리가 단순해야 할 경우에는 좋지만, 복잡한 상태 관리가 필요한 애플리케이션에서는 상태 변화의 흐름을 명확하게 정의하는 것이 어려울 수 있다. - 규모에서의 한계: 매우 대규모 애플리케이션에서는 Redux 같은 강력한 상태 관리 툴에 비해 부족할 수 있다. 복잡한 상태나 액션 흐름이 필요한 경우 상태 관리의 복잡성이 증가할 수 있다. - 커뮤니티와 생태계: Redux나 MobX에 비해 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} around</h1>
}

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

위 코드를 해석하자면,

• 가장 먼저 Zustand를 사용하기 위해서 create라는 이름으로 import를 했다.
• 다음으로는 useStore 함수 생성. useState처럼 기존의 상태와 set함수를 관리하는 부분을 만들게 되는데, Zustand에서는 이를 'store'라는 이름으로 관리한다.
  → useStore() 메소드로 스토어를 만들어서 zustand를 사용하고, create라는 함수에 파라미터로 (set) => {...} 라는 콜백함수가 들어가는데, 여기 콜백함수에서 set을 인자로 넣은 이유는 상태변경 설정을 해야하기 때문이다.
  → 여기에서는 bears의 초기값을 0으로 설정했고, 기존 상태에서 하나씩 증가되는 상태(increasePopulation)를 만들었고, 한번에 모두 사라지는 상태(removeAllBears)도 만들었다. ()=>set() 형식의 콜백함수는 상태 변경을 설정하기 위함이다.
  여기까지가 기본적인 store 설정이다.
• Zustand 상태관리를 사용할 컴포넌트에서 useStore()를 통해 불러와서 사용한다.
  useState를 사용할 때 리턴문 내부에서 set함수랑 state 불러오는거랑 사용방법이 같다.

---

보일러플레이트 코드(boilerplate code)

반복적으로, 기본적으로 작성해야 하는 코드.

특정 기능을 구현하기 위해 꼭 필요하지만 직접적으로 기능과 관련된 로직은 아니고, 형식적인 부분을 차지하는 코드들.

효율적이진 않지만, 구조를 유지하기 위해 어쩔 수 없이 작성해야 하는 경우가 많다.

예를 들어, Redux에서 상태 관리를 하려면:
1. 액션(action)을 정의하고,
2. 액션 타입을 만들고,
3. 리듀서(reducer)를 작성해서 상태 변화를 정의하고,
4. 그 후 디스패치(dispatch)를 통해 상태를 변경하는 흐름을 만들어야 한다. 

이 과정에서 실질적으로 상태를 변경하는 부분은 1~2줄일 수 있는데, 상태 변경을 구현하기 위해서 작성해야하는 많은 부분들을 '보일러플레이트'라고 부른다. Zustand는 보일러플레이트가 거의 없어서 더 간결하게 상태관리를 할 수 있다.

---

💡 보일러플레이트(boilerplate) 용어의 유래?

'보일러플레이트'라는 용어는 인쇄 산업에서 비롯되었다. 인쇄소에서는 같은 내용을 반복적으로 인쇄하기 위해 미리 제작해 놓은 금속판을 사용했는데, 이 판을 '보일러플레이트'라고 불렀다. 매번 같은 내용을 빠르게 인쇄하기 위해 사용하던 금속판 '보일러플레이트'의 개념이 소프트웨어 개발로 넘어오면서 코드에서도 비슷한 맥락으로 사용되기 시작한 것이다. 그러므로 작명 이유를 정리해보자면,

• 반복적 사용: 보일러플레이트 판처럼, 여러 프로젝트에서 반복적으로 사용될 수 있는 표준화된 코드를 의미한다.
• 기능적이지 않음: 기능적으로 핵심이 되는 부분이 아니라, 형식적이고 규칙적인 부분을 구성하는 코드라는 점에서 유사하다.
• 기본 구조 제공: 개발자가 핵심 로직에 집중할 수 있게 해주는 구조를 제공하지만, 불필요하게 긴 코드로 여겨지기도 한다.

즉, "보일러플레이트"라는 이름은 표준화되고 반복적인 작업을 의미하는 인쇄 산업의 용어에서 유래되어, 코드에서는 "기본적인 구조를 제공하지만 불필요하게 긴 코드"라는 개념을 나타내게 되었다.

---

참고하면 좋은 글/영상

※ Zustand 사용 예시 영상 - https://www.youtube.com/watch?v=nrljw-UwBcU

※ Zustand 핵심 정리 - https://www.heropy.dev/p/n74Tgc

Zustand 핵심 정리

https://hyunki99.tistory.com/111

[React] Zustand 사용 이유와 사용방법

https://yozm.wishket.com/magazine/detail/2233/

리액트 상태 관리 라이브러리, 어떤 것을 써야 할까? | 요즘IT