Unit5 - [React] React SPA

업데이트에 필요한 데이터만 받아 JavaScript가 이 데이터를 조작하여 HTML요소를 생성하여 화면에 보여주는 방식이 개발

 

SPA(Single-Page Application)

화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

 

SPA 장,단점

장점 : 사용자와의 행동에 빠르게 반응

서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어둠

전체 페이지를 렌더링 할 필요가 없기 때문에 나은 사용자 경험 제공

 

단점 : JavaScript 파일의 크기가 크기 때문에 기다리는 시간으로 인해 첫화면 로딩시간이 길어진다.

검색엔진 최적화가 좋지 않다.

검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석한다.

SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.

 

Wireframe

Wireframe : 웹페이지 레이아웃과 UI 요소 등에 대한 뼈대(Mockup : 데모 시연, 평가를 위한 최소한의 기능을 담은  모형(직관적으로 이해학 쉽게 디자인)

 

React Router 

React Router를 이용해 React SPA개발 방법

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)

xx.com/

xx.com/signup

xx.com/mypage

라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.

 

React Router 주요 컴포넌트

BrowserRouter(라우터 역할) - History API를 사용하여 UI를 URL과 동기화된 상태를 유지하는 역할

Routes와 Route(경로 매칭)  - Routes :Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링하는 역할

                                                Route : 경로지겅

Link(경로 변경) - 사용자를 원하는 경로로 이동시켜주는 역할

 

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용

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

 

npx create-react-app routemake //routemake 폴더에 React App 설치

cd routemake

npm install react-router-dom@^6.3.0 //react-router 라이브러리 설치

 

실습

1.개발환경

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

2. 라우터 준비

페이지 표시하는 컴포넌트

 

function signup() {

    return <h1>signup</h1>

}

 

function Login(){

  return <h1>Login</h1>

}

 

3. 메뉴 준비

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              signup
            </li>
            <li>
              Login
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

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

App.js 에 라우팅을 하기 위한 React Router의 주요 컴포넌트를 세팅

3개의 컴포넌트를 주소에 따라 다르게 만든다(주소에 따른 다른페이지 구현)

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              signup
            </li>
            <li>
             Login
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

index.js (React Version 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>
);   

Routes,Route

<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할

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

<Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동

 

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              signup
            </li>
            <li>
              Login
            </li>
          </ul>
        </nav>

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

export default App;

Link

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

애플리케이션을 그대로 유지,HTML5 History API를 이용해 페이지의 주소만 변경

ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀌게 된다.

<a> 요소는 새로고침 현상이 일어난다.

하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장-> SPA를 구현할수 있다.

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">signup</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">Login</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<signup />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/Login" element={<Login />} /> 
        </Routes>
      </div>
    </BrowserRouter>
  );
}

npm run start로 실행

 

css에서 <router-link>태그에서 밑줄을 없애고 싶었다.

Link{

 text-decoration:none;

}을 했더니 적용이 되지 않았다.

HTML에서는 <router-link> 라는 태그를 <a> 태그로 인식한다는 것을 알게 되었다.

a{

 text-decoration:none;

}을 했더니 적용이 되었다.

 

app.js

/*import logo from './logo.svg';*/
import './App.css';

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

/*function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}*/

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>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <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;

app.css

.App {
  text-align: center;
}

ul{
  list-style-type : none;
  display:flex;
  justify-content: space-between;
  margin:20px;
  padding: 20px;
  
}
li{
  border: 20px;
  margin: 10px;
  padding:50px;
  border: 1px solid;
  background-color: antiquewhite;
}

a{
  text-decoration:none;
  font-size: 30px;
}
h1{
  text-align:center;
  font-size: 50px;
}

결과