[클라우딩 어플리케이션 엔지니어링 TIL] - 9주차 React

React SPA & CSR

Routing: 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정

Page Routing: 브라우저가 웹 서버에 경로의 요청을 보내고 웹 문서를 받아오는 과정

Multipage Application(MPA): 여러 페이지를 이동할때마다 원하는 페이지 요청을 보내고 웹 서버가 응답하면 브라우저가 새로고침 되면서 화면이 깜빡임.

Singlepage Application(SPA): 새로운 페이지를 요청해도 index.html만 반환하는 서비스

 

Client Side Rendering(CSR): 클라이언트(브라우저)가 알아서 직접 랜더링 하는 것.

CSR은 새로운 페이지로 이동할 때 서버와 통신하지 않고 스스로 화면을 업데이트 하기 때문에 서버와의 통신 대기시간이 사라져 굉장히 빠른 페이지 이동시간을 가지며 서버의 데이터가 필요한 경우에만 요청.

 

React는 SPA방식으로 화면을 구성하고 페이지 이동시 CSR 기법을 활용해 페이지를 렌더링하기에 페이지 이동할 때 새로고침할 때 발생하는 깜빡임 없이 빠르게 페이지 이동이 가능

React Router

React Router를 통해 CSR 구현

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

import Home from './pages/Home';
import New from './pages/New'
import Edit from './pages/edit';
import Diary from './pages/Diary';
import RouteTest from './componenets/RouteTest';

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

export default App;

• 라우팅 기능을 사용하려면 <BrowerRouter> 컴포넌트로 브라우저 URL과 react app을 연결, BrowerRouter 감싼 부분은 브라우저 URL과 매핑 됨. 앱에서 단 하나의 라우터만 사용해야 함.
• 브라우저 URL이 바뀌게 되면 어떤 컴포넌트를 렌더링할지 결정하는 <Routes>로 렌더링할 위치를 명시
• <Route> 컴포넌트로 path를 통해 실질적으로 URL 경로와 컴포넌트를 매핑
• 페이지를 이동할 때 <a> 태그를 통해서 페이지를 갱신하는게 아니라 <Link> 컴포넌트를 통해 CSR 방식으로 페이지 이동

React Router Dom의 기능으로 URL 제어

1. Path Varialbe

리액트 라우터에서 콜론(:)과 useParams hook을 통해 URL 파라미터를 받을 수 있음.

<Route path='/diary/:id' element={<Diary />} />

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

const Diary = () => {

  const {id} = useParams();

  return (
    <div>
      <h2>{`${id}Diary`}</h2>
    </div>
  );
}

export default Diary;

 

2. Query String

URL을 통해 웹 페이지에 데이터를 전송하는 방식, <Link>에 따로 명시하지 않아도 사용 가능

ex) /edit?id=10&mode=dark

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

const Edit = () => {

  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const mode = searchParams.get("mode")

  return (
    <div>
      <h2>Edit</h2>
      <p>{`id: ${id} mode: ${mode}`}</p>
    </div>
  );
}

export default Edit;

 

3. Page Moving

useNavigate()는 페이지를 이동 시킬 수 있는 함수를 반환함.

그 함수의 인자로 경로를 작성해주면 함수가 호출될 때 해당 경로로 이동 가능

useNavigete는 로그인 안된 사용자가 다른 페이지를 이용하려고 할 때 로그인 페이지로 이동시키는 기능을 구현할 때 사용

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

const Edit = () => {
  const navigate = useNavigate();
  //...
  return (
    <div>
      /...
      <button onClick={() => {
        navigate("/home");
      }}
      >Home으로 가기</button>
      <button onClick={() => {
        navigate(-1);
      }}
      >뒤로가기</button>
    </div>
  );
}

export default Edit;