React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다.
라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 ReactRouterDOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.
SPA ( Single Page Application )
리액트는 spa이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이 때 React Router DOM 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 된다.
React Router Dom 설치하기
npm install react-router-dom --save
React Router 설정하기
설치가 완료된 후 가장 먼저 해야할 것은 앱 어디에서나 React Router를 사용할 수 있도록 하는 것이다.
이렇게 하려면
1. src 폴더에서 index.js파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소 ( App 구성 요소)를 그안에 래핑한다.
2. App 컴포넌트를 감싸게 되면 App 컴포넌트의 구성요소를 다 가져올 수 있는데 그 안에서도 라우트를 정의해줘야한다.
이렇게 라우트를 정의하게 되면 주소 뒤에 path 값이 들어가게 되며 해당 컴포넌트로 이동할 수 있다.
ex) http://localhost:3000/about ...
Routes
Routes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할.
Routes로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링 해준다.
Route
Route는 단일 경로를 만드는 데 사용되며 두 가지 속성을 취합한다.
1. path
원하는 컴포넌트의 URL 경로를 지정한다. 이 경로 이름을 원하는대로 지정할 수 있다.
첫 번째 경로 이름은 백슬래시(/)가 되는데 경로 이름이 백슬래시인 컴포넌트는 앱이 처음 로드될 때 마다 먼저 렌더링 된다. 이는 홈 구성 요소가 렌더링 되는 첫 번째 구성 요소임을 의미하며 사용한다.
2. element
경로에 맞게 렌더링되어야 하는 컴포넌트를 지정한다.
3. <Link />를 이용해 경로를 이동하기
react-router-dom 라이브러리에서 Link를 가져와 사용할 수도 있다.
Link 구성 요소는 HTML의 앵커 요소 ( <a /> )와 유사하다. 여기서 to 속성은 링크가 이동하려는 경로를 지정한다.
앱 구성 요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성 요소를 렌더링한다.
