App.tsx

종류

코드

작성자

App.tsx

react-query 와 Recoil 을 선언, 라우터에 따른 렌더링만을 담당한다.


return (
	<QueryClientProvider client={queryClient}>
		<RecoilRoot>
			<Routes>
        <Route element={<Layout />}>
          <Route
            path='/landing'
            element={<LandingPage />}
          />
          <Route
            path='/profile/:userId'
            element={<Profile />}
          />
        </Route>
        <Route
          path='/'
          element={<LandingPage />}
        />
      </Routes>
		</RecoilRoot>
	</QueryClientProvider>
)

QueryClinetProvider & queryClient

비동기 요청을 쉽게 처리하기 위해 react-query 를 사용한다. 최상위 컴포넌트를 QueryClientProvider 로 감싸서 사용한다.


import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

return (
	<QueryClientProvider client={queryClient}>
		<App />
	<QueryClientProvider>
)

RecoilRoot

전역 상태관리 라이브러리인 recoil 을 사용한다. recoil 의 상태를 사용하려는 컴포넌트들을 RecoilRoot 로 감싸주어야 한다.

Route 안에 Route


  <Route element={<Layout />}>
    <Route
      path='/landing'
      element={<LandingPage />}
    />
    <Route
      path='/profile/:userId'
      element={<Profile />}
    />
  </Route>

Layout 페이지로 이동하면 다음과 같은 코드가 있다.


const Layout = () => {
  return (
    <>
      <Header />
      <LayoutContainer>
        <Outlet />
      </LayoutContainer>
      <Footer />
    </>
  );
};

Outlet 은 React Router 에서 제공해주는 기능으로 중첩으로 라우터를 포함하여 상위 컴포넌트를 레이아웃화 할 수 있다.

즉 위 컴포넌트는 /landing 이나 /profile/:userId 의 Route 페이지 중 하나를 보여준다.