230222 TIL : React Query 배운 내용

어제 RTK Query 학습하고

실무에도 적용했는데 확실히 기술 블로그보고

그냥 요즘 사람들 보면 다 리액트 쿼리를 사용하는거 같더라ㅠ 

그래서 급하게 공부해보는 리액트 쿼리 

어제 너무 졸려서 강의만 듣고 정리를 못했다

오늘 간단히 CRUD 만들어보고 

내일, 주말에 깊게 공부하는걸 일단 목표로... 📖

 

1. 기본세팅

- QueryClient, QueryClientProvider 를 사용한다. 사용방법만 비교했을때 RTK-Query랑 이름만 다를뿐 거의 비슷하게 사용한다. 리액트의 context도 비슷하게 사용하니 사실 context api를 제대로 공부했으면 그렇게 어려운일은 아닌듯 ?! (하지만 context를 안쓴지 꽤 되면서 또 까먹...)

 

2. Api 세팅

- 폴더 생성 방식도 RTK-Query랑 동일한데 이거는 강사님 스타일인것도 같아서 공식문서랑 다른 사람들 것도 좀 참고를 해봐야 겠다.

- api 세팅 방식, 즉 RTK-Query에서 Slice로 작성된 부분이 사실 리액트 쿼리가 훨씬 간편하다. RTK-Query는 어떤게 쿼리고, 뮤테이션이고 공식문서를 기반으로 딱딱 작성하는 느낌이라면 리액트 쿼리는 걍 리액트로 작성하기 때문에 뭔가 더 배우거 이럴 부분이 없었다. 좀 더 자유로운 느낌을 받았다  axios와 함께 사용하면 그냥 axios 작성하던 것을 그대로 작성하면 된다

 

3. Api 적용

- 이것도 RTK-Query 랑 거의 유사하다. useQuery에서 각 상태별로 확인할 수 있도록 제공해준다. 그리고 여기서 axios로 작성한 함수를 useQuery에 작성해주면 바로 사용 가능..

- 그리거 그냥 useQueryClient를 불러오면 이제 적용할 준비가 끝....

- RTK-Query와 다른점은 해당 코드를 곧바로 적고 여기서 mutation에 관련한 코드를 적는것인데 사실상 문법이 거의 비슷해서 딱히 공부할 그런것도 없었던거 같다. 아마 다른 사람들은 다른 파일에 정리해서 작성할듯?! 여튼 문법은 거의 비슷하긴한데 둘다 처음 공부한 입장에서는 리액트 쿼리가 작성하기 더 쉬웠던거 같다 

아 그리고 리액트쿼리의 transformResponse는 select로 할 수 있다 

 

여튼 어제 강의기반으로 간단히 살펴봤는데 오늘은 실습 + 공식문서 살펴보기 후 내일부터 토욜까지는 깊게 공부해보는 시간을 가져보도록해야겠다 😅