⚛️ React SPA

👨‍💻 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 html파일로 된 "페이지 전체"를 불러와야만 했다.
하지만 이러한 방식은 웹사이트가 복잡해짐에 따라 사용자봐 서비스 제공자 사이에 더욱 많은 상호작용이 일어나게 만들었고 불필요한 트래픽을 발생시켰다.
이에 따라 Single Page Application이 생겨났다.

😲 이러한 방식은 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 시킨다.
Youtube, Gmail, airbnb, Netflix등이 이러한 방식으로 web을 만든다.

🥲 장점만 나열했는데 단점도 있다.
1. 첫 로딩 시 읽어들인 html은 거의 비어있기 때문에 Javascript파일이 무거워지고 이 파일을 기다리기 위해 첫 로딩 화면이 느려진다.
2. 두번째 단점으로는 검색엔진 최적화에 좋지 않다.
검색엔진이 비어있는 spa의 html을 거의 인식하지 못하다 보니 정보를 찾을 수 없다.

⚛️ React Route

👨‍💻
BrowserRouter : 최종적으로 Router역할을 한다.
Routes, Route : BrowserRouter안에서 경로를 매칭하는 역할을 한다.
Link : Route와 연결되어 경로를 변경하는 역할을 한다.

const App = () => {
  return (
      <BrowserRouter>
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
                <Routes>
                  <Route path="/" element={<Tweets />}>Tweets</Route>
                  <Route path="/about" element={<About />}>about</Route>
                  <Route path="/mypage" element={<MyPage />}>mypage</Route>
                </Routes>
            </section>
          </main>
        </div>
      </BrowserRouter>
  );
};



const Sidebar = () => {
  return (
    <section className="sidebar">
      <Link to="/"><i className="far fa-comment-dots"></i></Link>
      <Link to="/about"><i className="far fa-question-circle"></i></Link>
      <Link to="/mypage"><i className="far fa-user"></i></Link>
    </section>
  );
};

이런 식으로 코드를 구성하면 웹사이트의 아이콘을 눌러질 때 url경로가 달라지고 미리 설정해둔 route, link에따라 연결된 컴포넌트를 보여주게 된다.

항상 과제는 처음에는 헛질거리 한다고 시간 잘 보내는데 알고나면 별거 없다.
논리 구조가 어려운것도 아니고 새로운 문법과 형식을 사용하다보니 그것을 익히는데 시간이 걸리는 것일 뿐.
모르는 사람들이 보면 외계어 같겠지만 까보면 별거 없는 것이다.