React

[React] React Router Dom

낮에만코딩함 2022. 7. 21. 22:46

React Router Dom이란?

 

React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다

라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.

 

Single Page Application (SPA)

 

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

 

 

React Router 설정하기

 

src 폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소를 그 안에 래핑한다.

 

 

 

 


(이 글은 JohnAhn님의 강의를 참고하였습니다.)