[React] Single-Page Application

SPA

서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통

• 전통적 웹사이트는 페이지 이동 시 html 파일로 된 페이지 전체를 렌더링
  *서버와의 불필요한 트래픽 발생, 느린 속도로 사용자 경험 저하
• SPA는 필요한 부분만 새로 렌더링, 중복되는 부분은 불러오지 않음
  *업데이트에 필요한 데이터만 전달받아 자바스크립트가 동적으로 html 요소를 생성해서 화면에 보여줌

 

장점

• 사용자와의 interaction에 빠르게 반응 가능
• 서버에서 요청받은 데이터만 넘겨주면 되기에 서버 과부하 문제 해결
• 전체 페이지를 렌더링할 필요가 없어 높은 사용자경험 제공

 

단점

• html 파일을 읽는 과정에서 자바스크립트 태그를 만나면 html 파싱을 멈추고 자바스크립트 파일을 읽는데, 자바스크립트 파일의 크기가 크기 때문에 로딩시간이 길어짐
• 검색 엔진 최적화에 불리
  *구글이나 네이버같은 검색 엔진은 html 파일에 있는 자료를 분석하는 방식으로 검색기능을 구동하는데, SPA의 경우 html 파일에 별다른 내용이 없기 때문에 검색 엔진이 적절히 작용하지 못함

 

 

Wireframe : 컴포넌트 구분

<Header /> //화면 상단 컴포넌트
<Content /> //컨텐츠 컴포넌트

• 어떤 컴포넌트를 만들어 이들을 조합할 지 구상 필요
• 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 유기적으로 주고 받을 수 있도록 설계
  *React Router 활용
• Header : 어떤 페이지에 가도 항상 존재하기에 컴포넌트로 만들면 모든 페이지에서 사용 가능
• Content : 반복적인 형태로 화면을 구성하기에 컴포넌트로 만들어 재사용

 

 

React Router

• SPA : 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 것은 아님
  *여러 종류의 화면 존재, 각 화면들은 주소를 달리 갖음
• 라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정
• React : 해당 기능이 내장되어 있지 않아 직접 주소마다 다른 뷰를 보여줘야 함
  *React Routing을 위해 React Router라는 라이브러리 사용

 

1. Import 명령어

//App.js 파일 상단
import {BrowserRouter, Switch, Route, Link} from "react-router-dom"

• 필요한 모듈을 불러오는 역할로 구조분해할당과 비슷하게 이용

 

2. React Router의 주요 컴포넌트

1. router : <BrowserRouter>
2. route matchers : <Switch>, <Route>
3. route changers : <Route>

• 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 명령어를 통해 따로 불러와야 함

 

2-1. BrowserRouter

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
  	<App/>
  </BrowserRouter>, 
  document.querySelector('#root')
);

//App.js
function App () {
  return (
   <BrowserRouter>
      <div>
    	...
      </div>
   </BrowserRouter>
  )
}

export default App;

• 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할
• ReactDOM의 렌더 단계인 index.js에 넣어서 활용
• BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용 가능

 

2-2. Switch

function App() {
  return (
    <BrowserRouter>
      <div>
        ...
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

• 경로를 매칭
• 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링
• 무슨 Route로 갈 지 정해줌
• Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링
• exact : exact 속성이 없으면 해당 경로(/)로 시작하는 중복된 Route 컴포넌트를 모두 보여줌

 

2-3. Route

• 경로를 매칭
• path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정함
• Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
• Switch 컴포넌트 안에 위치

 

2-4. Link

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
    	...
      </div>
   </BrowserRouter>
  )
}

• 경로를 연결
• 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경
• ReactDOM으로 렌더를 시키게 되면 Link 컴포넌트는 a 태그가 됨
• Link의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결

 

a 태그 : 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링
Link 컴포넌트 : 페이지 전환을 방지하는 기능이 내장되어있어 SPA 구현 가능

 

3. React Router DOM 설치

npm install react-router-dom