• 과거의 웹 사이트는 페이지를 옮길 때 마다 모든 페이지를 불러와야 했다.
• 이는, 많은 트래픽과 사용자의 경험을 저하시켰습니다.
• 요즘의 웹 페이지는 이에 대한 대안으로 SPA(Single Page Application) 를 사용합니다.
• SPA는 메뉴나 footer등 웹페이지의 중복되는 부분을 다시 불러오지 않는다.
• 업데이트가 필요한 부분만 불러오는 SPA를 통해서 트래픽이 감소되고 사용자의 경험을 상승시킬 수 있습니다.
• React에서 SPA를 구현하기 위해서 가장 많이 사용하는 라이브러리는 React Router로 자바스크립트가 데이터를 조작해 새로운 HTML 요소를 동적으로 화면에 보여준다.

SPA의 장단점

장점

• 전체 페이지를 갱신하는 것이 아니라, 서버로부터 필요한 데이터(업데이트된 부분)만 받아 갱신하면 되기에 사용자와 상호작용이 빠르다.
• 서버에서는 요청받은 데이터만 전달하면 되기에 서버 과부하가 적어진다.
• 매번 페이지 전체를 렌더링하지 않아도 되기 때문에 더 나은 사용자 경험을 제공합니다.

단점

• SPA로 웹페이지를 구현할 경우 자바스크립트 파일의 크기가 커진다.
• 자바스크립트의 파일이 크기 때문에 처음 웹페이지를 불러올 때 시간이 오래 걸릴 수 있다.
• SPA의 HTML의 경우 내용에 별다른 자료가 없기에 검색 엔진 최적화(SEO)가 좋지 않습니다.

React Router

• SPA는 하나의 화면을 표시하지만, 사실 주소에 따라 각기 다른 페이지를 보여준다.
• 주소에 따라서 보여지는 화면이 달라지기에 이를 "Routing" 이라고 한다.
  🧁 npm install react-router-dom 으로 설치한다.
  🧁 yarn add react-router-dom 으로 설치한다.

React Router의 주요 컴포넌트들

• BrowserRouter는 라우터 역할을 한다.
• Switch와 Route는 경로를 지정해준다.
• Link를 통해서 경로를 변경할 수 있다.
  🍭 import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; 으로 컴포넌트들을 불러올 수 있다.

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

<BrowserRouter>
  <Switch>
      <Route exact path="/">
          <Component1 />
      </Route>
      <Route path="/good">
          <Component2 />
      </Route>
      <Route path="/nice" component={Nice} />
      <Redirect to="/" />
  </Switch>
</BrowserRouter>

• Route의 path를 통해서 해당 경로에서 어떤 컴포넌트를 보여줄지 정한다.
• exact를 설정하지 않으면, "/good"의 경로에서 컴포넌트1과 컴포넌트2가 모두 보여지게 된다.
  exact를 통해서 경로가 정확히 일치할 때만 매칭한다.
• Swtich를 사용함으로써, 현재 주소와 정확이 일치하는 단 하나의 라우터의 컴포넌트만 출력한다.
• Redirect를 사용하여 설정된 라우팅 이외의 경로에 진입하면, / 경로로 리다이랙트한다.

<div>
  <Button> <Link to='/'>컴포넌트1로 이동</Link> </Button>
  <Button> <Link to='/good'>컴포넌트2로 이동</Link> </Button>
</div>

• Link의 to 속성으로 Router에 연결된 경로로 이동할 수 있다.
• 경로를 변경하지만, 어플리케이션을 유지한 채 페이지를 전환하지 않는다.
• HTML5 history API로 페이지 주소만 변경한다.
• React DOM으로 Link 컴포넌트는 렌더링시 a태그가 되는데, a태그와는 다르게 Link 컴포넌트는 페이지 전환을 방지하는 기능이 있어, SPA를 구현할 수 있게 한다.

react-router-dom ^6이상

• 버전 6 이상에서는 Switch를 지원하지 않는다.
• Switch 대신에 Routes를 불러와 사용한다.
• import { Routes } from "react-router-dom";
  로 불러온다.
• 각 경로에 매칭할 컴포넌트를 Route의 element 속성에 넣어준다.
  🧁 <컴포넌트_1/> 은 이제 사용할 수 없다.
• switch와 다르게 element 속성 내부에 컴포넌트_1이 아닌, 컴포넌트 형식으로 <컴포넌트_1/>과 같이 넣어줘야 한다.

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

const App = () => {

  return (
    <div className="App">
      <div>version 6 test</div>
      <BrowserRouter>
        <div>
          <button> <Link to='/'>컴포넌트 1 가기</Link> </button>
          <button> <Link to='/hi'>컴포넌트 2 가기</Link> </button>
        </div>
        <Routes>
            <Route exact path="/" element={<컴포넌트_1/>} />
            <Route path="/hi" element={<컴포넌트_2/>} />
        </Routes>
      </BrowserRouter>      
    </div>
  );
}