[ React / Project2 ] 기존 프로젝트 재구성(re-factor) with React Query

React Query 를 접하고 전역 데이터 state 관리할 수 있는 걸 알게 됐다. 따라서 redux와 같은(상태 관리 프로그램 등)을 대체할 수도 있다는 것을 확인 했다.

 

기존 code : server를 통해서 데이터 핸들링 및 redux

node.js

Client에서 Server로 request를 보내면 공공도서관 API로 대신 정보를 보내준다. Server는 받은 정보를 다시 Client로 보낸다.

 

(*공공도서관 API는 하루 500개 무료이다.)

 

변경한 Code : React Query with useQuery dependent Query

이번에 커피챗을 하면서 React Query를 써보라는 권유를 받아서 사용해볼 목적과 기존 프로젝트를 보수해 볼 목적으로 사용했다.

 

보수 목적

1. fetch data가  다른 페이지 혹은 다른 텝으로 이동해도 그대로 존재할 것(stale 여기선 고민 x )
    => navigate ( -1 ) by react router 해도 기존 데이터가 그대로 있을 것.
    => 인도 도서의 경우, 하루 단위로 업데이트 되기때문에 stale 하루 단위는 크게 상관 없음.
2. 검색 버튼을 누릴 시, fetch를 진핼 할 것.

 

해결방법

ueQuery : enabled

• component App()에 바로 사용했다.
• enabled를 활용하여 '검색하기' 버튼을 누를 시면 fetch를 하려고 했다. by queryBoolean useState

 

onSearch function with ToggleA

• <SearchForm /> 이라는 component(자식)에 onSearch Function을 props로 전달해 자식 컴포넌의 정보를 <App /> component(부모)로 가져온다.
• onSearch function이 실핼될 때, queryBoolean의 값을 변경한다.

 

basic fetech  wwith ToggleB

• finally에 queryBoolean을 false로 만들어서 자동으로 fetch되는 현상 방지한다.

 

 

어려 실패 방법들

이거 하나 알아내는데 이틀이 걸렸다. 곰홈에서는 다양한 방식이 있었으나 상세한 설명이 없어서 처음 접하는 나는 이해하기 어려웠다. 하다 무조건 동일하게 따라 쳐야했다. 게다가 영어로 읽는 것에 나름에 한계가 있어서..(A와 C의 의존도를 이해하면서 해야하는데 문서의 양이 너무 많아서...)

 

시도한 방식 1 : Lazy Queries

React Query에 대한 이해도가 없다보니 그대로 따라 쳤는데, queryFn :() => fetchTodos( parameter ) >> 이 공식에서 parameter를 무조건 filter로 넣어야 하는지 알았다. 하여 검색 값들을 전달 할 수 없어 포기.

 

시도한 방식 2 : dependent Query( 단, enabled을 어떤 식으로 사용하는지 이해 x)

enabled에 아무거나 넣어도 되는줄 알고 1) onSearch Function을 넣어서도 시도, 2) 다른 useState 등을 넣었다. 예를 들어 내 검색에는 일자 값이 들어가서 끝나는 검색일을 넣었는데 안 됐다.

상당한 시간을 할애 했다.

 

 

참조한 방식

그냥 들어오지 마자 fetch되도록 하는 방식으로 변경할까 해다가 마지막으로 youtube에서 발견한 문서.

enabled를 boolean으로 처리

 

 

ps

아직 많이 부족하다고 생각한다. 기술부채라는 말이 있다. 지금은 많은 컴퓨터 리소스를 써서 작성하지라도 작동 한다는 것에 만족한다. 다만 나중에 좀 더 컴퓨터 리소스를 적게 쓸 수 있는 방식으로 성장하고 싶다.

 

 

참조

https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries

https://www.ezfrontend.com/docs/tanstack-dependent-query