오픈마켓 프로젝트)React-Query 는 어떻게 데이터가 동기화 되는가

0. 글을 쓰게 된 이유

오픈마켓 프로젝트에서 서버데이터를 기존에 Redux-Toolkit 의 createAsyncThunk 로 다뤘었다.

서버데이터를 캐싱,동기화가 잘 되는 React-Query 로 리팩토링 했었다.

나는 단지... React-Query 의 저런 장점이 있어서 리팩토링을 했었는데.. 얼마전에 개발자 시니어분께서 동기화가 정말로 되는지 확인을 했냐고 물어보셨다.

 

머리를 땅 하고 맞은 기분이었다!!

 

동기화가 되겠거니..하고만 생각하고 있었는데...확인을 안했던 것이다...ㅎㅎㅎ

그리고 새로운 데이터가 서버에 등록이 되는데 그걸 클라이언트가 어떻게 알아차리고 데이터를 업데이트 시키는지 물어보셨는데 대답을 하나도 하지 못했다!! 이제 그걸 알아보도록 하겠다

 

1. 쇼핑몰 페이지를 통해 데이터가 동기화되는걸 우선 봐보자

✅ 사실 상품을 진열하는 페이지는 굳이 실시간 데이터 동기화가 필요없다고 생각한다. 주식차트나와 같이 실시간 데이터가 중요한 페이지가 아니기 때문이다. 하지만, 그래도 어떻게 밑에 동영상처럼 

판매자가 상품을 삭제했을때 메인 화면에서 상품이 저절로 삭제되는 것일까?

판매자 센터에서 상품을 삭제를 하고 상품 메인 페이지에서 새로고침을 하면 당연히 데이터가 동기화 된다.

그런데, 새로고침을 하지 않았는데도 어떻게... 곧 상품이 삭제가 된다.

데이터가 알아서 동기화가 되고있네..어떻게 데이터가 동기화 되고 있는거지?

 

2. 과연 저절로 데이터가 변경되는 것일까? 클라이언트가 서버데이터 변화를 어떻게 알아차리는 것일까?

✅결론부터 말하자면, React-Query 는 서버의 데이터 변화를 자동으로 감지하지 않는다. 

✅아래와 같은 상황에서 데이터를 자동으로 다시 가져오도록 하는 것이다.

(refetchOnWindowFocus, refetchOnMount, refetchOnReconnect, refetchInterval)