React Router Dom

: 웹 앱에서 동적 라우팅 구현 가능하게 해주는 라이브러리

라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리

React Router DOM은 앱 및 플랫폼 요구 사항에 따라 컴포넌트 기반 라우팅

Single Page Application(SPA)

리액트는 SPA이기에 하나의 index.html 템플릿 파일 보유

이 템플릿에 JS 이용해서 다른 컴포넌트를 템플릿에 적용하여 페이지 변경

React Router DOM은 여기서 새 컴포넌트로 라우팅/탐색 후 렌더링 하는데 도움

설치

npm install react-router-dom --save (Window)

yarn add react-router-dom (Mac)

설정

앱 어디에서나 React Router 사용 가능하게끔 설정

src 폴더 내 index.js 파일 실행하고, react-router-dom에서 BrowserRouter 가져와 루트 구성요소를 그 안에 래핑

*BrowserRouter : HTML5 History API(pushState, replaceState, popState 이벤트 등)를 사용해 UI를 URL과 동기화된 상태로 유지

정의

Routes

앱에서 생성될 모든 개별 경로에 대한 컨테이너 상위 역할

Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫 번째 Route를 렌더링

Route

단일 경로 생성하는데 사용

path

• 원하는 컴포넌트의 URL 경로 지정
• 이름은 원하는 대로 지정 가능
• 경로 이름 백슬래쉬(/)는 앱이 처음 로드될 때마다 먼저 렌더링. 이는 홈 구성 요소가 렌더링되는 첫 번째 구성요소가 됨을 의미

element

• 경로에 맞게 렌덩링되어야 하는 컴포넌트 지정
  
  

경로 이동

Link

HTML의 앵커 요소 (a)와 유사

to 속성은 링크가 데려가는 경로 지정

앱 구성 요소에 나열된 경로 이름을 생성했기에 링크 클릭시 경로 살펴보고, 해당 경로 이름으로 구성 요소 렌더링

APIs

Nested Routes

React Router의 핵심 기능 중 하나

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

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에 Outlet 사용

하위 경로가 렌더링될 때 중첩된 UI가 표시

부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 렌더링 불가능

useNavigate

경로를 변경

navigate('/home') => localhost:3000/home

useParams

:style 문법을 path 경로에 사용한 경우 useParams()로 읽기 가능

위의 코드에서 :invoiceId가 무엇인지 알기 위해 params 사용

useLocation

현재 위치 객체를 반환

현재 위치가 변경될 때마다 일부 side effect 수행하려는 경우에 유용

useRoutes

Routes와 기능적으로 동일하지만 Route 대신 JS객체를 사용해 경로를 정의

객체는 일반 Route 요소와 동일 속성을 갖지만 JSX가 필요하지 않음