React-router-dom v6 #2

useParams

useParams 훅은 < Route path >와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환한다.
위 경로는 상위 경로에서 모든 매개변수를 상속합니다.

• 즉, 라우터의 매개변수의 값을 가져온다.
• 예)

-- routers.tsx

  {
    path:"users/:userId",
    element: <User />,
  },

-- User.tsx

function User() {
  const params = userParams();
  return <h1>User</h1>
}

• 만약 users/1 url 에 있다면, console.log(params); 하였을 때 결과는 object 안에 userId:"1" 으로 결과를 확인할 수 있다.
• 라우터의 매개변수 값을 가져온다는 점에서 Express 의 req.params 와 동일한 기능인 것 같다.

---

Outlet

Outlet은 하위 경로 요소를 렌더링하기 위해 상위 경로 요소에서 사용합니다.
이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있습니다. 상위 경로가 정확히 일치하면 하위 index 경로를 렌더링하거나 index 경로가 없으면 아무것도 렌더링하지 않습니다.

• 🚩 https://reactrouter.com/en/main/components/outlet
• 즉, <Outlet /> 은 선언되어있는 컴포넌트 안에 자식 path 가 있다면 <Outlet /> 이 자식 path(children) 컴포넌트를 렌더링 해준다.

  {
    path: "users/:userId",
    element: <User />,
    childern: [
	  {
        path: "followers",
        element: <Followers />,
      },
    ],

---

useOutletContext

종종 상위 경로는 하위 경로와 state 또는 기타 값을 공유합니다.
원하는 경우 context provider를 만들 수 있지만 Outlet에 기본 제공되는 context를 사용할 수도 있습니다.

• 즉, 부모 경로(상위 경로)로 있는 컴포넌트의 <Outlet /> 에 context 를 사용해 값을 공유하면,
  자식 경로(하위경로)에서 useOutletContext() 를 사용해 받을 수 있음!

// 부모 경로(상위 경로)
< Outlet context={ {a:1, b:2} } />;

// 자식 경로(하위 경로)
const context = useOutletContext(); // {a:1, b:2}

---

useSearchParams

useSearchParams 훅은 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용됩니다.
useState 훅과 마찬가지로 useSearchParams는 현재 위치의 search params와 이를 업데이트하는 데 사용할 수 있는 함수라는 두 가지 값의 배열을 반환합니다.
setSearchParams 함수는 탐색과 같이 작동하지만 URL의 검색 부분에 대해서만 작동합니다.

• 구문

let [readSearchParams, setSearchParams] = useSearchParams();

setSearchParams(params);

• readSearchParams 는 URLSearchParams 라는 object 를 반환하는데, URLSearchParams 의 method 를 사용할 수 있다.
• readSearchParams.has() 와 같이 has(), get(), keys() 등등.. 여러 메소드를 활용해 url 의 쿼리를 가져올 수 있다.

---

🚩 React Router 공식문서