Post

React Route

Posted
By Jogyejin 7 min read

라우팅 이해하기

라우팅이란 웹 서비스에있어서 페이지 이동을 수행시켜주는 기능이다 즉, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지로 이동 시켜서 보여주는 것이다
리액트의 라우팅 구현은 웹 페이지를 어디서 만드느냐에 따라 적절한 페이지를 반환하는 일련의 과정이며 서버 사이드 렌더링과, 클라이언트 사이드 렌더링으로 구분된다 리액트는 클라이언트 사이드 렌더링 방식을 채택하며 두 방식의 차이는 아래 SSR, CSR 를 이해하자


리액트 라우터 이해하기

라우팅을 위한 기능과 코드를 개발자 모두가 알 필요는 없다 리액트의 라우터라는 페이지 라우팅 전용 라이브러리를 사용하면 굳이 개발자가 구현하지 않아도 필요한 기능을 손쉽게 구현할 수 있다


리액트 라우터 설치하기

1

npm i react-router-dom

위 명령어로 설치 후 package.json 파일에서 설치된 react-router-dom의 버전을 확인하자


리액트 라우터 사용법

1. 리액트 라우터 컴포넌트로 감싸주기

/src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 리액트 라우터가 제공하는 BrowserRouter 컴포넌트를 가져온다  
import { BrowserRouter } from "react-router-dom";
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

// 위에서 가져온 BrowserRouter 컴포넌트를 최상위 부모 컴포넌트로 설정한다
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

2. 페이지 컴포넌트 만들기

여러 페이지로 구성된 리액트 앱을 리액트 라우터로 만들도록한다 그 전에 페이지 역할을 담당할 컴포넌트부터 만들어야 한다 여기서는 예제로 /src/pages/ 라는 폴더를 만든 후 컴포넌트들을 모아놨다고 과정하여 진행한다.

/src/pages/Home.js

1
2
3
4
5

const Home = () => {
    return <div>Home 페이지</div>;
};

export default Home;

/src/pages/New.js

1
2
3
4
5

const New = () => {
    return <div>New 페이지</div>;
};

export default New;

/src/pages/Diary.js

1
2
3
4
5

const Diary = () => {
    return <div>Diary 페이지</div>;
};

export default Diary;

/src/pages/Edit.js

1
2
3
4
5

const Edit = () => {
    return <div>Edit 페이지</div>;
};

export default Edit;

URL 경로에 따라 페이지를 렌더링하도록 페이지 라우팅 구현

각 페이지의 컴포넌트 구현이 되었다면 부모 컴포넌트인 App.js 에서 react-router-dom이 제공하는 Routes와 Route 컴포넌트를 이용하여 렌더링 하도록 설정한다

src/App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { Routes, Route } from "react-router-dom";
import "./App.css;
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";

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

export default App;


SPA, MPA 이해하기

SPA(Single Page Application) : 한개의 페이지를 가진 어플리케이션이다, SPA는 클라이언트 사이드 렌더링이라 부르기도하며 초기 렌더링 후 데이터만 받아오기 때문에 상대적으로 서버 요청이 적다, SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 변경되어 렌더링되어진다. 프론트 엔드와 백엔드 분리로 개발업무 분업화 및 협업이 용이하여 개발이 상대적으로 효율적이다 대부분 CSR로 렌더링하게 된다.
MPA(Multi Page Application) : 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식을 갖는다 대부분 SSR로 렌더링을 하게된다


SSR, CSR 이해하기

SSR(Server Side Rendering) : 과거나 현재에도 많은 웹사이트들은 페이지를 이동할 때마다 서버에 새로운 페이지를 요청하여 처리하는 방식인 SSR방식을 사용하고 있다 페이지 요청을 받은 서버는 렌더링을 마치고 Data가 결합된 HTML파일을 내려주는 방식으로 처리하며 SPA에 비해 서버 의존도가 높아 요청이 많은 서비스는 부하가 걸릴 수 있다
CSR(Client Side Rendering) : 최초 서버 요청시에 HTML을 비롯해 CSS, Javascript등 각종 리소스를 받아온다 이후에는 서버에 데이터만 요청하게 되고 자바스크립트로 뷰를 컨드롤하게 된다 당연히 초기 요청 때 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링은 속도는 SSR이 더 빠르다 하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.

Framework, React
React
This post is licensed under CC BY 4.0 by the author.