React Router Dom

React Router Dom

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

Single Page Applocation(SPA)

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

React Router 설정하기

• 설치가 완료된 후 가장 먼저 할 일은 앱 어디에서나 React Router를 사용할 수 있도록 하는 것 입니다.
• 이렇게 하려면 src 폴더에서 index.js파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소를 그 안에 래핑합니다.

BrowserRouter

• HTML5 History API를 사용하여 UI를 URL과 동기화된 상태로 유지해줍니다.

여러 컴포넌트 생성 및 라우트 정의하기

Route, Routes

Routes

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

Route

• Route는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 합니다.
• element 경로에 맞게 렌더링되어야 하는 컴포넌트를 지정합니다.