페이지 라우팅

페이지 라우팅

MPA

SSR

서버측에서 보낸것을 브라우저가 그대로 렌더링 한다고 해서 SSR(Server Side Rendering) 이라고도 부른다.

 

MPA!=SSR

서버가 여러개의 HTML 파일을 갖고 있는것이 MPA 방식, 브라우저가 페이지를 요청했을때 미리 준비된 페이지를 응답해주는 방식을 SSR이라고 한다. 서로 다른 의미이다.

 

REACT는 MPA방식을 채택하지 않는다. MPA방식은 페이지의 이동을 빠르게 처리하기 힘들기 때문이다.

MPA 단점

• 페이지 이동이 쾌적하지 않다.(요청마다 기존것을 지우고 새로운것을 리렌더링한다, => 화면이 살짝씩 깜빡인다.)
• 사용자가 많을 경우 서버부하가 심해진다.

 

때문에 REACT는 SPA(Single Page Application)을 채택한다.

SPA

SPA는 최초로 index.html 페이지 1개랑 js파일이 묶여있는 번들 js파일을 받게된다. 페이지 1개만 요청한다고 해서 SPA라고 부른다.

그 이후의 요청들을 브라우저는 번들 파일들로 화면을 직접 렌더링을 한다. 결국 클라이언트가 직접 렌더링을 처리한다는 의미로 CSR(Client Side Rendering) 이라고 부른다.

 

물론 SPA의 단점도 있다.

• 🧭 SEO 취약, JS 로딩 후 렌더링되기 때문에 검색엔진이 내용을 못 읽는 경우 많음
• 🧩 초기 로딩 속도 느림, 첫 방문 시 모든 JS를 한 번에 받기 때문에 초기 렌더링이 느림
• 🧠 메모리 부담, 화면 이동 시 DOM이 쌓여 메모리 사용량이 커짐

그렇다면 대안은? 실무에서는 어떻게 해결하지?

• 최근엔 Next.js(React용), Nuxt.js(Vue용) 같은 SSR 프레임워크를 함께 사용해서
  이 단점을 해결한다고 한다.

 

내부 링크가 필요한경우

1. 태그 보다는 Link 컴포넌트 를 이용하자.

태그는 csr로 동작하지 않아서 클릭시 화면이 깜빡거리면서 이동된다.

import './App.css'
import Home from './pages/Home'
import Diary from './pages/Diary'
import New from './pages/New'
import Notfound from './pages/Notfound'

import { Route, Routes, Link} from 'react-router-dom' //링크 사용 추가

function App() {
  return (
    <>
    <div>
      //링크 사용 
      <Link to={"/"}>Home</Link>
      <Link to={"/diary"}>Diary</Link>
      <Link to={"/new"}>New</Link>
    </div>

    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/diary' element={<Diary />} />
      <Route path='/new' element={<New />} />
      <Route path='*' element={<Notfound />} />
    </Routes>
    </>

  );
}

export default App

 

2.useNavigate 커스텀 훅을 사용한다.

특정 조건에 따라서 이동시켜야 되는경우

import './App.css'
import Home from './pages/Home'
import Diary from './pages/Diary'
import New from './pages/New'
import Notfound from './pages/Notfound'

import { Route, Routes, Link, useNavigate} from 'react-router-dom' //네비 사용 추가

function App() {
  //네비 선언
  const nav = useNavigate();
  const onClickButton = () => {
    nav("/new");
  };

  return (
    <>
    <div>
      <Link to={"/"}>Home</Link>
      <Link to={"/diary"}>Diary</Link>
      <Link to={"/new"}>New</Link>
    </div>
     //특정 조건에 의한 네비기능
    <button onClick={onClickButton}>New 페이지 이동</button>

    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/diary' element={<Diary />} />
      <Route path='/new' element={<New />} />
      <Route path='*' element={<Notfound />} />
    </Routes>
    </>

  );
}

export default App

동적 경로

URL Parameter 방법

useParams 커스텀 훅을 사용한다.

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

Diary.jsx

import { useParams } from "react-router-dom"; //params 훅 사용

const Diary  = () => {
  const params = useParams();
  console.log(params);

  return <div>Diary</div>;
};

export default Diary;

http://localhost:5173/diary/1

 

Query String 방법

useSearchParams 커스텀 훅을 사용한다.

home.jsx

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

const Home  = () => {
  const [params, setParams] = useSearchParams();
  return <div>Home</div>;
};

export default Home;

http://localhost:5173/?value=hello 요청히면

정적 파일

보통 정적 파일은 public 폴더나 src-assets 폴더에 위치한다.

assets 폴더에 위치하면 vite가 정적 파일들을 최적화한다.

import emotion1 from "./assets/emotion1.png";
import emotion2 from "./assets/emotion2.png";
import emotion3 from "./assets/emotion3.png";
import emotion4 from "./assets/emotion4.png";
import emotion5 from "./assets/emotion5.png";

function App() {
  const nav = useNavigate();

  const onClickButton = () => {
    nav("/new");
  };

  return (
    <>
    //public 폴더에서 호출 
    <div>
      <img src={"/emotion1.png"} />
      <img src={"/emotion2.png"} />
      <img src={"/emotion3.png"} />
      <img src={"/emotion4.png"} />
      <img src={"/emotion5.png"} />
    </div>
    //assets 폴더에서 호출
    <div>
      <img src={emotion1} />
      <img src={emotion2} />
      <img src={emotion3} />
      <img src={emotion4} />
      <img src={emotion5} />
    </div>

정적파일 최적화는 빌드 후 프로덕션 레벨에서 확인하게 되면 차이가 극명하게 나타난다.

$ npm run build

빌드 후 dist 파일이 생성된것을 확인 할 수 있고 index.js 파일에 우리가 작성한 react의 모든 코드들이 번들링 된것을 확인 할 수 있다.

$ npm run preview

assets 폴더에서 호출하게된다면 Data URI 처리된다. 때문에 새로고침 하더라도 네트워크상 으로 새로 요청하지 않아도 된다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMA....>

Data URI: 이미지와 같은 외부데이터를 문자열 형태로 브라우저 메모리에 캐싱하기 위한 포멧

 

public 폴더에서 호출한것들은 새로고침마다 요청되기 때문에 Data URI 방식보다는 최적화 측면에서 불리하다.

항상 메모리에 캐시하는 방식이 좋은것만은 아니다. 대용량의 데이터의 경우에는 public 폴더에서 필요할때마다 호출하는것이 유리할 때도 있다.