<aside> 💡

우선적으로, 먼저 알아야 할 지식!

</aside>

→ React Router란 React 애플리케이션에서 페이지 라우팅을 구현하기 위해 가장 일반적으로 사용하는 라이브러리이다.

React Router는 다음과 같은 기능을 제공한다.

  1. URL 매칭: 사용자가 입력한 URL을 기준으로 어떤 컴포넌트를 보여줄지를 결정한다.
  2. 링크 생성: <Link> 컴포넌트를 사용하여 다른 페이지로의 네비게이션을 쉽게 구현할 수 있다.
  3. 동적 라우팅: URL의 일부를 변수로 사용하여 동적인 페이지를 생성할 수 있다.
  4. Nest 라우트: 여러 레벨의 라우트를 중첩하여 복잡한 UI 구조를 구성할 수 있다.

이러한 React Router 라이브러리의 여러 기능 중 동적 라우팅에 대해 좀 더 자세히 알아보자.

✨ 정적 라우팅 vs 동적 라우팅

라우팅 방식에는 두 가지가 있다.

정적 라우팅은 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의한다.

<Route path="/" element={<Main />}/>
<Route path="/login" element={<Login />}/>