TIL 19: React 기초 - SPA

SPA 

SPA는 Single Page Application의 약자입니다.

말 그대로 페이지를 옮길 때 다른 새로운 페이지를 불러오는 것이 아니라

하나의(Single) 페이지 내에서 서버로부터 필요한 데이터만 받아서 해당하는 부분만 업데이트하는 페이지를 말합니다.

완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데

 

장점: 페이지 이동 시 변하는 부분만 로딩하면 되기 때문에 데이터 부하 걸릴 확률 낮습니다.

단점: 비어있는 HTML에 비해 JavaScript 파일은 무겁기 때문에 기다리는 시간으로 인해 로딩 시간 길어집니다.

또한 검색엔진 최적화에는 좋지 않다고 합니다.

우선 검색엔진의 작동방식에 대해 알아보자면 검색 로봇이 웹페이지의 정보를 수집 및 분석을 통해 결과값에 인덱스를 붙여 보관합니다.

이후 사용자가 검색하면 보관함에 있던 인덱스 중 검색어와 연관성이 높은 순대로 웹페이지들을 구성해서 보여줍니다.

이렇게 작동하기 위해서는 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등이 있어야 분석할 수 있는데,

SPA는 HTML이 거의 비어있어서 검색 로봇이 충분한 자료를 수집하지 못합니다.

 

와이어프레임

와이어 프레임이란 디자인을 하기 전 단계로 페이지의 프레임을 짜는 작업을 말합니다.

개발자들은 이것을 통해 웹페이지의 컨셉을 이해할 수 있다고 합니다.

참고로 목업은 PC나 모바일의 프레임에 맞게 만들어 직관적으로 이해가 가능하도록 디자인한 것을 말합니다.

와이어 프레임을 구상할 때는 먼저 어떤 컴포넌트를 만들어서 어떻게 조합할지를 구상합니다.

EX) 유튜브는 헤더, 컨텐츠, 그리고 컨텐츠 안에 썸네일, 조회수, 업로드한 날짜 등의 데이터를 받아 UI에 맞게 화면에 출력합니다.

 

라우팅

라우팅(Routing)은 "경로에 따라 변경한다"라는 의미를 갖고 있습니다.

따라서 다른 주소에 따라 다른 페이지를 보여주는 과정이라고 할 수 있습니다.

React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용합니다.

 

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다.

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link 입니다.

 

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 합니다.

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.

 

 

 

그럼 실제로 어떻게 라우팅을 할 수 있는지에 대해 알아보도록 하겠습니다.

 

1. 먼저 라우팅을 할 수 있도록 개발 환경을 설정해줍니다.

   먼저 React Router DOM을 설치한 후, import를 사용해서 컴포넌트들을 가지고 옵니다.

 

2. 라우트에 사용되는 컴포넌트를 작성해줍니다.

   아래 예시에는 Home, MyPage, Dashboard가 있습니다.

3. 위의 컴포넌트들이 보여질 수 있도록 메뉴를 만들어 줍니다.

   <div>, <li> 등을 이용해서 구성합니다.

 

4. 모든 것들이 준비됐으니 주소에 따라 페이지가 달라질 수 있도록 설정해줍니다.

   1) Route 컴포넌트를 사용하기 위해 <BrowserRouter>를 이용합니다.

   2) 주소 경로와 2번에서 만든 컴포넌트들을 연결해주기 위해 <Switch> 와 <Route>를 이용합니다.

   3) Link의 to를 이용해서 컴포넌트와 path주소를 연결해줍니다.

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter,Switch, Route} from 'react-router-dom';

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


function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link> {/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

//Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

//MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

//Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

 

 

Sprint Office Hour

window.history.back 또는 window.history.forward를 활용해서 구현 가능