React Router Dom

React Router Dom

React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있습니다. 

 

Single Page Application(SPA)

React는 SPA이기때문에 하나의 index.html 템플릿 파일을 가지고 있습니다.

React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는 데 도움을 주게 됩니다.

 

React Router Dom 설치

npm install react-router-dom --save

 

React Router Dom 설정

앱 어디에서나 React Router를 사용할 수 있도록 설정을 해야 합니다.

src폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성요소(App 구성요소를 그 안에 래핑하면 됩니다.

 

Routes vs Route

Routes

• 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 합니다.
• Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링 해줍니다.

Route

• 단일 경로를 만드는데 사용됩니다. 두 가지 속성을 취합니다.
  • path 는 원하는 컴포넌트이 URL경로를 지정합니다. 경로 이름은 원하는 대로 정할 수 있습니다. 경로 이름이 백슬래시인 컴포넌트는 앱이 처음 로드될 때마다 먼저 렌더링되며 홈 구성 요소입니다. 
  • element 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정합니다.

 

<Link />를 이용해 경로를 이동하기

Link 구성 요소는 HTML의 <a />와 유사합니다. to속성은 접근할 경로를 지정합니다.

 

중첩 라우팅(Nested Routes)

React Router의 가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지럽힐 필요가 없습니다.

대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용합니다.

 

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet>을 사용해야 합니다.

 

useNavigate

경로를 바꿔줍니다. navigate('/home')하면 홈으로 갑니다.

 

useParams

:style 문법을 path 경로에 사용하였다면 useParams()로 읽을 수 있습니다.

 

useLocation

이 Hooks는 현재 위치 객체를 반환합니다. 이것은 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용할 수 있습니다.

 

useRoutes

이 Hooks는 <Routes>와 기능적으로 동일하지만 대신에 JS객체를 사용하여 경로를 정의합니다. 이러한 객체는 일반 <Route>요소와 동일한 속성을 갖지만 JSX가 필요하지 않습니다.