Skip to content

React Query 를 선택적으로 쓰는 방법

Jump to bottom
Won Kim edited this page Oct 24, 2024 · 2 revisions

현재 상황 분석

  1. RootLayout과 ClientLayout 구조:

    • RootLayout 안에 ClientLayout이 있으며, ClientLayout에서 react-query의 QueryClientProvider와 jotai의 Provider를 설정하고 있습니다.
    • 모든 페이지에서 ClientLayout을 통해 이러한 Provider들이 적용되기 때문에, 전체 애플리케이션이 이들의 영향을 받게 됩니다.

  2. 팀원들의 우려 사항:

    • react-query와 jotai의 Provider를 최상위 레벨에 배치하면, 해당 라이브러리를 사용하지 않는 다른 페이지에도 불필요한 영향이나 성능 저하가 발생할 수 있다는 우려입니다.

문제의 원인과 팀원들의 우려 분석

  • 공통 컴포넌트 의존성:

    • Header 컴포넌트는 모든 페이지에 포함되며, 이 Header는 useAuth 훅을 사용하고 있습니다.
    • useAuth 훅은 react-query와 jotai에 의존하고 있기 때문에, Header를 사용하는 모든 페이지에서 이들 Provider가 필요합니다.

  • 팀원들의 우려 점검:

    • 성능 문제: react-query와 jotai는 경량의 라이브러리로, Provider를 추가한다고 해서 큰 성능 저하가 발생하지 않습니다.
    • 불필요한 의존성: 하지만, 해당 라이브러리를 사용하지 않는 페이지에서 굳이 Provider를 포함해야 하느냐는 질문은 타당합니다.

대안 제시

  1. Provider 범위 축소:

    • Layout 분리:

      • AuthLayout과 NonAuthLayout으로 레이아웃을 분리합니다.
      • AuthLayout은 react-query와 jotai의 Provider를 포함하며, Header를 사용하는 페이지에서만 이 Layout을 사용합니다.
      • NonAuthLayout은 Provider 없이 구성하며, Header를 사용하지 않는 페이지에서 사용합니다.

    • 구현 예시:

      // layouts/AuthLayout.tsx
import { PropsWithChildren, useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Provider } from "jotai";
import Header from "@/components/Header";

export default function AuthLayout({ children }: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Provider>
        <Header />
        <main>{children}</main>
      </Provider>
    </QueryClientProvider>
  );
}
      // layouts/NonAuthLayout.tsx
import { PropsWithChildren } from "react";

export default function NonAuthLayout({ children }: PropsWithChildren) {
  return <main>{children}</main>;
}
      // app/page.tsx (예시 페이지)
import AuthLayout from "@/layouts/AuthLayout";

export default function Page() {
  return <div>내용</div>;
}

Page.getLayout = function getLayout(page: React.ReactElement) {
  return <AuthLayout>{page}</AuthLayout>;
};

  2. Conditional Rendering:

    • Header 컴포넌트 내부에서 useAuth 훅의 사용을 조건부로 처리합니다.
    • 예를 들어, 인증이 필요한 페이지에서만 useAuth를 호출하도록 수정합니다.
    • 하지만 이 방법은 복잡성을 증가시킬 수 있으므로, Layout 분리가 더 효율적일 수 있습니다.

  3. Provider를 필요한 컴포넌트에서만 사용:

    • Header 컴포넌트 자체를 react-query와 jotai의 Provider로 감싸는 방법입니다.
    • 그러나 Provider는 트리 구조 상위에 위치해야 하므로, 이 방법은 제한적일 수 있습니다.

팀원 설득 방안

  • 이점 설명:

    • 유지 보수성 향상: Layout을 분리함으로써 각 페이지의 의존성을 명확히 관리할 수 있습니다.
    • 성능 최적화: 필요한 페이지에만 Provider를 적용하여 불필요한 리소스 소비를 방지합니다.

  • 데모 제공:

    • 간단한 예제를 통해 Layout 분리 전후의 동작을 비교하여 보여줍니다.
    • 성능 측정 결과를 공유하여 Provider 추가로 인한 영향이 미미함을 증명합니다.

  • 팀원 의견 수렴:

    • 팀원들의 의견과 우려를 충분히 경청하고, 그들의 아이디어를 반영합니다.
    • 함께 코드를 리뷰하고 최적의 방안을 찾는 collaborative한 접근을 취합니다.

최종 제안

  • Layout 분리 적용:

    • 인증이 필요한 페이지와 그렇지 않은 페이지를 구분하여 Layout을 분리합니다.
    • react-query와 jotai의 Provider는 인증이 필요한 페이지의 Layout에서만 사용합니다.

  • 코드 구조 정리:

    • 폴더 구조와 컴포넌트 구조를 재정비하여 각 기능의 의존성을 명확히 합니다.

  • 팀 내 합의 도출:

    • 제안된 방안을 팀원들과 공유하고, 피드백을 받아 최종 결정을 내립니다.
Clone this wiki locally