24. 06. 20 TIL

어제 리액트 라우터 돔에 대해 이어서 정리한다!

 

url에 따라 상품 정렬 필터링 하기는 쿼리 파라미터를 사용하면 된다.

 

웹사이트에서는 url에 따라 상품을 정렬하거나 필터링 할 수 있는데, 이를 위에 url에 ?를 사용하여 정보를 추가할 수 있다.

여러 개의 정보를 넣을 때는 &를 사용한다.

 

https://comic.naver.com/challenge?genre=FANTASY&page=2

예를 들면 이렇게 코드가 있으면, 두 가지 정보를 나타내는데

genre=FANTASY&page=2는 각각 장르와 페이지 정보를 나타낸다.

 

여기서 ? 뒤에 키와 값 형태로 정보를 추가할 수 있고, 여러 정보를 추가하려면 &로 구분한다.

 

이제 url 쿼리 파라미터를 사용하려면 useSearchParams 코드를 추가해야 한다.

 const [searchParams, setSearchParams] = useSearchParams();

 

이제 버튼 클릭시 주소가 변경되게 하고 싶다.

setSearchParams({
	sort: "price"
})

이러코롬... 버튼을 클릭하면 <주소>/products 였던 것이 <주소>/products?sort=price로 변경된다.

 

---

 

이제 반복되는 레이아웃을 한 번만 만들고 싶다면 (ex. header)

 

1. 레이아웃 컴포넌트를 만들고, Main.jsx 파일에서 공통된 부분만 레이아웃 컴포넌트에 복붙한다.

function Layout() {
  return (
    <>
      <header
        style={{
          display: "flex",
          justifyContent: "space-between",
          padding: "24px",
          backgroundColor: "#000000",
          color: "white",
        }}
      >
        <div>로고</div>
        <div
          style={{
            display: "flex",
            gap: "12px",
          }}
        >
          <div>로그인</div>
          <div>회원가입</div>
        </div>
      </header>
    </>
  );
}

export default Layout;

 

 

2. 그리고 라우터 파일에서 다른 Route들을 하나로 감싸는 Route를 만들어서 

  <Route element={<Layout />}>
          <Route path="/" element={<Main />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<Product />} />
        </Route>

이렇게 넣어준다. 그러면 각 페이지는 레이아웃의 일부가 되고, 레이아웃의 헤더를 공유하게 된다.

 

3. 이제 레이아웃 사이에 있는 main, products, product들을 어디에 넣을지 결정해야 하는데

outlet 컴포넌트는 이것들을 어디에 보여줄지 결정하는 역할이다.

import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <>
      <header
        style={{
          display: "flex",
          justifyContent: "space-between",
          padding: "24px",
          backgroundColor: "#000000",
          color: "white",
        }}
      >
        <div>로고</div>
        <div
          style={{
            display: "flex",
            gap: "12px",
          }}
        >
          <div>로그인</div>
          <div>회원가입</div>
        </div>
      </header>
      <Outlet />
    </>
  );
}

export default Layout;

---

없는 페이지 처리하기 - 404 페이지

 

존재하지 않는 주소로 접근할 때는 흰 화면이 나오는데 이럴 때는 path='*'를 추가하고,

존재하지 않는 주소 접속 시에 보여줄 컴포넌트를 element 속성에 추가하면 된다.

 

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