이번 글에는 라우터의 개념에 대해 알아보겠습니다.
라우터란?
라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정할 수 있습니다. 또한, 브라우저 이동 없이 컴포넌트만 싹 갈아 치워서 리프레시 없이 빠르게 페이지 전환이 마치 모바일앱처럼 이루어지게끔 해줍니다.( a요소 같은 역할을 하지만, 리프레시 없이 페이지 전환이 되는 것처럼 보이는 것이라 보면 되겠습니다)
라우터에 내장된 컴포넌트 종류
라우터에는 Route, Link, Switch 가 존재하는데, 각 개념들을 간단하게 살펴보면
- BrowserRouter : URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해줍니다.
- Switch - Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줍니다. 보통 메인 Route의 url경로를 "/"로 지정하고 다른 Route에는 "/detail", "/login" 이런식으로 지정하게 되는데, 만약 Switch를 사용하지 않으면 그냥 메인페이지에 가기 위하여 "/" 경로를 접속했늗네 "/"가 포함된 "/detail", "/login" 컴포넌트들이 다 렌더링 되는 경우를 보게 됩니다.
- Route - 컴포넌트에 path 속성을 이용하여 원하는 url를 지정합니다. 그 url에 접속하면 해당 컴포넌트만 렌더링이 됩니다. 즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있습니다.
- Link - 'a'요소와 비슷한 개념이라고 보시면 됩니다. 지정한 url로 이동이 되게끔 해줍니다. 페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날라가게 됩니다.
라우터 사용방법
-
터미널에서 npm install react-router-dom 을 입력하여 라우터 패키지를 다운받습니다.
-
index.js에 가서 상단에import { BrowserRouter } from "react-router-dom"; 입력하여, react-router-dom에 내장된 BrowserRouter 컴포넌트를 App컴포넌트를 감쌉니다.
//예시입니다
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>,
document.getElementById("root")
);
-
개발하고 있는 스크립트로 돌아가서 상단에 import { Route, Link, Switch } from "react-router-dom";를 입력해줘서 Route, Link 그리고 Switch 사용준비를 합니다.
-
Route안에 path 속성을 이용하여 원하는 url 경로를 설정해줍니다.
-
component속성을 이용하여 해당 url에 배치되길 원하는 컴포넌트를 넣어줍니다(그러면 저 url에만 접속해야지만 설정한 컴포넌트가 렌더링이 됩니다.)
-
Switch로 Route들을 다 감싸줍니다.
-
눌렀을때 해당 url로 이동하기 위해 Link를 사용하고 to 속성을 이용하여 url경로를 지정해줍니다.
그럼 잘 작동하는것을 보실 수 있습니다.
아래는 예시코드입니다.
import Detail from "./Detail";
import Main from "./Main";
import { Route, Link, Switch } from "react-router-dom";
function App() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={Main} />
<Route path="/detail" component={Detail} />
</Switch>
<Link to="/">
<button>홈으로</button>
</Link>
<Link to="/detail">
<button>디테일페이지로</button>
</Link>
</div>
);
}