[React] SPA, Router

 

 

 

 

 

 

 

📌리액트 개념

 

 

📍SPA( Single-Page Application )

 

서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지에 갱신에 필요한 데이터만 받아

그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트

 

 

전통적인 웹사이트 - 페이지를 이동 시 "페이지 전체"를 불러와야함

SPA - 페이지 이동 시 중복 되는 부분은 불러 오지 x

          중복 되는 헤더, 푸터는 냅두고, 컨텐트만 바꾼다는 뜻

 

 

SPA  장점

 

페이지 전체를 런데링 하는 것이 아니므로 사용자의 행동에 빠르게 반응

 

SPA  단점

 

첫 화면의 로딩 시간이 길어짐

검색 엔진(자료를 수집하기 좋도록 웹 페이지를 구성하는 것) 최적화가 좋지 않음

 

 

🧷 Wireframe과 Mockup

 

Wireframe - 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대

Mockup - 데모 시연, 평가를 위한 최소한의 기능만 담은 모형

 

 

 

📍Router

다른 주소에 따라 다른 뷰를 보여주는 과정 "경로에 따라 변경한다"

 

 

React Router 활용

 

BrowserRouter : 라우터 역할

Routes와 Route : 경로를 매칭

Link :  경로를 변경

 

 

🔻React Router 실습

 

 

본 실습은 코드스테이츠에서 진행했습니다.

 

 

코딩부트캠프 | 코드스테이츠 - 비전공생도 개발자가 될 수 있습니다

 

Bare Minimum requirements

• Create React App 프로젝트를 생성 후, React Router(react-router-dom) 라이브러리를 설치해야 합니다.
• React Router의 주요 컴포넌트들을 이용해 주소에 따른 3가지 뷰( Home, MyPage, Dashboard )를 제공해야 합니다.
  • Home 페이지의 주소 "/"
  • MyPage 페이지의 주소 "/mypage"
  • Dashboard 페이지의 주소 "/dashboard"

 

 

1. 개발 환경 구축

 

npx create-react-app@latest simpleroute
cd simpleroute
npm start


npm install react-router-dom@^6.3.0
# 이번 스프린트에서는 6.3.0 버전을 사용합니다

 

vs code를 열리면 package.json 에서 react router dom이 잘 설치되었는지 확인 가능하다.

 

App.js

 

router를 활용하기 위해 아래 소스를 입력

 

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // 이 구문을 넣어주세요

 

2. 라우터 준비

 

컴포넌트 Home, MyPage, Dashboard

 

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

 

3. 메뉴 만들기

 

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

 

4. 주소에 따라 페이지 뷰 다르게 만들기

 

• Home 페이지의 주소 "/"
• MyPage 페이지의 주소 "/mypage"
• Dashboard 페이지의 주소 "/dashboard"

BrowerRouter

 

function App () {
  return (
    <BrowserRouter> // router를 상위에 입력
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

 

index.js(React V - 18 기준(버전에 의해 코딩이 변경되었다))

 

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

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

 

index.js(React V - 17 기준(버전에 의해 코딩이 변경되었다))

 

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

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

 

Routes, Route

 

Routes 컴포넌트는 여러 Route 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만

렌더링을 시져구는 역할 Routes 를 사용하지 않으면 매칭되는 모든 요소를 렝더링 함

 

Route 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지

정한다. 아래에서 배울 link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동

 

<Route> 태그 안에 element 속성으로 연결하고자 하는 컴포넌트를 넣어줌

 

App.js

 

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
        <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
   </BrowserRouter>
  )
}

export default App;

팁 : 만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있습니다. 이럴 때 사용할 수 있는 속성이 path=”*” 입니다. 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.

 

Link

 

경로를 연결해 주는 역할을 하는 컴포넌트

 

<a> 요소를 쓰지 않는 이유는?

<a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링 함

즉, 새로고침과 같다

 

• <Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해 줍니다.

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;

 

 

실행 시 링크에 따라 페이지가 이동합니다 😀