ReactRouter Dom

React Router Dom

React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리  플랫폼의 요구사항에 따라 컴포넌트 기반 라우팅을 편하게 해준다.

 

리엑트는 SPA이기 때문에 하나의 index.html탬플릿을 가지고 있다. 이 하나의 탬플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html탬플릿에 넣으므로 페이지를 변경해 주게 됩니다. 이때 이 React Router Dom라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 랜더링 하는데 도움을 준다.

 

설치

npm install react-router-dom

 

설정

일단 어디에서나 React router를 앱어디에서나 사용할 수 있게 해야하는데 src폴더에 index.js파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 구성요소를 래핑합니다.

 

BrowserRouter

HTML5 History API를 사용해서 UI를 URL과 동기화된 상태로 유지해준다.

 

Routes

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

Route

Route는 단일 경로를 만드는 데 사용된다.  Route에는 두가지 속성이 있습니다

path: 원하는 컴포넌트의 URL경로를 지정합니다. 이경로 이름을 원하는 대로 정할 수 있다. 

element : 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정합니다.

 

React Router Dom Apis

 

중첩라우팅 Nested Routes

 

가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지럽힐 피요가 없다 왜냐하면 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Roter는 이를 완전히 수용한다. 쉽게말해 Route안에 Route를 자식으로 중첩시킬 수 있고 라우트별로 컨포넌트를 지정해 줄수있다.

Outlet

자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 <Outlet>을 사용해야 한다. 이렇게 하면 위 경로가 렌더링될때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다.

 

useNavigate

경로를 바꿔준다.

 

useParams

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

 

useLocation

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

useRoutes

Routes와 기능적으로 동일하지만 좀 문법적인 차이가있는데 JSX를 사용하지않는게 특징