동적 라우팅

• 구성 기반 라우팅을 제공한다.
• dynamic, 그러니까 정해지지 않은 url 요청이 param으로 들어오더라도 동일한 페이지로 routing 할 수 있다.

중첩된 라우트

• 중첩 라우트는 하나의 라우트 내부에 다른 라우트를 포함하는 구조이다. 이를 통해 애플리케이션의 라우팅 구조를 계층적으로 구성할 수 있다.
• 중첩 라우트를 사용하면 복잡한 UI 구조를 보다 명확하고 체계적으로 구성할 수 있다. 예를 들어, 대시보드에 여러 섹션이 있는 경우, 각 섹션에 해당하는 라우트를 대시보드 라우트 내에 중첩하여 정의할 수 있다.

Link와 NavLink

• Link는 기본적으로 애플리케이션 내에서 탐색을 위한 링크 생성해주는 역할을 한다. a태그 처럼 사용하면 된다.
• NavLink는 기존의 태그를 확정한 개념이다. 현재 경로와 일치할 때 스타일 또는 클래스를 적용할 수 있다.

검색 매개변수와 URL 파라미터 (useParams, useSearchParams hook)

useParams

• useParams는 동적 라우트 매개변수를 읽기 위해 사용된다.
• 동적 라우트는 URL의 일부분이 사용자에 따라 변할 수 있는 경로를 의미한다. 예를 들어, /users/:userId 라우트에서 :userId 부분은 동적이다.
• 이 훅을 사용하면 URL에서 이러한 동적 부분의 값을 추출할 수 있다.
• 예시: 사용자가 /users/123 페이지에 접속했을 때, useParams를 사용하여 userId의 값을 123으로 추출할 수 있다.

useSearchParams

• useSearchParams는 URL의 쿼리 파라미터(주소 뒤에 ?로 시작하는 부분)를 읽고 쓰기 위해 사용된다.

• 이 훅을 사용하면 URL의 쿼리 스트링을 JavaScript의 URLSearchParams 인터페이스를 통해 손쉽게 조작할 수 있다.

• 예를 들어, /products?category=books&price=low URL에서 category와 price 파라미터의 값을 읽거나 업데이트할 수 있다.

• useSearchParams는 쿼리 파라미터의 상태를 관리하고, 이를 변경할 때 URL을 자동으로 업데이트한다.

• URL 파라미터와 검색 매개변수에 접근할 수 있다.

  

useParams

useSearchParams

Outlet 컴포넌트

• 중첩된 라우트의 자식 컴포넌트를 렌더링하는 데 사용됨.

• 공통 레이아웃을 구현할 때 가장 유용함.

  

레이아웃 구성

• 공통 레이아웃 유지 및 하위 페이지의 내용만 변경 가능.