페이지 라우팅

12.2) 페이지 라우팅 1. 소개

 

 

 

 

 

 

서버가 사용자들에게 제공할 여러 개의 페이지를 미리 가지고 있는 이러한 방식을 여러 개의 페이지를 갖는 어플리케이션이다라는 뜻에서 멀티 페이지 애플리케이션(MPA)라고 부른다.

 

MPA방식에서 브라우저가 새로운 페이지를 요청했을 때 서버에서 미리 완성해놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 서버 측에서 페이지를 미리 렌더링 해준다라고 해서 서버 사이드 렌더링이라고 부른다.

 

💡 MPA vs. 서버 사이드 렌더링

오른쪽처럼 서버가 여러 개의 HTML페이지를 가지고 있는걸 MPA 방식이라고 부른다.

이러한 MPA방식에서 브라우저가 페이지를 요청했을 때 가운데 있는 것처럼 미리 완성되어 있는 페이지를 응답해주는 방식을 서버 사이드 렌더링이라고 부른다.

 

 

 

 

근데 React는 이 방식을 따르지 않음.

 

 

단점 1) 페이지 이동이 쾌적하지 못하다

페이지를 이동할 때마다 새로운 페이지를 받아와서 화면을 처음부터 다시 렌더링 해준다.

그렇기 때문에 이러한 과정에서 페이지가 마치 새로고침되는 것처럼 한번 깜빡이게 된다.

=> 페이지 이동이 매끄럽지 않다.

 

단점 2) 서버의 부하가 심해진다.

모든 사용자들이 페이지를 이동할 때마다 이런식으로 일일이 서버에게 새로운 페이지를 달라는 요청을 보내게 된다.

그러면 서버는 들어오는 모든 요청들을 하나하나 처리해줘야 하기 때문에, 동시에 많은 사용자가 페이지에 접속할 경우 서버가 겪는 부하가 매우 심해진다.

=> 다수의 사용자 접속 시, 서버의 부하가 심해진다.

 

 

 

그래서 Reac는 SPA를 사용한다.

 

 

html.j는 빈껍데기 역할이다. 아무 것도 렌더링하고 있지 않고 main.js라는 리액트 코드만 가동시키는 역할만 수행한다. 

 

 

 

 

 

 

 

 

 

 

브라우저에서 직접 자바스크립트 파일을 실행해서 화면을 직접 렌더링하도록 하는 방식

클라이언트 측인 브라우저에서 직접렌더링을 처리한다는 뜻에서 클라이언트 사이드 렌더링이라고 부른다.

 

 

이 Bundle JS File은 직접 작성한 모든 리액트 컴포넌트들이 하나의 파일로 묶여있는 자바스크립트 파일이기 때문에 사실상 리액트 앱이라고 부를 수 있다.( Bundle JS File = React App)

 

 

 

 

 

 

 

결론

React로 개발된 웹사이트를 들어가 보면 페이지를 아무리 이동하더라고 새로고침이나 깜빡임이 발생하지 않고 빠른 속도로 페이지가 이동하는 것을 볼 수 있다.

그럴 수 있는 이유는 리액트는 SPA방식으로 작동하기 때문이다.

 

 

---

12.~   

2.라우팅 설정하기

3.페이지 이동

4.동적 경로

5.폰트,이미지, 레이아웃 설정하기

 

import { Link, Route, Routes, useNavigate } from "react-router-dom";
import "./App.css";
import Diary from "./pages/Diary";
import Home from "./pages/Home";
import New from "./pages/New";
import NotFound from "./pages/Notfound";
// 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";
import { getEmotionImage } from "./util/get-emotion-image";
import Button from "./components/Button";

// 1. "/" : 모든 일기를 조회하는 Home 페이지
// 2. "/new" : 새로운 일기를 작성하는 New 페이지
// 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지
function App() {
  const nav = useNavigate();

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

  return (
    <>
      {/* 이미지 불러오기 */}
      {/* #방법1 이미지 불러오기 : assets에 이미지 파일 넣어뒀을 경우 */}
      <Button />
      <div>
        <img src={getEmotionImage(1)}></img>
        <img src={getEmotionImage(2)}></img>
        <img src={getEmotionImage(3)}></img>
        <img src={getEmotionImage(4)}></img>
        <img src={getEmotionImage(5)}></img>
      </div>

      {/* #방법2 이미지 불러오기: public에 이미지 파일 넣어뒀을 경우 */}
      <div>{/* <img src={"/emotion1.png"}></img> */}</div>

      {/* 페이지 이동 */}
      {/* #방법1 페이지 이동 */}
      <Link to={"/"}>Home</Link>
      <Link to={"/new"}>New</Link>
      <Link to={"/diary"}>Diary</Link>
      
      {/* #방법2 페이지 이동*/}
      {/* a태그를 이동할때 새로 렌더링?됨 */}
      {/* <a href="/">Home</a>  */}

      {/* #방법3  페이지 이동*/}
      <button onClick={onClickButton}>New 페이지로 이동</button>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="diary/:id" element={<Diary />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
}

export default App;