React SPA

React SPA란?

---

• SPA는 Single Page Application의 약자로 한 페이지에서 새로고침없이 다른 페이지를 보여주는 기술이다. 
• 예전에 웹 페이지에서는 페이지를 보여줄 때 여러페이지로 구성이 되어있었지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라 데이터 정보 전송 과부화로 인한 속도 저하 등의 문제점을 해결하기 위해 만들어 졌다.
• 사용자에게 보여준 페이지는 한 페이지지만, 사용자가 원하는 해당 페이지 와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
• 다른 주소에 다른 화면을 보여주는것을Routing(라우팅)이라고 한다. React Router 라이브러리를 통해 구현한다.
• 단, 앱의 규모가 커지면 자바스크립트 파일이 너무 커지고 검색 엔진과의 최적화가 좋지않아 페이지 검색이 힘들다.
• 터미널에서 React가 들어있는 폴더에 접근해 아래의 명령어를 입력하면 React Router 라이브러리를 설치할 수 있다. 이때, @뒤에 숫자는 버전을 의미한다. 또, 설치 후 import하여야 사용 가능하다.

npm install react-router-dom@^6.3.0

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

 

BrowserRouter

---

• <BrowserRouter>  컴포넌트는 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
• 이때 사용할 페이지들의 상위 컴포넌트로에 있어야 React Router의 컴포넌트들을 사용할 수 있다.
• 'react-router-dom'에서 { BrowserRouter } 를 import해야 사용가능하다.

function App () {
  return (
    <BrowserRouter>
    <div>
      <div>Home </div>
      <div>MyPage</div>
      <div>Dashboard</div>
    </div>
    </BrowserRouter>
  )
}

• 위에 처럼 App에서 사용하지 않고, index.에서 바로 사용하여 렌더링 할 수 있다.

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);    

 

 

 

Routes, Route

---

• 경로를 매칭해주는 역할을 하는 컴포넌트다. 
• <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜준다. 만약  <Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링된다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정한다.  <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.
• 잘못된 주소로 접근하여 의도한 화면이 보이지 않도록 path=”*”을 사용하여, 정해진 주소 외의 경로에서 보여줄 페이지를 지정할 수 있다.
• 'react-router-dom'에서 {  Routes, Route } 를 import해야 사용가능하다.

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

 

 

 

Link

---

• 경로를 연결해 주는 역할을 하는 컴포넌트. ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀐다.
•  <Link>를 쓰는 이유는 <a> 요소는 페이지를 처음부터 렌더링을 시키면서 새로고침 현상이 발생한다. 그러나 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현이 가능하다.
• <Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해 준다.
• 'react-router-dom'에서 { Link} 를 import해야 사용가능하다.

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

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

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

function App () {
  return (
    <BrowserRouter>
    <div>
        <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
         <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 wns다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>    
    </div>
    </BrowserRouter>
  )
}

 

 

 

useNavigate

---

•  Navigate 는 특정 행동(이벤트)을 했을 때 해당 주소로 이동하게 만들어 준다.
• 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우에 사용한다.
• 'react-router-dom'에서 {useNavigate} 를 import해야 사용가능하다.
• navigate 변수는 첫번째 인자로 이동시킬 페이지의 주소 를 넣거나 -1 과 같은 값을 넣어 페이지 히스토리의 뒤로가기 버튼과 같은 동작을 시킬 수도 있다.

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

const navigate = useNavigate();

<button onClick={() => { navigate(-1); }} >
이전 페이지로 이동하기
</button>