> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management.md).

# 05. State Management

이 글에서는 상태관리에 대한 개념과 종류 그리고 상태 관리를 위해 사용되는 Prop Drilling 방식과 주요한 상태 관리 라이브러리인 Zustand에 대한 기본적인 사용법을 안내하는 글입니다.

{% hint style="info" %}
‘상태관리’에서 상태란 “어플리케이션(통상 화면)에 영항을 끼치는 순수 자바스크립트 객체”라고 할 수 있습니다.

통상 ‘변화하는 데이터’를 일컫는데, SPA(Single Page Application)에서는 컴포넌트의 포함관계에 따라서 상태가 전파되고, 이에 따라 화면이 갱신되기 때문에 무척 중요한 관리 요소입니다.
{% endhint %}

상태관리에는 크게 세가지로 나뉩니다.

| **종류**        | **주요 특징**                                                                                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 지역 상태         | <p>- 특정 컴포넌트 안에서만 관리되는 상태를 뜻함.<br>- 다른 컴포넌트들과 데이터를 공유하지 않음.<br>- 예를 들면, input, selectbox 등에서 사용자의 입력값을 받는 경우. (보통 Form 데이터들이 지역상태에 속함.)</p>                                                |
| 컴포넌트간 상태      | <p>- 여러가지 컴포넌트에서 관리되는 상태.<br>- 다수의 컴포넌트에서 쓰이고, 또 영향을 미치는 상태를 뜻함 (프로젝트 곳곳에서 쓰이는 공통 컴포넌트 Modal을 예로 들 수 있음).<br>- 상위 컴포넌트에서 하위 컴포넌트로 prop을 넘겨 해당 컴포넌트까지 전달되도록 하는 Prop Drilling 방식을 필요로 함.</p> |
| 전역 상태         | <p>- 프로젝트 전체에 영향을 끼치는 상태. 예를 들면, User 기능을 생각하면 됨.<br>- 이 또한 Prop Drilling 방식을 활용해서 부모에서 자식으로 데이터를 전달.</p>                                                                                  |
| Prop Drilling | <p>- props를 오직 하위 컴포넌트로 전달하는 용도로만 쓰임.<br>- 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 과정(컴포넌트 > 중간 컴포넌트 > 중간 컴포넌트 > ... > 타겟 컴포넌트).<br>- prop 의 추적이 어려움</p>                                                 |

React에서 상태관리는 전통적으로 Context API, Redux가 많이 쓰였는데, 이해하는데 노력이 많이 들어가는게 단점이었습니다.

최근에는 쉽고 강력한 대안적인 상태관리 프레임워크가 많이 쓰이는데, 여기에는 Mobx, Recoil, Zustand 등이 많이 쓰이고 있습니다. 그 중에서 Zustand의 사용자가 급격히 늘어나는 추세입니다.

이번 장에서는 Zustand의 기본 사용법에 대해서 설명합니다.