🚧 Detected multiple Jotai instances. It may cause unexpected behavior with the default store. 🚧

혜혜·2023년 12월 1일

Error Note

목록 보기

12/16

❗문제 내용

Next.js 프로젝트에서 Jotai를 사용하다가 만난 경고...! 말 그대로 Jotai 인스턴스가 중복되어서 나타나는 경고인 것 같았고, 경고문에 함께 나오는 github 링크를 타고 들어가서 내용도 살펴봤는데, Context가 중첩되면 문제가 생길 수 있어서 나타나는 경고라고 나와 있었다.
프로젝트 초기에 Context api를 사용해서 상태 관리를 하다가 Jotai를 도입한 건데, 아직 그때 사용한 Context를 완벽하게 걷어내지 않아서 생기는 문제라고 생각했다. 그래서 그때 사용한 Context 코드를 다 걷어내고 제거했는데... 계속 경고가 나타났다.
github 링크를 보면 Next.js 상위 버전에서 그냥 나타나는 경고인 것 같다는 내용도 있어서 일단 그냥 넘어갈까 싶었는데 아무리 생각해도 뭔가 찜찜...해서 기능 개발 끝나고 남는 시간에 문제를 더 살펴봤는데, 드디어 어떤 게 문제인지 발견했다!!

layout.tsx

'use client';
import './globals.css';
import type { Metadata } from 'next';
import Providers from '@/components/Provider/providers';

//export const metadata: Metadata = {
//  title: 'Create Next App',
//  description: 'Generated by create next app',
//};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  
  const { getAccessToken } = useAuth();

  useEffect(() => {
    getAccessToken();
  }, []);

  return (
    <html lang="ko">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

기존의 내 layout.tsx 파일이다. 새로고침을 해도 로그인이 유지되게끔 하고 싶어서 layout.tsx에서 토큰을 불러오는 custom hook을 실행시키는 로직을 추가했는데, 해당 로직 안에서 Jotai store에 access token을 저장하는 로직이 있어서 문제였다... 사실 이 루트 레이아웃 파일에 use client를 선언하는 것도 정말 좋은 방법이 아닌 것 같아서 고민이 많았다... 아무튼 이 파일 안에서 Jotai를 사용할 수 있게 하는 Providers를 깔아주는데, 여기서 동시에 useEffect()로 Jotai를 사용하는 로직을 실행시켜버리니까 문제가 되는 것 같았다.

⚒️ 문제 해결

Token.tsx

'use client';
import useAuth from '@/hooks/useAuth';
import { useEffect } from 'react';

function Token() {
  const { getAccessToken } = useAuth();

  useEffect(() => {
    getAccessToken();
  }, []);

  return <></>;
}

export default Token;

토큰을 가져오는 로직을 실행시킬 컴포넌트를 새로 만든 다음,

layout.tsx

import './globals.css';
import type { Metadata } from 'next';
import Providers from '@/components/Provider/providers';
import Token from '@/components/Common/Token';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        <Providers>
          <Token />
          {children}
        </Providers>
      </body>
    </html>
  );
}

만든 Token 컴포넌트를 layout.tsx에서 import해서 return문 안에 넣어주었다. 이렇게 하니 use client도 지울 수 있었고, metadata도 사용할 수 있어서 코드가 훨씬 좋아졌을 뿐더러 multiple Jotai instance 경고도 해결할 수 있었다...!

🙇‍♂️ 참고자료

Sharing state with library component
[Next.js] 로그인 구현(Silent Refresh)
→ 이 블로그에서 영감을 얻었다👀

혜혜

쉽게만살아가면재미없어빙고

이전 포스트

🚧Image with src "..." was detected as the Largest Contentful Paint (LCP).🚧

다음 포스트