[클라우딩 어플리케이션 엔지니어링 TIL] 240213 - React 실전 프로젝트 1

Intro

---

오늘은 SPA 프로젝트에 들어가기에 앞서, 리액트의 중요한 특징과 React Router 라이브러리에 대해 공부했다.

설 연휴가 끝나고 다음날이라 그런지.. 공부 집중도가 떨어졌다. 강의가 길지 않아 다행이었다...

 

 

 

오늘 학습한 내용

: React SPA & CSR, React Router

---

Page Routing

💬 Routing이란?
어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
- 위키백과

 

• Router

데이터의 경로를 실시간으로 지정해주는 역할을 하는 것

 

• Route + ing

경로를 정해주는 행위 자체와 그런 과정들을 모두 포함하여 일컫는 말

 

• Page Routing

웹 서버가 경로에 따라 알맞은 페이지를 선택하고 해당 페이지를 반환해서 사용자가 페이지에 접속하는 과정

 

 

 

 

MPA(Multi Page Application) & SPA(Single Page Application)

• MPA (Multi Page Application)
  • 여러 페이지를 준비해 두고 요청이 들어오면 서버에서 적절한 페이지를 보여주는 방식
  • 페이지가 새로고침되면서 페이지가 이동하게 된다.
  • SPA보다 규모가 크고 복잡하다.
  • SEO에 유리하다.

• SPA (Single Page Application)
  
  • 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번 다운로드하여 렌더링하고, 이후 새로운 페이지에 대한 요청이 있을 때 변화가 필요한 데이터만을 내려받아 리렌더링하는 방식
  • 다수의 페이지를 마치 하나의 페이지인 것처럼 처리한다.
  • 페이지를 이동할 때 깜빡이지 않는다.
  • React는 Single Page Application이다.

 

CSR (Client Side Rendering)

서버에서 응답을 받아오는 방식이 아닌 클라이언트 환경(리액트 앱)에서 페이지를 업데이트하는 방식

서버의 통신이 필요 없어 페이지 이동 속도가 빠르다.

 

 

✅ React는 SPA이면서 CSR로 페이지를 렌더링한다.

 

 

 

React Router

: React의 CSR을 구현하기 위해 사용되는 라우팅 관련 라이브러리

Home v6.22.0 | React Router

 

• 설치 (원하는 버전으로 설치하기 위해 @v버전을 입력)

npm install react-router-dom@v6

 

• 사용 방법

App.js

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import RouteTest from './components/RouteTest';

import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

 

: <Routes> 태그로 감싼 부분들이 페이지가 업데이트 되는 부분이다. Route 태그로 path가 바뀌었을 때 표시되는 페이지를 설정할 수 있다.

 

RouteTest.js

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

const RouteTest = () => {
  return (
    <>
      <Link to={'/'}>HOME</Link>
      <br />
      <Link to={'/diary'}>DIARY</Link>
      <br />
      <Link to={'/new'}>NEW</Link>
      <br />
      <Link to={'/edit'}>EDIT</Link>
    </>
  );
};

export default RouteTest;

 

: 페이지를 새로고침하여 불러오는 a태그를 사용하지 않고 React Router의 Link 컴포넌트를 사용하여 라우팅한다.

 

 

 

 

마무리

---

오늘은 크게 어려운 내용은 없었다. 이번 프로젝트 실습도 열심히 따라 해봐야지!!