전역 상태 관리 Redux Vs React Query

코드 리팩토링 도중 전역 상태 관리는 리액트 쿼리로도 가능한데(당시 푸터에서 데이터를 저장하고 뽑아쓰면 리렌더링이 일어나는 것을 확인해서 착각함) 그럼 리덕스는 안 써도 되는 것 아닐까 하는 생각에서 실험 시작.

 

왼쪽처럼 dispatch를 사용하여 전역으로 관리하던 값을 쿼리로 교체해보았다.

 

그러나 예상과 달리 쿼리에 저장된 값은 바뀌고 있는데 콘솔이 찍히질 않는다.

 

 

이 말은 곧 렌더링이 일어나지 않는다는 소리.

 

 

값이 바뀌었으니 화면이 바뀌어야 하는데 역시나 화면이 바뀌질 않았다.

 

여기서 의문.

 

 

푸터에 박혀있는 아이콘은 클릭 시 변경되는 값에 따라 초록색으로 잘 바뀌고 있는데, 대체 왜 같은 onClick함수에 담겨 있는 diaryViewState를 사용하는 다이어리는 바뀐 값에 따라 렌더링이 일어나고 있지 않은 걸까?

 

값은 같은 곳에서 똑같이 바뀌고 있는데 왜 푸터는 렌더링이 일어나고 왜 다이어리는 렌더링이 일어나지 않는걸까!!!!

 

수 시간 원인을 찾으며 방황한 결과, 나는 해답을 찾을 수 있었다.

 

 

다른 이유가 아니었다. 그냥 단순하게 리액트 쿼리를 이용하면 상태값이 바뀌는 컴포넌트 내에서만 렌더링이 일어난다는 소리였다.

그러니까...캐싱된 데이터는 state가 아니라 data였다!!!!

정답을 눈앞에 두고 너무 빙빙 돌고 있었다...

 

결론

 

리액트 쿼리만 쓴다면 setQueryData로 데이터를 바꾸었다 하더라도 리렌더링이 일어나지 않아서 다른 렌더링에 의존하거나 수동으로 리렌더링을 시켜줘야만 한다.

따라서 리액트 쿼리만으로 전역 상태를 관리할 순 없고, 리덕스나 리코일 같은 라이브러리를 같이 사용하는 것이 코드적으로나 정신적으로나 이롭다.

 

 

이런 걸 기준으로 판단해서 사용하면 될 듯.

 

렌더링을 일으켜야하는 경우 - 리덕스, 리코일

그냥 값만 뽑아서 쓰면 되는 경우 - 리액트 쿼리

새로고침 시에도 날아가지 않아야 하는 경우 - 로컬 스토리지, 세션 스토리지, 쿠키

 

---

그리고 난 추가 의문이 생겼다.

 

어.. 그럼 왜 푸터는 setQueryData로 리렌더링이 되고 있는거지???;;

 

https://jhchoi1182.tistory.com/149

useNavigate에 대한 고찰 (?)