003. Recoil, React query 구조 설명 및 사용 방법

현재 store 구조에 대한 note

/api: axios로 이루어진 api 호출 로직이 들어 있습니다.
- /api/core: 다른 api 호출 로직에서 사용하는 코어 함수들이 있습니다.
/hooks/api: api에 있는 api와 react-query의 useQuery, useMuataion을 이용한 커스텀 훅이 들어 있습니다.
- /hooks/api/core: 다른 커스텀 훅에서 사용하는 코어 훅들이 있습니다.
/consts/react-query: react-query query에 사용하는 query key값을 모아두는 공간입니다.

api 에서 새로 추가하고자 하는 api 엔드포인트에 맞춰 디렉토리를 생성하거나, 이미 디렉토리가 있는 경우엔 기존의 디렉토리로 접근합니다.
- (playlist api를 추가한다면 api/playlist)
api/core 로직을 이용해 api 함수를 생성합니다.
- (예시: api/playlist/index.ts 에서 getPlaylist 함수 생성)
- request, response 타입 추가가 필요할 경우 types 에서 진행합니다.
hooks/api 에서 추가하고자 하는 api의 커스텀 훅을 생성합니다.
- (예시: getPlaylist 훅을 추가한다면 hooks/api/usePlaylistQuery 생성, putPlaylist라면 hooks/api/usePutPlaylistMutation)
- useQuery의 경우 새로 추가할 query의 key값을 consts/react-query/index.ts의 queryKeys에 추가합니다.
hooks/api/core 의 useCoreQuery, useCoreMutation을 이용해 커스텀 훅을 생성합니다.
보다 구체적인 사용 방법은 pages/test/react-query-recoil/index.tsx 를 참고해 주세요.

[닫혀있을 때]

우측 하단 꽃모양 아이콘이 Devtool 버튼입니다. 클릭해 열 수 있습니다.

[열려있을 때]