React Query

React Query란 서버 상태(server state)를 관리하는 라이브러리다. 서버 상태란

• 원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다
• 데이터를 가져오고 업데이트하기 위해선 비동기 API가 필요하다
• 다른 사람과 함께 사용하며, 내가 모르는 사이에 업데이트될 수 있다
• 앱에서 사용하는 데이터가 “유효 기간이 지난” 상태가 될 가능성을 가진다.

예를 들어 쇼핑몰의 상품 목록, 게시판의 댓글, 배달앱의 주문 진행 상황 등은 모두 위와 같은 특성을 가지고 있다. 그렇기에 다음과 같은 작업에 대한 필요가 생긴다.

• 캐싱
• 서버 데이터 중복 호출 제거
• 만료된 데이터를 백그라운드에서 제거하기
• 데이터가 언제 만료되는지 알고 있기
• 만료된 데이터는 가능한 빨리 업데이트하기
• 페이지네이션, 레이지 로딩 데이터의 성능 최적화
• 서버 상태의 메모리 관리 및 가비지 콜렉션
• 쿼리 결과의 구조 공유를 통한 메모이제이션

위 글로는 어떤 경우에 사용되며 사용할 필요성에 대한 설명이 부족한 것 같아 구체적인 상황을 들어 설명하겠습니다.

캐싱처리로 더 빠른 데이터 표현

캐싱된 데이터 조작

특정 이벤트에서 API 최신화(캐싱 된 데이터 활용 => 더 빠른 사용자 경험 유도)

다른 컴포넌트에서 특정 API를 호출하지 않고 간편히 활용

페이지네이션 || 페이지 로딩의 성능 최적화

이런 한 기능을 요구할 시에 아주 적합한 라이브러리로 생각됩니다.

저도 이 부분에서 찾아 봤을 때 Next.js를 개발한 회사 vercel의 SWR 라이브러리에 대한 관련 자료를 처음에 접하게 되었습니다. 기본적인 부분만 숙지 한 상태에서 우연찮게 youtube강의로 처음 접하게 되었는데 배울 수록 매우 매력적인 기능이라 끝까지 공부 후 공부 정리 필요성을 느껴 작성하게 되었습니다. 우선 기본적인 사용방법에 대해서는 참고 사이트를 공유드리겠습니다. 그 중에 제가 받아 드리기에 헷갈렸던 useMutation을 제 생각대로 정리해보겠습니다.

참고 자료들에서는 CUD(create,update,delete) api에서는 useQuery를 사용하는 걸 권하지않고 useMutation 훅을 이용하길 권장하고 있습니다. useMutation은 CUD작업에서 굳이 새로운 API를 호출해서 최신화 하지않고 좀 더 빠르고 서버 측에 책임을 두지않는 방식으로 클라이언트 측에서 직접 데이터를 추가&&관리 하는 방식으로 이용하면 되는 걸로 파악했습니다. 예를 들어 새로운 댓글을 등록 시 해당 댓글에 대한 전체 API를 호출하지않고 프론트에 새로운 댓글만 추가해주는 방식입니다. 굳이 저 방식이 아닌 직접 구현하면 더 쉬울 거 같긴하지만 useMutation 훅의 옵션으로 데이터 최신화&& 관리 등 세부적인 상태도 관리하기 용이해 숙지하고 있으면 적재적소에 맞게 쓸 수 있을 도움되는 기능이라고 생각합니다. 더 나아가서 쿼리 무효화(Invalidation)을 이용해 최신화 시크는 방법 등 기능이 많으니 꼭 한번 경험해 보길 추천드립니다. 제가 간략히 적용한 사이트와 글을 작성하는데 도움이 됬던 자료들도 공유드리니 참고 해주세요.

#Git
https://github.com/kimjunyeob95/react-query
#웹페이지
http://13.125.116.208:8090/
#참고 자료
https://www.youtube.com/watch?v=VtWkSCZX0Ec&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2
https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z