안녕하세요
이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.
create-react-app을 이용해 진행했습니다.
세 가지 패키지는 각각 용도가 다릅니다. 우리는 웹에서 사용할 것이므로 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는
중첩라우팅은 내부 컴포넌트에 라우팅지점이 또 있는 형태입니다.
이 기능들을 이용해 중첩라우팅을 만들어보겠습니다
// 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에는 url뿐 아니라 다른 정보도 담겨있습니다.
이상 중첩된 라우팅을 만들어봤습니다!
감사합니다.