프론트엔드 상태관리

State: A Component’s Memory

Q. “스토어가 너무 크고 복잡하다.”

스토어 코드에 상태 관리 코드보다 API 호출 코드가 더 많다는 느낌을 받음.

실제로도 API 상태(isLoading 같은..)를 담는 값이 많았다. 리덕스/모빅스를 API Patching 용으로 쓰고 있는 것 같다는 고민을 하게 되었고, 이 고민 끝에 React-Query 에 다다르게 된다.

“리액트 쿼리르 도입하니 Store가 간단해졌는데, 컴포넌트가 복잡해졌다.”

특성에 맞춘 상태 관리(프로덕트 내부에서 유기적인 상호 작용)

Clinet에서 소유 및 관리하여 Client에서 온전히 제어가능한 상태 → Zustand

Client 외부에서 소유하며 Client에서는 일종의 캐시인 생태 → React-Query

React-Query

강력한 비동기 상태 관리 도구라고 한다.