State : A Component’s Memory

코드가 너무 많고 복잡도가 높다.

Store가 너무 크고 복잡하다. 상태관리보다 API 호출 코드가 더 많다.

Store의 비대함과 상태의 특성에 대한 고민..

TanStack Query

• 유용한 옵션과 인터페이스
• 리액트 훅과 같은 간단한 사용법
• 캐싱, 동기화 등 다양한 기능

Store는 간단한데, 컴포넌트가 복잡 → Zustand

• 적은 보일러 플레이트 코드
• 직관적인 사용법
• 작은 패키지 사이즈

quires → react-query 선언부 / stores → zustand store 선언부

hooks → business hooks, 비즈니스 로직의 훅 형태

service → 특정 API의 로그정의 등 비즈니스 로직의 함수 형태

형식에 집중 X, 본질을 알고 무엇을 하고 싶은지에 집중

컴포넌트에 집중된 비즈니스 로직을 각 레이어에 절절히 책임을 분산함으로써 가독성을 높이고 개발자 경험을 개선하면서 유지보수가 용이하게 코드를 변경 → 사업적 가치, 고객 가치에 긴밀한 대응이 가능한 환경 구축