Projects

[모모] React-Query의 캐싱기능으로 api요청을 줄여보자

2023. 8. 10. 02:47
목차
  1. 메인프로젝트에서
  2. 그래서
  3. 아무튼
  4. Reference

메인프로젝트에서

react-query를 사용해 유저정보를 get요청으로 받아 RTK 전역 상태로 저장해서 사용을 했었습니다.

받은 유저정보 데이터는 staleTime 즉 데이터의 신선도가 0이었기 때문에

계속해서 유저의 정보를 요청하는 api가 계속해서 호출이 되었습니다.

 

유저정보의 변경이 잦지 않기 때문에 이는 불필요한 호출이라고 판단했고

react-query가 캐싱기능을 제공하는데 RTK로 데이터를 캐싱할 이유가 없었습니다.

 

비동기 데이터를 리덕스가 관리하는 것이 적합하지 않은 이유는

아래 참고한 블로그에서 dispatch 시점... 에 관하여 설명이 잘 되어있습니다.

 

그래서

유저정보가 쓰이는 컴포넌트들을 보아하니
1. 헤더 (프로필사진, 닉네임)
2. 메인 글목록페이지 (유저 지역)
3. 마이페이지
기타 memberId가 쓰이는 모든 컴포넌트들 129837개

정도가 있어 useQuery 커스텀훅을 만들어 각 컴포넌트에 넣어주었습니다.

 

//로그인유저 정보 들고오는 custom hook

export default function useMyInfo() {
  const navigate = useNavigate();
  const token = localStorage.getItem('Authorization');
  const {
    data: myData,
    isLoading,
    error,
  } = useQuery<void, AxiosError, Member>(
    ['myInfo'],
    () => getData(`${BASE_URL}/members/userInfo`),
    {
      enabled: !!token,
      onError: (error) => {
        if (error.response?.status === 401 && token) {
          navigate('/');
          localStorage.clear();
          alert('토큰이 만료되었습니다. 다시 로그인해주세요.');
        } else {
          console.error('오류가 발생했습니다.', error.message);
        }
      },
      staleTime: 10 * 60 * 60 * 1000,
      cacheTime: 10 * 60 * 60 * 1000,
    },
  );
  return { myData, isLoading, error };
}

처음에 이 코드를 작성할 때 staleTime과 cacheTime을 Infinity로 주었는데

생각해 보니 새로고침, 쿼리 무효화를 하지 않는 이상 api요청이 가지 않고

그렇게 되면 토큰이 만료되어도 캐시 된 데이터를 받게 되므로 401 에러코드를 받을 수 없게 됩니다.

 

그래서 리프레시토큰 만료 시간인 10시간으로 설정을 해주었는데

또 의문인 건 유저정보 수정이나 위와 같은 이유로 중간에 api 요청이 가게 되면 그때 받은 데이터는 다시 10시간의 캐시타임을 가지게 되는 것일까요?

그렇게 된다면 토큰이 만료되어도 정보를 계속 사용할 수 있는 문제가 또 생기게 됩니다.

리프레시 토큰이 있더라도 데이터의 일관성이나 보안적 측면에서 액세스 토큰 유효시간이하로 설정하는 게 좋다고 하네요!

아무튼

커스텀훅에서 리턴된 값을 가지고 RTK의 useSelector처럼 컴포넌트 여기저기에 사용을 해 보았습니다.

  const { myData, isLoading, error } = useMyInfo();

이 화면에서 두 개의 컴포넌트에서 myInfo를 구독하고 있지만 network탭에는 api 요청이 한 번만 된 것을 볼 수 있습니다.

 

queryClient를 console.log 찍어보면 캐시된 내역을 확인 할 수 있습니다.

import { useQueryClient } from 'react-query';
//..생략
  const queryClient = useQueryClient();
  console.log(queryClient);

 

Reference

https://jbee.io/react/thinking-about-global-state/

 

전역 상태 관리에 대한 단상 (stale-while-revalidate)

이 글의 부제는 Stop Using Redux for Caching for API Response이다. 한 때 전역 상태 관리 도구로 Redux를 즐겨썼던 개발자로서 이제 더이상 Redux를 사용하지 않게 된 이유와 회고를 담은 글이다. Table of Contents

jbee.io

https://ttaerrim.tistory.com/53

 

리액트 쿼리의 StaleTime과 CacheTime

리액트 쿼리를 처음 사용할 때 헷갈릴 수 있는 개념 중 하나인 staleTime과 cacheTime에 대해 알아보도록 하겠습니다. ✎ staleTime stale의 사전적 정의는 [신선하지 않은, (만든 지) 오래된]입니다. 말 그

ttaerrim.tistory.com

 

'Projects' 카테고리의 다른 글

[모모] 라이트하우스 성능 개선기  (0) 2023.10.25
[모모] 리액트에서 파일 업로드하기(사용자 프로필 사진 바꾸기)  (0) 2023.09.06
[react-query] observer API와 react-query로 무한스크롤 구현하기  (4) 2023.08.31
[ESLint, Prettier, Git Hook, Husky] 팀원들과 코드 스타일을 맞추기 위해 설정하면 좋은 툴  (0) 2023.08.27
  1. 메인프로젝트에서
  2. 그래서
  3. 아무튼
  4. Reference
'Projects' 카테고리의 다른 글
  • [모모] 라이트하우스 성능 개선기
  • [모모] 리액트에서 파일 업로드하기(사용자 프로필 사진 바꾸기)
  • [react-query] observer API와 react-query로 무한스크롤 구현하기
  • [ESLint, Prettier, Git Hook, Husky] 팀원들과 코드 스타일을 맞추기 위해 설정하면 좋은 툴
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 메모이제이션
  • 알고리즘

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
[모모] React-Query의 캐싱기능으로 api요청을 줄여보자
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.