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 #팀회의 #기술적의사결정

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

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