05. State Management

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

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

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

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

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

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

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

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