[React] 08. React SPA와 Router 사용하기 01

# SPA(Single Page Application)

SPA란, 한 개의 페이지로 이루어진 애플리케이션을 말합니다.

 

기존의 웹 페이지는 여러 페이지로 구성되어 있는데요! 사용자가 페이지를 이동할 때마다 새로운 HTML을 받아 해석한 후에 화면에 보여줍니다. 하지만 요즘 웹에서는 제공하는 정보가 많기 때문에 기존의 방식을 사용하기에는 성능상의 문제가 발생합니다. 

 

그래서 리액트와 같은 라이브러리를 사용하여 뷰 랜더링을 담당하게 하고, 사용자와 인터랙션이 필요한 부분은 자바스크립트로 업데이트하여 해결하거나 새로운 데이터가 필요할 때에는 서버 API를 호출하여 문제를 해결합니다.

 

SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있어요!

 

# 라우터(Router)

Router란, 다른 주소(url)에 다른 화면을 보여주는 것을 말합니다.

 

먼저, react-router를 설치합니다.

npm install --save react-router

 

다음과 같이 Home과 About 컴포넌트를 만들어줍니다.

import React from 'react';

const Home : React.FC = () => {

    return (
        <div>
            <h1>HOME</h1>
            <p> 홈 페이지입니다.</p>
        </div>
    )
};

export default Home;

import React from 'react';

const About : React.FC = () => {

    return (
        <div>
            <h1>ABOUT</h1>
            <p>상세 페이지입니다.</p>
        </div>
    )
};

export default About;

 

 

# Link 컴포넌트 사용하기

<Link> 컴포넌트는 HTML에서 <a>태그와 유사한 기능을 하는데, to 속성을 사용하여 이동할 경로를 지정해 줄 수 있습니다. 

import React from "react";
import "./App.css";
import Home from "./RouterEx/Home";
import About from "./RouterEx/About";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

const App: React.FC = () => {
  return (
    <div>
      <Router>
        <Link to="/">HOME으로 이동하기</Link>
        <br />
        <Link to="/about">ABOUT으로 이동하기</Link>

        <Route path="/" component={Home} exact={true} />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
};

export default App;

✓ <Router> 컴포넌트는 <Link>와 <Route>에 공통 상위 컴포넌트입니다.

 

# Route 컴포넌트 사용하기

<Route> 컴포넌트는 일반적으로 현재 URL에 따라 특정 화면을 보여주거나 숨기기 위해서 사용됩니다.

 

아래 코드는 route 컴포넌트를 적용한 예제입니다.

App 컴포넌트에서 router를 사용하여 다음과 같이 사용할 수 있어요!

<Route>의 component를 사용하여 화면에 보여줄 컴포넌트를 지정하고, path를 사용하여 url을 지정하여줍니다.

import React from "react";
import "./App.css";
import Home from "./RouterEx/Home";
import About from "./RouterEx/About";
import { BrowserRouter as Router, Route } from "react-router-dom";

const App: React.FC = () => {
  return (
    <div>
      <Router>
        <Route component={Home} path="/" exact={true} />
        <Route component={About} path="/about" />
      </Router>
    </div>
  );
};

export default App;

 

path속성을 사용하여 지정해준 url대로 각각 화면을 보여줍니다.

또한, 여러 url에서 하나의 컴포넌트를 보여주고 싶을 때에는 다음과 같이 배열을 사용하여 설정할 수 있습니다.

<Route component={About} path={["/about", "/info"]} />