[React 숙련] 1주차_Outlet

오늘의 학습내용 :  중첩 라우팅, useSearchParams

 

◆ 중첩 라우팅

 

중첩 라우팅(Nested Routing)은 특정 라우트 내에서 추가적으로 라우트를 정의하는 방식이다. 여러 계층의 UI를 웹 애플리케이션에서 구성할 때 사용할 수 있다. 하나의 Route 안에 또다른 Route를 포함시키고, 이를 통해 복잡한 구조를 더 효율적으로 렌더링할 수 있다. 만약 /home이라는 페이지의 하위에 Location이라는 컴포넌트가 있을 경우, /home/location 으로 접속하면 home 컴포넌트 안에서 location 컴포넌트를 함께 보여줄 수 있게 된다. (참고: https://monamigoon.tistory.com/ )

 

// Outlet 으로 중첩 라우팅 구현하기
import { Outlet } from 'react-router-dom';

function Home() {
 return (
  <div>
   <div>
    <h1>HomePage</h1?
   <div>
  <Outlet />
  </div>
 );
}

// Home 컴포넌트 안에 Location 라우트가 중첩되어 있다면 Outlet 컴포넌트는 Location 컴포넌트로 대체된다.

 

 

Outlet 컴포넌트는 중첩 라우팅 환경에서 부모 라우트 내에 렌더링될 자식 라우트의 위치를 정의한다. 만약 Outlet을 사용하지 않고 서브 페이지를 라우팅하려면 *를 사용해서 주소 뒤에 올 내용을 명시해줄 수도 있다. 서브 페이지가 보여지는 위치에 Routes와 Route를 작성하는데, path 부분은 /를 제외하고 작성해도 동작에 문제가 없다.

<Routes>
  <Route path="/" element={<Home />}></Route>
  <Route path="/about/*" element={<About />}></Route>
  <Route path="/products" element={<Products />}></Route>
</Routes>

function About() {
  return (
    <div>
      <div>
        <h2>About 페이지</h2>
        <p>Shopping 페이지</p>
      </div>
      <Routes>
        <Route path="/location" element={<Location />}></Route>
      </Routes>
    </div>
  );
}

 

 

◆ useSearchParams

 

useSearchParmas()는 현재 위치의 쿼리 문자열(매개변수)에 대한 데이터를 읽고 수정하는 데 사용되는 react-router-dom 라이브러리 Hook이다. url에서 ? 로 시작하는 쿼리스트링은 useSearchParams를 통해 받아올 수 있다. 만약 쿼리스트링이 여러 개일 경우, 각 키를 통해 그 값을 받으면 된다. 

const [searchParams, setSearchParams] = useSearchParams();

 

usesearchParams는 useState처럼 두 개의 변수가 있는데, 각각 쿼리 매개변수의 데이터를 담는 searchParams와 변수를 개발자가 지정하는 setSearchParams 이다.

import * as React from "react";
import { useSearchParams } from "react-router-dom";

let [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get("q")); // 출력: "apple"
console.log(searchParams.get("category")); // 출력: "fruits"

 

searhParams에는 현재의 문자열이 key: value 형식으로 저장되어 있고, get 메서드에 키를 전달하면 그 값을 출력한다. 사용 방법은 다양한데, 검색 기능을 구현하거나, 필터링과 정렬, 공유 URL을 생성하는 데 활용할 수 있다.