상태관리

배달의 민족 컨퍼런스인 우아콘을 보고 배달의민족에서는 상태 관리를 어떻게 하는지에 대해 정리해보고, 이걸 폴더 아키텍처인 FSD 아키텍처와 결합해 고민해보면 좋겠다는 생각이 들어 작성합니다!

리액트 에서의 상태 관리

다음 영상을 보고 참고 및 정리 했습니다.

https://www.youtube.com/watch?v=nkXIpGjVxWU&t=20s

서버 데이터 상태 관리: react-query

• 커스텀 훅을 사용 하듯 간편하게 사용할 수 있습니다.
• 다양한 옵션을 통해 캐싱, 데이터 재검증 등을 커스텀 할 수 있습니다.

<aside> 💡 쿼리 키를 관리하기 위해서 query-key-factory 라는 라이브러리를 활용한다고 합니다!

</aside>

Overview | TanStack Query Docs

클라이언트 데이터 상태 관리: zustand

• 사용이 간편해 러닝 커브가 낮습니다.
• 컴포넌트 밖에서도 상태 변경이 가능합니다.

Zustand

표준 개발 환경

하나의 앱을 5개의 계층으로 분리하고 각 계층은 다음과 같습니다.

• Page Layer : 페이지 컴포넌트 계층 입니다.
• Component Layer : 컴포넌트 계층 입니다.
• Business Layer : 비즈니스 로직을 포함하는 계층입니다. hooks 와 services 로 분리됩니다. 비즈니스 로직이 hook의 형태로 존재한다면 hooks 일반적인 함수의 형태로 존재한다면 services 로 분류됩니다.