6.8 zustand 세션 질문입니다.

session.ts

import type { Session } from "@supabase/supabase-js";
import { create } from "zustand";
import { combine, devtools } from "zustand/middleware";

type State = {
  isLoaded: boolean;
  session: Session | null;
};

const initialState = {
  isLoaded: false,
  session: null,
} as State;

const useSessionStore = create(
  devtools(
    combine(initialState, (set) => ({
      actions: {
        setSession: (session: Session | null) => {
          set({ session, isLoaded: true });
        },
      },
    })),
    {
      name: "sessionStore",
    },
  ),
);

export const useSession = () => {
  const session = useSessionStore((store) => store.session);
  return session;
};

export const useIsSessionLoaded = () => {
  const isSessionLoaded = useSessionStore((store) => store.isLoaded);
  return isSessionLoaded;
};

export const useSetSession = () => {
  const setSession = useSessionStore((store) => store.actions.setSession);
  return setSession;
};

App.tsx

import { Button } from "@/components/ui/button";
import RootRoute from "./root-route";
import supabase from "@/lib/supabase";
import { useEffect } from "react";
import { useSetSession } from "@/store/session";

export default function App() {
  const setSession = useSetSession();

  useEffect(() => {
    //console.log("111");
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []);

  return <RootRoute />;
}

코드는 강의와 동일하게 잘따라간 것 같은데

개발자 도구 에서 session이랑 isLoaded가 안보입니다.

새로고침을 해도, 탭을 껏다 켜도, 리액트를 껏다 켜도,

제미나이한테 물어봐도 이게 해결이 안됩니다.....

+추가

App.tsx

import { Button } from "@/components/ui/button";
import RootRoute from "./root-route";
import supabase from "@/lib/supabase";
import { useEffect } from "react";
import { useIsSessionLoaded, useSession, useSetSession } from "@/store/session";

export default function App() {
  const setSession = useSetSession();

  const session = useSession();
  const isLoaded = useIsSessionLoaded();

  useEffect(() => {
    //console.log("111");
    supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });
  }, []);

  useEffect(() => {
    console.log("현재 세션 상태:", { session, isLoaded });
  }, [session, isLoaded]); // 값이 바뀔 때마다 실행됨

  return <RootRoute />;
}

이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다

단순한 리덕스 툴킷 버그인지

콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다.

Answer 2

1

winterlood

2026-04-09T01:03:19.349Z

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

강의 소스코드로 확인해본 결과 다음과 같이 setSession 이후의 변경된 State가 잘 출력되어야 하는데, Redux Devtools의 버그로 보입니다 ... 🥲

버그의 원인과 해결책을 정확히 알기 어렵기에 이처럼 확인이 잘 안되시는 경우 console.log를 이용하시는 편이 좋을 것 같습니다.

(토큰 노출의 위험이 있어 누추하게 가린 점 죄송합니다)

0

kin412

2026-04-09T09:39:50.970Z

감사합니다. 좋은강의 잘듣고 있습니다.

0

communityai8509

2026-04-08T15:16:35.618Z

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

zustand와 Redux DevTools를 연동할 때 발생할 수 있는 문제를 겪으셨군요. 문제를 해결하기 위해 몇 가지 점을 확인해 보겠습니다.

문제 발생 원인 및 해결 방법

1. 개발자 도구에서 상태 미표시 문제:
   

상태가 표시되지 않는 문제는 주로 Redux DevTools가 zustand 미들웨어를 올바르게 인식하지 못해서 발생할 수 있습니다. 코드에서는 이미 devtools 미들웨어를 사용하고 있지만, 상태가 보이지 않는다면 다음 사항들을 점검해보세요.

• DevTools가 실제로 zustand 스토어를 인식하고 있는지 확인하세요. 특정 브라우저에서는 DevTools 확장 프로그램이 정상적으로 상태 업데이트를 감지하지 못할 수 있습니다.

• 코드를 실행하는 브라우저 환경에서 Redux DevTools 확장 프로그램이 제대로 설치되어 있는지 확인하세요. 특정한 상황에서는 확장 프로그램이 제대로 작동하지 않을 수 있습니다.

2. 무명 액션 표시 문제:
   

zustand에서 액션 명이 ‘anonymous’로 표시되는 경우에는 액션 명을 직접 설정해 주어야 합니다. set 메서드의 세 번째 인자인 액션 이름을 추가해주시면 됩니다. 이 부분은 잘 구현하신 것 같습니다.

   set({ session, isLoaded: true }, undefined, 'actions.setSession');

3. Redux DevTools 설정 문제:
   

zustand의 devtools 사용 시, 추가로 세부 설정이 필요할 수 있습니다. 예를 들어, 아래와 같이 devtools 미들웨어에 옵션을 제공하여 구체적인 설정을 할 수 있습니다.

   const useSessionStore = create(
     devtools(
       combine(initialState, (set) => ({
         actions: {
           setSession: (session: Session | null) => {
             set({ session, isLoaded: true }, undefined, 'actions.setSession');
           },
         },
       })),
       {
         name: "sessionStore",
         trace: true,
         traceLimit: 25,
       },
     ),
   );

추가 점검 사항

• 의존성 배열: useEffect에 비어 있는 의존성 배열을 사용하는 것은 한 번만 실행되도록 하는 의도입니다. 필요한지 여부를 점검해보세요.

• 라이브러리 버전: 사용 중인 zustand 및 Redux DevTools의 버전을 확인하고 최신 버전으로 업데이트되어 있는지 확인하십시오.

관련 토픽의 유사 질문은 아래 링크를 참고해주세요:
- Zustand 상태관리와 Redux DevTools 통합

구체적인 디버깅이 필요하시다면, 현재 환경의 문제를 확인하기 위해 다양한 시도를 해보실 수 있습니다. 추가적인 궁금증이 있으시면 주저하지 말고 이어서 질문해 주세요.

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