김민태의 데브캠프 2기 - React Router Dom
이번 포스트에서는 React Router Dom의 정의 및 역할에 대해 알아보고
실제로 프로젝트에 적용해보고자 한다.
정의 : 웹 앱에서 동적 라우팅을 구현하게 해주는 것
라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.
리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다.
이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트들이 이 index.html 템플릿에
넣으면서 페이지를 변경하게 된다.
이때 이 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 랜더링하는데 도움을 준다.
React Router 설정하기
main.jsx파일에서, BrowserRouter로 감싸고,
<BrowserRouter>
<App />
</BrowserRouter>
App.jsx에서 다음과 같이 작성한다.
Routes -> 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 한다
Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 랜더링 한다.
Route -> Route는 단일 경로를 만드는데 사용되고, 두가지 속성을 취한다.
Path는 원하는 컴포넌트의 URL 경로를 지정한다. 이 경로 이름을 원하는대로 설정할 수 있다. 경로 이름이 백슬래시인 컴포넌트는 앱이 처음 로드될 때마다 먼저 랜더링된다.
이는 홈 구성 요소가 랜더링되는 첫 번쨰 구성 요소가 됨을 의미한다.
element 경로가 맞게 랜더링되어야 하는 컴포넌트를 지정
Link 구성 요소는 HTML의 <a> 태그와 유사하다.
앱 구성 요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성 요소를 랜더링한다.
다음은 React Router Dom APIs에 대해 알아보자.