안녕하세요 깍돌이입니다.
기존에 중단되었던 자동화 시스템 중 아직 정식시작이 된건 아니지만 앞에 부분들을 어느정도 다 갈아 엎고
다시 하고 있는 도중 상태관리에 대해서 중간 점검? 같은 형태를 해야될거같아서 정식 포스팅은 아니지만 중간 정리용으로 남기려고 합니다.
Recoil
이제까지 Redux 만 가지고 상태관리를 해오던 터라 요즘엔 Recoil 을 쓴다는 이야기가 있어 redux에서 recoil로 한번 넘어가보려고 써보게 되었는데 따로 사용법을 포스팅할거는 없을거같다는 생각이 들었습니다.
사용법이 생각보다 너무 간단해서 .. 하지만 hydraton 을 지원하는 next.js에서는 recoil 사용시 아래와 같은 warning이 뜨게 됩니다. Duplicate atomkey '[key]' This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.
현재 2022-05-01 기준 Recoil 버전은 0.x 으로 베타 버전인데 해당 버전에 있는 알려진 이슈라고 하다보니 Redux에서 관리하던 상태를 전부 Recoil 로 가져오진 않았습니다.
현재 Recoil 에서 사용되는 상태는 이제 FE 에서 사용되는 Nav의 상태 ( Open , Close ) 나 화면단의 설정 값 등으로만 사용하고 있습니다. BE에서 받는 비동기 처리에 대해서는 Recoil 을 사용하지 않는 상태입니다.
React-Query
비동기 통신을 위한 데이터는 Recoil 을 사용하지 않기 때문에 비동기 통신 데이터는 React-Query 를 사용하고 있습니다.
처음에 사용할 때 고려 되었던 부분만 작성하도록 하겠습니다.
우선 React-Query 를 사용하게되면 QueryClientProvider 를 사용해야되는데 기존에 Recoil Root를 덮고 있어서
어떻게 써야되나 고민을 잠깐하게 되었는데 별건 없었습니다. 그냥 Recoil Root위에 덮어서 사용하면 됩니다.
GET
데이터를 가져와서 FE에 뿌려주는 형태로 사용시 아래와 같은 형태로 데이터를 요청해서 가져올수 있는데
React-Query 의 경우 캐싱이 기본이기 때문에 위와같이 가져오게되면
target_os가 A든 B든 돌아오는 값이 같다고 하여도 재 요청이 발생하지 않습니다.
( retry 와 refetchOnWindowFocus를 Fasle로 놓았기 때문에 그런것도 있지만 )
의도하는 바람은 target_os가 가 달라질때만 요청을 하는게 의도되는 바이기 때문입니다. ( 불필요한 retry X )
첫번째 해결방법은 refetch + useEffect 입니다.
아래와 같이 useEffect 와 refetch 를 하게되면 첫렌더링 후에 refetch 를 통하여 query 를 강제 재 발생합니다.
위와같에 하게되면 특이점이
컴포넌트 렌더링시
컴포넌트 렌더링 -> useQuery -> use Efffect -> useQuery 로 재 렌더링 -> fetch Data ( 비동기 완료 ) -> 재 렌더링
발생합니다.
다른 방법은 useQuery의 인스턴스를 다시 초기화 하는 방법입니다.
위와같이 useQuery 의 인스턴스를 props를 통해서 지정하게 되면 다른 키로 인식을 하기 때문에 다시 fetch 가 발생합니다.
렌더링이 발생하는 건 똑같이 나타나네요 ㅎㅎ;;
새로 fetch을 할때만 렌더링을 하고싶은데 이건 오늘 처음 공부해본거라 좀더 찾아봐야될거 같습니다.
현재 사용 방식은 인스턴스를 재 초기화 하는 방식으로 사용 하려고합니다.
refetch 충분히 괜찮아 보이지만 렌더링시에 props를 통해서 새로 받는 부분이 더나을거 같고 그리고 추후에
Query Invalidation 의 경우 특정 한 쿼리 인스턴스를 통해서 해야 하기에 현재 받아온 쿼리 인스턴스를 위와같이 써야 특정 할수 있기에 위와같이 쓰도록 하겠습니다.