💛 리액트 SPA 02 (React-router-dom)

전에 사용한 브라우저 히스토리 api를 이용해서 페이지 라우팅 처리를 직접 구현할 수도 있지만 신경 쓸 부분이 너무 많기에, react-router-dom을 이용하여 단일 페이지 애플리케이션을 만들어보자. 이 패키지를 사용하면 쉽게 구현할 수 있다.

👉🏻 설치 명령어

npm install react-router-dom

react-router는 웹뿐만 아니라 리액트 네이티브도 지원한다. 위에 설치한 패키지는 이름에서 알 수 있듯이 웹을 위한 react-router 패키지다. 그리고 라우팅 안에서 또 라우팅 가능하다.

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Rooms from "./Rooms";

export default function RRdom() {
  return (
    <BrowserRouter>
      <div style={{ padding: 20, border: "5px solid gray" }}>
        <Link to="/">홈</Link>
        <br />
        <Link to="/photo">사진</Link>
        <br />
        <Link to="/rooms">방소개</Link>
        <br />
        <Route exact path="/" component={Home} />
        <Route path="/photo" component={Photo} />
        <Route path="/rooms" component={Rooms} />
      </div>
    </BrowserRouter>
  );
}

function Home({ match }) {
  return <h2>이곳은 홈페이지입니다.</h2>;
}

function Photo({ match }) {
  return <h2>이곳은 홈페이지입니다.</h2>;
}

react-router-dom 패키지를 이용해 각종 컴포넌트들을 import 시켰다. react-router-dom을 사용하기 위해서는 전체를 컴포넌트로 감싸야한다. 그리고 버튼을 통해 페이지를 전환할 때는 react-router-dom에서 제공하는 Link 컴포넌트 사용했다. to 속성값은 이동할 주소를 나타낸다. react-router-dom의 Route 컴포넌트를 이용해서 각 페이지를 정의한다. 현재 주소가 path속성으로 시작하면 컴포넌트 속성값이 가르키는 컴포넌트를 렌더링한다.

예를들어, localhost:3000/photo/abc를 입력했을 때의 주소가 /photo로 시작하므로 photo컴포넌트가 렌더링이 된다. 그러나 localhost:3000/photo123을 입력하면 Photo 컴포넌트가 렌더링되지 않는다. 이는 슬래시(/) 단위로 비교를 하기 때문이다. exact 속성값을 입력하면 그 값이 완전히 일치해야 해당 컴포넌트가 렌더링된다. 만약 Home 컴포넌트 부분에서 exact 속성값을 입력하지 않았다면 Home 컴포넌트는 항상 렌더링된다.

그리고 path 속성값을 가지는 Route 컴포넌트를 여러 번 작성해도 된다.

<Route path="/photo" component={Photo} />
<Route path="/photo" component={Rooms} />

이처럼 현재 주소가 photo로 시작한다면 위에 선정된 컴포넌트 photo, rooms 둘 다 모두 렌더링된다.

👉🏻 [Rooms.js]

import React from "react";
import { Route, Link } from "react-router-dom";

const 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>
);
};

export default Rooms;

function Room({ match }) {
return <h2>{`${match.params.roomId}방을 선택하셨습니다.`}</h2>;
}

Rooms 컴포넌트 내부에는 또다시 라우팅을 처리하는 코드가 들어 있다. Route를 통해서 렌더링되는 컴포넌트는 match라는 속성값을 사용할 수 있다. match.url은 Route 컴포넌트의 path 속성값과 같다. 따라서 Rooms 컴포넌트의 match.url은 /rooms와 같다. Route컴포넌트의 path 속성값에서 콜론을 사용하면 파라미터를 나타낼 수 있다. 추출된 파라미터는 match.params.{파라미터 이름}형식으로

match 객체에는 와 URL이 매칭된 대한 정보가 담겨져있다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다.

Match

path : [string] 라우터에 정의된 path
url : [string] 실제 클라이언트로부터 요청된 url path
isExact : [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행
params : [JSON object] url path로 전달된 파라미터 객체

History

length [number] 전체 history 스택의 길이
action [string] 최근에 수행된 action (PUSH, REPLACE or POP)
location [JSON object] 최근 경로 정보
push(path, [state]) [function] 새로운 경로를 history 스택으로 푸시하여 페이지를 이동
replace(path, [state]) [function] 최근 경로를 history 스택에서 교체하여 페이지를 이동
go(n) [function] history 스택의 포인터를 n번째로 이동
goBack() [function] 이전 페이지로 이동
goForward() [function] 앞 페이지로 이동
block(prompt) [function] history 스택의 PUSH/POP 동작을 제어