1.5 단일 페이지 애플리케이션 만들기

• 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션(Single Page Application, SPA) 방식으로 개발하는 것이 정석이다.
• 그림 1-5 전통적인 방식 vs. SPA 동작 비교

1.5.1 브라우저 히스토리 API

1.5.2 react-router-dom 사용하기

• react-router-dom 패키지도 내부적으로 브라우저 히스토리 API를 사용한다.
• npm install react-router-dom
• react-router-dom >>> 웹을 위한 react-router 패키지. 리액트 네이티브도 지원.

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Rooms from './Rooms'; // 별도 컴포넌트로 분리

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <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() {
  return <h2>이곳은 홈페이지입니다.</h2>;
}

function Photo() {
  return <h2>여기서 사진을 감상하세요.</h2>;
}

• 버튼을 통해서 페이지를 전활할 때는 react-router-dom에서 제공하는 Link 컴포넌트를 사용한다. to 속성값은 이동할 주소를 나타낸다.
• react-router-dom의 Route 컴포넌트를 이용해서 각 페이지를 정의한다. 현재 주소가 path 속성값으로 시작하면 component 속성값이 가리키는 컴포넌트를 렌더링한다. (slash(/) 단위로 비교)
• exact 속성값을 입력하면 그 값이 완전히 일치해야 해당 컴포넌트가 렌더링된다.
• 아래와 같이 같은 path 속성값을 가지는 Route 컴포넌트를 여러 번 작성할 수도 있다. (실제로...?)

// 현재 주소가 /photo로 시작된다면 PhotoTop, PhotoBottom 컴포넌트가 모두 렌더링 된다. 
<Route path="/photo" component={PhotoTop} />
<Route path="/photo" component={PhotoBottom} />

• Rooms.js

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

function Rooms({ match }) {
  return (
    <>
      <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>}
      />
    </>
  );
}

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.{파라미터 이름} 형식으로 사용될 수 있다.