[RQ(35)] 커스텀 쿼리 훅: useTreatments

react-query 를 사용해서 server에서 data를 가져오기 위한 첫 번째 custom hook을 작성해보자.

Custom Hooks

큰 앱에서는, 각 data type에 따른 custom hook을 만드는 것이 일반적이다.

• 여러 컴포넌트들의 data에 access 해야 하는 경우 useQuery 호출을 다시 작성할 필요 없음.
• 매번 호출할 때 key를 혼동할 위험이 없음.
• queryFn을 혼동할 위험이 없음. (커스텀 훅에 바로 넣을 수 있고, 여러 컴포넌트들에서 가져올 필요가 없다.)
• display layer에서 data를 얻는 방법을 추상화해서 컴포넌트에서 분리할 수 있다. 만약 implementation을 변경하려면 hook을 update하면 되고, 컴포넌트를 update 할 필요가 없다.

코드 작성

useTreatments

• useQuery를 custom화.
  

axiosInstance를 사용해서 data를 가져온다.

코드 작성 전에,,, 알고가기 3개

01. axiosInstance

constants 파일의 baseURL을 사용하고 있음.

02. baseUrl

baseurl은 localhost:3030 으로 설정해놓은 것임. (server)

03. server

현재, 우리 server는 대략적으로 db라고 할 수 있는 항목을 반환하는 express server이지만, 실제로는 json 파일에 불과하다.

useTreatMents 코드 작성

우리는 일련의 treatments를 반환할 것임.

알고가기) queryKeys 상수

모든 호출에서 queryKey가 일관되게 유지되도록 하기 위함.

• 문자열 오타 걱정 x
• queryKey 일관성: cache가 cache된 data를 제공할 수 있도록 하는 것.

다시 돌아와서,,,
코드를 작성해보자면,

하지만 lazyday 웹에 들어가보면 에러가 있음.

다음 시간에, 해결해보자