React SPA

SPA

spa는 Single-Page Application으로 react를 이용해 한 페이지를 나누어 따로 동작이 가능하도록 하여 새로 불러와야 하는 부분만 데이터를 받아 렌더링 하는 기법이다.
장점: 원하는 부분만 변경을 하면 되니 일부분만 렌더링 하는데에 걸리는 시간이 줄어든다.
단점: 처음 받아야할 데이터가 많기 때문에 처음 페이지를 렌더링 할 때에는 시간이 많이 걸린다.
검색엔진의 최적화에 않좋은데, 그 이유는 검색엔진은 html을 이용하는데, spa를 사용할때에 html에는 링크만 해두고 자바스크립트 내부에서 dom을 이용해 조작하므로 검색이 잘 안된다.

SPA를 이용하기 위해서는 React Router이라는 라이브러리를 이용할 수 있다.

1. React Router를 npm install을 이용해 다운로드 한다.

npm install react-router-dom

2. react Router와 함께 필요한 메서드 들을 import 해준다.(당연히 react는 import 해야한다.)

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

3. <Route> ,<Routes>,<Link>,<BrowserRouter>를 이용해 구현해준다.
   <Route>는 <Routes> 의 자식 요소여야 하고, <link>는 렌더링 할 위치를 알려주고, 모든 요소를 <BrowserRouter> 로 감싸주어야 한다.

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;