1. 문제 상황

현재, 프로필 페이지에 접근할 때, 프로필 수정 페이지에 접근할 때 사용자 정보를 useQuery를 이용해서 불러오고 있다. 만약 캐싱된 데이터가 남아 있다면, 캐싱된 데이터를 사용할 것이다.

현재, 프로필에 국가가 설정되어 있지 않다면, ‘국가 설정을 해주세요’ 토스트창을 띄우는 기획이 추가되었다.

여기서 드는 고민

캐싱된 데이터를 localStorage에 저장하고, 여기서 불러올 필요가 있을까? 기존 react-query의 캐싱된 데이터를 사용하면 되는 게 아닐까?

맞다. 서버로부터 전달받은 데이터는 모두 QueryClient객체에서 캐싱되어 저장하고 있다. localStroage 브라우저 저장소에 저장할 이유가 없다.

2. 결론

서버로부터 전달받은 서버데이터는 react-query를 사용하여 관리하고 있다. 이 때, 데이터를 매 번 요청하는 것이 아닌 캐싱된 데이터를 활용하고 있다. 모든 페이지에서 상태를 체크하기 위해서는, useQuery훅을 사용하여 캐싱된 데이터를 불러오고, 만약 캐싱된 데이터가 없다면 서버에 데이터를 요청하여 캐싱한다. 훅을 사용하기 위해서는 template.js를 활용하여야 한다. layout.js는 서버에서 먼저 실행이 되기 때문에 훅을 사용할 수 없다. template.js는 layout.js처럼 모든 페이지에서 실행되지만 useEffect, useState같은 훅을 사용할 수 있는 파일이다.

즉, template.js에서 useQuery로 사용자 데이터를 호출하여 사용자 정보를 체크해서 토스트를 띄어주면 된다.