안녕하세요
이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.
create-react-app을 이용해 진행했습니다.
- react-router - 웹&앱
- react-router-dom - 웹
- react-router-native -앱
세 가지 패키지는 각각 용도가 다릅니다. 우리는 웹에서 사용할 것이므로 react-router-dom을 사용합니다.
react-router-dom의 사용법은 많습니다.
react-router-dom Reference를 참고해주세요
먼저 npm에서 설치를 진행합니다.
npm i react-router-dom완료되면 App.js에서 import문에 다음을 추가합니다.
import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";import된 BrowserRouter, Route, Link, Switch는
- BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다.
- Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.
- Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다.
- Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다.
사용하지 않을 경우 매칭되는 모두를 렌더링합니다.
중첩라우팅은 내부 컴포넌트에 라우팅지점이 또 있는 형태입니다.
이 기능들을 이용해 중첩라우팅을 만들어보겠습니다
// App.js
import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";
import Rooms from './Rooms' // 새로 만들 컴포넌트
class App extends Component {
render() {
return (
<BrowserRouter> // (1)
<div style={{padding:20, border:'5px solid gray'}}>
<Link to="/">홈</Link><br/> // (2)
<Link to="/photo">사진</Link><br/>
<Link to="rooms">방 소개</Link><br/>
<Switch> // (3)
<Route exact path="/" component={Home}/> (4)
<Route path="/photo" component={Photo}/>
<Route path="/rooms" component={Rooms}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
function Home({match}){
return <h2>여기는 홈페이지입니다.</h2>
}
function Photo({match}) {
return <h2>여기서 사진을 감상하세요.</h2>
}
export default App;
(1) 렌더링 부분을 보면 모든 태그를 BrowserRouter가 감싸고있습니다.
(2) Link는 클릭시 이동하는 url을 지정합니다.
(3) Switch태그는 Route요소들 중 매치되는 url을 렌더링해줍니다.
Switch로 감싸고 있기 때문에 Route가 중복되는 것이 있으면 첫 번 째 요소만 렌더링합니다.
(4) Route태그의 path는 매칭을 기다리는 url이며, 매칭되면 component를 렌더링합니다.
[방 소개]는 아직 rooms컴포넌트를 작성하지 않았습니다.
홈, 사진을 정상적으로 렌더링됩니다.
Rooms.js 파일을 만듭니다.
App.js에서 방 소개버튼을 누르면 Rooms컴포넌트로 이동됩니다.
url은 /rooms가 됩니다.
import React from 'react'
import {Route,Link} from 'react-router-dom'
export default function Rooms ({match}) {
return (
<div>
<h2>여기는 방을 소개하는 페이지입니다.</h2>
<Link to={`${match.url}/blueRoom`}> 파란 방입니다. </Link><br/>
<Link to={`${match.url}/greenRoom`}> 초록 방입니다. </Link><br/>
<Route path={`${match.url}/:roomId`} component={Room}/>
<Route exact path={match.url} render={()=><h3>방을 선택해주세요.</h3>}/>
</div>
)
}
function Room({match}) { // 함수형에서 match 참조하기
return <h2>{`${match.params.roomId} 방을 선택하셨습니다.`}</h2>
}Link를 보시면 템플릿 리터럴 안에 match.url을 볼 수 있습니다.
match는 경로를 통해 제공되는 props가 담겨있습니다.
- 함수형 컴포넌트에서는 인수에서 비구조화 할당으로 {match} 를통해 받아옵니다.
- 클래스형 컴포넌트에서는 this.props.match로 참조합니다.
match에는 url뿐 아니라 다른 정보도 담겨있습니다.
- match.params는 동적인 url입니다. 위 코드를 보시면 Route태그 path속성 안에 ${match.url}/:roomId 가 있습니다. roomId가 바로 params가 되는 부분입니다.
roomId의 경우 match.params.roomId로 참조합니다. params는 key/value쌍이 존재합니다. - match.isExact는 전체 URL과 일치하는지를 반환하는 boolean입니다.
- match.path는 key값을 포함한 url입니다. (/:roomId 처럼 key가 url에 포함됨)
- match.url는 value값을 포함한 url입니다. (/blueRoom , /greenRoom처럼 value가 url에 포함됨)
이상 중첩된 라우팅을 만들어봤습니다!
감사합니다.
