TIL | React (Layout 컴포넌트, Outlet 컴포넌트, 404 페이지, useQuery - unique Key ...)

23.07.11

1. React-Router-Dom

1-1. Layout 컴포넌트

Layout 컴포넌트 : 반복되는 부분을 위해 만드는 컴포넌트로 반복되는 레이아웃은 하나로 묶어 공통으로 사용할 수 있음
ex. header, footer

• Router.js 파일에서 element에 Layout을 넣은 Route로 내부 컴포넌트의 Route들을 감싸줌

import Layout from "../components/common/Layout";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
    	// element에 Layout을 넣기
        <Route element={<Layout />}>
          <Route path="/" element={<Main />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

1-2. Outlet 컴포넌트

Outlet 컴포넌트 : Layout 컴포넌트 파일에서 nested routes(= 안에 있는 컴포넌트들)이 어디에 보여질지 지정하는 용도로 사용

• 넣고 싶은 곳에 Outlet 컴포넌트를 넣어줌

import { Outlet } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";

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

export default Layout;

1-3. 404 페이지 만들기

• path를 "*"로 주면 없는 URL로 접근할 때 처리할 수 있음

<Routes>
  <Route element={<Layout />}>
    <Route path="/" element={<Main />} />
  </Route>
  <Route
    path="*"
    element={
      <>
        <div>없는 페이지입니다.</div>
        <Link to="/">홈으로 이동</Link>
      </>
    }
  />
</Routes>

2. React Query

2-1. useQuery - unique Key

useQuery에서 첫번째 인자로 unique Key가 들어가고, 두번째 인자로 비동기 함수 들어감
useQuery("unique key", 비동기 함수)

이때 key는 정말진짜 unique 해야함
이 unique key로 useQuery나 invalidateQueries를 구별하는데 만약 유니크하지 않으면 오류가 날 수 있음 (ex. 데이터 패치에서 문제 등 ...) !