인프런 커뮤니티 질문&답변

shoncg

작성한 질문수

한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편

(4.4) 캐싱 메커니즘 이해하기 1

fetch api의 상태값 유지

작성

안녕하세요..강의 잘 보고 있습니다.

import { ITodoInfo } from "@/utils/types";

export async function fetchTodos(blngCoCd:string, userId:string) {
  const respose = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/todo/list?blngCoCd=${blngCoCd}&userId=${userId}` 
  );

  if (!respose.ok) {
    throw new Error("Fetch Todo Error");
  }

  const data: ITodoInfo[] = await respose.json();
  console.log('todo data=',JSON.stringify(data, null, 2));
  return data;
}

import { fetchTodos } from "@/api/todo/fetch-todos";
import useUserInfoStore from "@/store/user-info-store";
import { ILoginUserInfo } from "@/utils/types";
import { useQuery } from "@tanstack/react-query";

export function UserTodosData() {
  const loinData: ILoginUserInfo = useUserInfoStore((state) => state.userInfo);

  return useQuery({
    queryFn: () => fetchTodos(loinData.blngCoCd, loinData.userId) ,
    queryKey: ["todos"],
  });
}

이런식으로 zustand의 유저 정보를 가져와 훅에서 api를 호출을 하면 처음은 정보를 가져오는데.

refresh를 하면 다시 가져 올때 blngCoCd와 userId가 null이 되면서 리스트를 가져오지 못하네요.

zustand의 정보는 localstorage로 보관하고 있고...

const loinData: ILoginUserInfo| null = useUserInfoStore((state) => state.userInfo);

  const blngCoCd = loinData?.blngCoCd;
  const userId = loinData?.userId;

  // blngCoCd와 userId가 모두 존재할 때만 쿼리를 활성화합니다.
  const enabled = !!blngCoCd && !!userId;


  return useQuery({
    queryFn: () => fetchTodos(blngCoCd, userId) ,
    queryKey: ["todos", blngCoCd, userId],
    enabled: enabled,
  });

이렇게 변경을 했는데...

api에 파라미터를 넘겨야 하는경우 새로고침을 할 경우 이런식으로 하는게 일반적인가요?

react typescript react-query supabase zustand

답변 2

이정환 Winterlood

지식공유자

안녕하세요 shoncg님 이정환입니다.

네 일반적으로 특정 값이 존재할 경우에만 쿼리를 실행시키고 싶다면 enabled 옵션을 이용합니다. 옵션 하나만 설정해도 원하는 조건을 표현할 수 있어 지금으로써는 가장 좋은 해결 방법으로 보입니다.

PS. 강의 내용에 대한 질문이 아닌, 개인 프로젝트 관련된 질문이므로 정확한 맥락 파악이 어려워 답변의 범위가 제한적일 수 있다는 점 양해 부탁드립니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. shoncg님

새로고침 시 Zustand 상태가 초기화되면서 blngCoCd와 userId가 null이 되는 문제에 대해 고민하고 계시는군요. 현재 구성한 방식과 관련해 몇 가지 팁을 드리겠습니다.

Zustand와 LocalStorage

상태 유지:
Zustand의 정보를 localStorage에 저장했다면, 애플리케이션이 초기화될 때 localStorage의 정보를 Zustand의 초기 상태로 다시 불러와야 합니다. 이를 통해 사용자가 새로고침을 하더라도 상태가 유지됩니다.
상태 초기화 로직 추가:
Zustand에서 상태를 초기화하는 방법을 추가할 수 있습니다. 이는 상태를 불러오지 못한 경우, 새로 설정해주는 기능을 포함할 수 있도록 합니다.

React Query의 enabled 옵션

React Query의 enabled 옵션:
useQuery의 enabled 옵션을 사용하여 필요한 조건이 만족될 때만 데이터를 fetch할 수 있습니다. 귀하의 예시에서는 blngCoCd와 userId가 둘 다 존재할 때만 쿼리를 수행하도록 설정했습니다. 이는 매우 효과적인 방법입니다.

상태 저장 및 복구 예시

다음과 같은 방식으로 샘플 상태 저장 및 초기화를 구성할 수 있습니다. 이 코드는 Zustand와 localStorage를 활용한 상태 저장 및 불러오기 예제입니다. 실제 코드에서는 귀하의 요구사항에 맞게 수정해야 할 수 있습니다.

import create from 'zustand';

interface UserInfo {
  blngCoCd: string | null;
  userId: string | null;
}

const useUserInfoStore = create<UserInfo>((set) => ({
  blngCoCd: localStorage.getItem('blngCoCd'),
  userId: localStorage.getItem('userId'),
  setUserInfo: (info: UserInfo) => {
    localStorage.setItem('blngCoCd', info.blngCoCd || '');
    localStorage.setItem('userId', info.userId || '');
    set(info);
  }
}));

export default useUserInfoStore;

기본적으로 상태 관리에서 자주 반복되는 패턴은 상태를 저장하고, 불러오는 것입니다. 위 예시를 통해 보다 원활한 상태 유지가 가능할 것입니다.

관련한 정보와 해결 방법은 다음 링크의 토론에서 유사한 주제를 다루고 있습니다.
- React Query와 Zustand를 활용한 상태 관리
- Zustand 상태 리셋 문제 해결 사례

이 링크들은 상태 관리 흐름을 더욱 이해하는 데 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

shoncg

작성한 질문수

전체 Q&A

질문하기