[React]React SPA

spa란?

single page applicationd의 약자입니다.

페이지 전체를 로딩하여 페이지 전환을 보여주는 것이 아닌 SPA는 업데이트가 필요한 부분만 새로 불러오는 방식으로 진행되는 방식을 말합니다.

네이버 컷툰

네이버 컷툰을 생각해 볼까요? 네이버 컷툰의 경우 만화가 나오는 페이지를 옆으로 스크롤하게 되면 똑같은 화면에서 가운데 부분의 만화만 바뀌게 됩니다. 이는 스코롤 시 다른 부분을 유지한 채 만화를 업로드해주고 있는 부분의 컴포넌트만을 페이지 전환해주고 있기 때문입니다.

advamtage &disadvantage

• advantage
  • 반응속도를 빠르게 할 수 있고
  • 과부하 문제를 현저히 줄일 수 있고 
  • 사용자들의 가독성을 높인다,
• disadvantage
  • JavaScript의 파일 크기가 크다
  • 첫 화면 로딩 시간이 시간이 걸림
  • 검색엔진 최적화가 좋지 않다.
    • 검색 엔진의 경우 html 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하는데 spa의 html의 파일은 별다른 자료가 존재하지 않아 검색엔진에 적절하지 않다.

Router

페이지가 넘어가게 되면서 다르 뷰를 보여주는 과정에서 경로가 변경되는데 이 과정을 라우팅이라고 한다.

React Router의 주요 컴포넌트는 다음과 같다.

• browserRouter
  • 라우터 역할
  • 페이지를 새로 고침 하지 않고도 주소를 변경할 수 있게 해주는 역할입니다.
  • 상윙에 작성되어 있어야 다른 컴포넌트들을 사용 활수 있다.
• routes, route
  • 경로를 매칭해 주는 역할
  • Route의 path속성을 지정하여 <Link> 컴포넌트가 정해주는 url경로와 일치할 시에만 작동
  • Routes는 Route 컴포넌트 상단에 위치하여 어떤 요소를 사용하여 렌더링 할 것인지 범위를 정해 줄 수 있습니다.
• link
  • 경로를 변경해주는 역할
  • <Link>의 to 속성을 사용하여 path 주소로 연결해  줄 수 있습니다.

 

사용법은 다음과 같다.

1. React Router 라이브러리에서 따로 불러오기

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

2. 컴포넌트들을 사용하여 App.js문 작성

function App() {
  return (
    <BrowserRouter>//상단에 위치하여 다른 컴포넌트들을 사용할수 있게 해준다.
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;