[React] react-router-dom 시작하기

권준혁·2020년 11월 1일
18

React

목록 보기
4/20
post-thumbnail

안녕하세요
이번 포스팅은 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에 포함됨)

이상 중첩된 라우팅을 만들어봤습니다!
감사합니다.

profile
웹 프론트엔드, RN앱 개발자입니다.

0개의 댓글