[실전 리액트 프로그래밍] SPA 만들기

 

 

단일 페이지 애플리케이션(spa)

조건

- 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다.

  단, 브라우저는 서버로 요청을 보내지 않는다.

- 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다.

  단, 브라우저는 서버롤 요청을 보내지 않는다.

 

위 조건을 만족하는 브라우저 API 

- pushState, replaceState 함수 (js가 페이지 전환을 하고 싶을 때 사용)

- popstate 이벤트(브라우저가 UI를 통해서 페이지 전환을 하고 싶을 때 사용)

 

 

---

 

 

index.js

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

 

 

App.js

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

export default function App() {
  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() {
  return <h2>홈페이지에요</h2>;
}

function Photo() {
  return <h2>사진을봐요</h2>;
}

 

 

 

Rooms.js

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

export default function Room({ 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={() => <h2>방 고르기</h2>} />
    </div>
  );
}

function Room({ match }) {
  return <h2>{`${match.params.roomId}방을 골랐어요`}</h2>;
}