React SPA, Router

히이이익

 

---

SPA

SPA는 Single Page Application으로 페이지가 한 개인 웹 애플리케이션을 의미하며, CSR(Client Side Rendering) 방식으로 렌더링 합니다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 테이터만을 넘겨주어, 첫 요청 시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용합니다.

 

장점		단점
필요한 리소스만 부분적으로 로딩하여 성능에 좋다		초기 로딩 시간이 비교적 느리다
UI 개발을 빠르게 할 수 있다		검색엔진최적화가 어렵다
해당 부분만 수정이 가능하여 유지보수에 좋다		CSR 방식은 클라이언트측에서 사용자에 대한 정보를 저장하기에 보안 이슈가 있을 수 있다
컴포넌트별로 코딩을 하기 때문에 코드 재사용성이 좋다

 

 

리액트는 SPA 방식을 구성되어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만을 가져오는 형태를 가집니다.

 

React-Router는 페이지를 새로 불러오지 않는 상황에서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리입니다.

 

다음 명령어를 입력하여 라이브러리를 설치합니다.

 

npm install react-router-dom@^6.3.0

 

설치후 import 하고 사용하면 된다.

 

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

 

1.  라우터 역할을 하는 BrowserRouter
   History API를 사용해 페이지를 새로고침 안 해도 주소를 변경한
2.  경로를 매칭해주는 Routes와 Route
   Roures: Route 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할
   Route: path 속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL경로와 일치하는 경우에만 작동된다.
   
   
3.  경로 변경하는 역할 Link
   해당 컴포넌트를 클릭할때, Route의 Path와 일치하는 페이지로 이동할 수 있게 한다.
   
   

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : About 메뉴 아이콘과 Mypage 메뉴 아이콘을 작성하고
      Link 컴포넌트를 이용하여 경로(path)를 연결합니다. */}
      <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>
      <BackButton />
    </section>
  );
};

 

 

const App = () => {
  return (
    <BrowserRouter>
      <div>
        {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}

        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를
              설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
              <Routes>
                <Route path="/" element={<Tweets />}></Route>
                <Route path="/about" element={<About />}></Route>
                <Route path="/mypage" element={<MyPage />}></Route>
              </Routes>
            </section>
          </main>
        </div>
      </div>
    </BrowserRouter>
  );
};

 

 

Route path와 Link to를 연결해 준 걸 확인할 수 있다.

 

 

import { useNavigate } from "react-router-dom";

function BackButton() {
  const navigate = useNavigate();
  function handleClick() {
    navigate(-1);
  }

  return <i onClick={handleClick} className="far fa-solid fa-backward"></i>;
}

 

 

useNavigate는 페이지를 이동할 때 사용되는데, 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요할 때 사용합니다. 음수가 들어가면 이전 페이지, 양수가 들어가면 다음페이지로 이동합니다.