전역상태 관리 라이브러리 선택
상태?
prop와state는 모두 평이한 자바스크립트 객체이다.
둘 다 렌더링 출력에 영향을 주는 정보를 보유하고 있지만, 한 가지 중요한 방식으로 다르다.
props는 (함수의 매개변수와 유사) 구성요소에 전달되는 반면, state는 (함수 내에서 선언된 변수와 유사) 구성요소 내에서 관리한다.
-> 사용자와의 인터랙션을 통해 동적으로 계속 변화하는 데이터를 말한다.
이러한 state는 일관적이어야 한다. (데이터 무결성) -> 서로 다른 컴포넌트에서 동일한 상태를 다룬다면, 그 출처가 같아야한다. (우리가 useState를 통해서만 state를 변경시켜야 하는 이유)
전역상태?
리액트에서의 전역상태는 흔히 전역적으로 접근 가능한 상태이면서 기본
useState가 아닌 third-party 라이브러리(외부 라이브러리) 혹은 context를 사용하여 관리하는 상태
전역상태 관리는 왜 필요할까?
서로 다른 두 컴포넌트에 같은 데이터가 필요할 때, 직접적인 상태 전달이 어려워서 [현재 컴포넌트] -> [상위 컴포넌트] -> [다른 컴포넌트] 와 같이 불필요한 로직이 필요하게 됨 -> Props drilling이 많아지면서 해당 props가 어디서 왔는지 확인하기 어려워진다.
이러한 Props Drilling Problem을 해결하기 위해 전역 상태 관리 라이브러리가 등장했다.
Recoil, Jotai, Zustand
클라이언트의 상태만 전역 상태로 관리하기 위한 라이브러리
클라이언트 상태(UI 상태)로, 클라이언트가 제어권을 가지며 동기적으로 동작한다. 항상 최신값을 가진다.
ex. text 필드 값, 모달의 open 여부
SWR, React Query
서버 상태 데이터를 가져오는데 특화된 라이브러리
서버 상태(비동기 상태)로, 서버에서 관리되며 비동기적으로 동작한다. 클라이언트에게 보여지는 값은 조회한 시점의 snapshot(최신 값과 다를 수 있다)
ex. 게시판의 글 목록, 사용자 정보
현재는 일반적으로 SWR/ReactQuery + Recoil/Jotai/Zustand 형태의 전역상태 라이브러리를 선택하는 경우가 대다수이다.
