2024.04.08 TIL #user_data #전역관리 #Zustand vs #Tanstack

TIL

2024.04.08 TIL #user_data #전역관리 #Zustand vs #Tanstack_Query #팀회의 #기술적의사결정

inz1234 2024. 5. 7. 20:56

📌 Task TODOLIST

- [x] user 데이터 전역관리

✨ 개발 내용

1. user 데이터 전역관리

Why(이유) ?

user 데이터를 사용하는 컴포넌트가 많기 때문에, 전역적으로 관리할 필요가 있었다.

How(과정) ?

(1) RootLayout.tsx에서 모든 컴포넌트들의 가장 상단에 InitUser.tsx 컴포넌트 생성

(2) useEffect 내에 userData를 받아오는 비동기로직 + 그 데이터에 따라 로그인 상태까지

(3) userData와 isLoggedIn 상태 모두 Zustand로 전역관리

what(결과) ?

const InitUser = () => {
  const { isLoggedIn, setIsLoggedIn, setUser } = userStore((state) => state);

  useEffect(() => {
    // isLoggedIn 상태가 변경되거나, 새로고침 했을때 쎄션 유지 중인지 여부에 따라 실행되는 함수
    // (참고: isLoggedIn 상태는 로그인/로그아웃 시에만 변경됨 = 로그인/로그아웃에 모든 호출이 종속되도록)
    const fetchUserData = async () => {
      const {
        data: { user }
      } = await clientSupabase.auth.getUser();
      // 쎄션 유지중이면
      if (user) {
        setIsLoggedIn(true); // 새로고침해도 isLoggedIn 상태 true로 유지

        // 쎄션 유지중일 때만 supabase DB에 요청하도록(성능적 효율성)
        const { data: userData } = await clientSupabase.from('users').select('*').eq('user_id', String(user?.id));
        if (userData && userData[0]) {
          setUser(userData[0]);
        }
      } else {
        // 이 때는 새로고침 시를 고려하여 isLoggedIn을 false로 하지 않아도 됨
        // -> isLoggedIn의 초기값 자체가 false이기 때문에 새로고침하면 자동으로 false
        // 로그아웃하면(= 쎄션 유지 중이 아니면) 유저데이터 null로 변경
        setUser(null);
      }
    };
    fetchUserData();
  }, [isLoggedIn, setIsLoggedIn]);
  return <></>;
};

export default InitUser;

🚨 TroubleShotting

이대로 했더니..

데이터 변경 시 2가지 단점이 생겼다.

1. 불필요한 서버요청

2. 데이터 이중관리

Why(이유)?

데이터 변경 시

변경 서버요청(1회 요청) -> Zustand로 - setUserData, setIsLoggedIn -> 리렌더링 발생 -> 다시 최상위 컴포넌트의 useEffect 내 서버요청 로직실행(2회 요청)

라는 과정으로 한 번의 데이터 변경 시,

1) 2번의 서버요청

2) 외부 서버의 데이터 업데이트 + 내부 Zustand store 데이터도 업데이트(setState) = 데이터 이중관리

라는 위의 2가지 단점이 발생한다.

How(과정) ?

이를 해결하기 위해 우리 팀은 useEffect + Zustand 조합을 과감히 버리고,

- 하나의 쿼리 키로 동일한 데이터를 전역적으로 관리할 수 있고

- 한 컴포넌트에서 이미 데이터 요청을 해서 캐시데이터가 생기면 다른 컴포넌트에서 동일한 데이터에 대해 서버요청할 필요가 없는 = 즉, 불필요한 서버요청을 감소시키는

Tanstack-Query를 사용하기로 한다.

what(결과) ?

+) 추가적으로 userData를 기반으로 다른 데이터를 요청하는 컴포넌트들이 워낙 많아서 userData 또한 prefetch + dyfydration 하여 RootLayout.tsx 에서 하위 컴포넌트들에 넘겨주기로 했다.

export default async function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  const setUser = async () => {
    const supabase = serverSupabase();
    // 유저 데이터 가져오기
    const {
      data: { user },
      error
    } = await supabase.auth.getUser();
    if (!user || error) throw error;
    const { data: userData, error: userDataErr } = await supabase
      .from('users')
      .select('*')
      .eq('user_id', String((user as User).id))
      .single();
    if (userDataErr || !userData) {
      console.error(userDataErr.message);
    } else {
      return userData;
    }
  };
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({  ----> prefetch
    queryKey: [USER_DATA_QUERY_KEY],
    queryFn: setUser
  });
  return (
    <html lang="ko">
      <body className={inter.className}>
        <NextProvider>
          <QueryProvider>
            <HydrationBoundary state={dehydrate(queryClient)}>  ---> dehydration
              <Suspense>
                <ToastContainer position="top-right" limit={1} closeButton={false} autoClose={4000} />
                <ValidationModal />
                <NavBar />
                {children}
                <ReactQueryDevtools initialIsOpen={false} />
              </Suspense>
              <Footer />
            </HydrationBoundary>
          </QueryProvider>
        </NextProvider>
      </body>
    </html>
  );
}

하위 컴포넌트들에서의 사용: userData와 isLoggedIn 상태를 반환하는 커스텀 훅 생성 및 사용

export const useGetUserDataQuery = () => {
  const { data, isSuccess } = useSuspenseQuery({
    queryKey: [USER_DATA_QUERY_KEY],
    queryFn: () => fetchUserData()
  });

  const isLoggedIn = data ? true : false;

  return { data, isSuccess, isLoggedIn };
};

// 하위 컴포넌트
const NavBarContents = () => {
  const { data: user, isLoggedIn } = useGetUserDataQuery();
  
  ... 이하 생략

📸 스크린샷

📚 레퍼런스

https://tanstack.com/query/latest/docs/framework/react/guides/ssr

'TIL' 카테고리의 다른 글

2024.04.12 TIL #채팅내용_검색 (1)	2024.05.07
2024.04.10 TIL #채팅 #참여중_멤버_조회 #Realtime_presence #실시간 (0)	2024.05.07
2024.04.05 TIL #Tanstack_Query #prefetch #dehydration (0)	2024.05.03
2024.04.04 TIL #채팅 #이전메세지 _더보기 (0)	2024.05.03
2024.04.03 TIL #채팅삭제 #Supabase_realtime #RLS #Delete (0)	2024.05.02

현재글2024.04.08 TIL #user_data #전역관리 #Zustand vs #Tanstack_Query #팀회의 #기술적의사결정

intersection-observer없이, createPortal, ssr'd, rootlayout, 기존 데이터에 추가, why do client components get ssr'd to html, Supabase, useformstatus(), 낙관적업데이트, how are client components rendered?, app-router, server-action, useformstate(), usetransition(), useInfiniteQuery, is there any way to add values to an array column with update?, useoptimistic(), zod, next.js, revalidatepath(),

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

incodevelop