Single Page Aplication

업데이트에 필요한 데이터만 받아와서 Javascript가 조작하는 데이터로 html을 생성하고 화면에 렌더링히는 방식입니다.

SPA가 등장한 이유

기존 HTML과 CSS, JavaScript를 활용한 페이지들은 페이지가 전환될 때 매번 페이지 전체를 요청하는 단계를 밟았는데 이러한 요청은 매번 새로고침을 유발하고 페이지가 많아질수록 로드가 오래걸리는 단점이 있었습니다. 이러한 단점을 개선하기 위해 React 라이브러리입니다.

SPA의 장점

필요한 부분의 데이터를 받아 화면에 업데이트하기 때문에 사용자와의 인터렉션에 빠르게 반응

서버는 요청받은 데이터만 넘기기 때문에 낮은 과부화

전체 페이지를 렌더링하지 않기 때문에 더 나은 유저경험을 제공

SPA의 단점

자바스크립트 파일의 양이 방대할 경우 브라우저 리딩 속도 저하

HTML에 참조할 정보가 상대적으로 부족하여 검색앤진 상위 노출이 어려운 현상

-> 검색엔진이 SPA를 인식하는 방향으로 발전되며 개선 중

REACT Router

React Router은 3rd party Library 입니다.

#### 3rd party Library

개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리

이 기능을 구현하기 위해선 React Router이라는 라이브러리가 필요합니다

CLI: npm install react-router-dom@6.3.0

React Router의 주요 컴포넌트

import {BrowserRouter,Routes,Route,Link} from “react-router-dom”;

import는 필요한 모듈을 불러오는 역할로 비구조화 할당(구조분해)와 비슷하게 이용할 수 있음

router

{
  "object": "block",
  "id": "86016c87-602d-421a-ae63-e989b7e09540",
  "parent": {
    "type": "block_id",
    "block_id": "f3d96e79-2f85-4fad-a697-3107a9c81d2b"
  },
  "created_time": "2026-07-01T14:43:00.000Z",
  "last_edited_time": "2026-07-01T14:43:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "<BrowserRouter>",
          "link": {
            "url": "https://v5.reactrouter.com/web/api/BrowserRouter"
          }
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": true,
          "color": "default"
        },
        "plain_text": "<BrowserRouter>",
        "href": "https://v5.reactrouter.com/web/api/BrowserRouter"
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}

웹 애플리케이션에 HTML5의 History API를 사용하여 UI를 URL과 동기화된 상태를 유지시킵니다.

route matchers

라우터의 경로를 매칭하는 역할

{
  "object": "block",
  "id": "31288006-6c99-4ddc-84bb-f5f0bc807960",
  "parent": {
    "type": "block_id",
    "block_id": "558a73de-37b4-4c91-879e-3812a646fc85"
  },
  "created_time": "2026-07-01T14:43:00.000Z",
  "last_edited_time": "2026-07-01T14:43:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "<Routes>",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": true,
          "color": "default"
        },
        "plain_text": "<Routes>",
        "href": null
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}

Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링합니다.

{
  "object": "block",
  "id": "2b90bdbc-74c7-4cc7-a85b-50f1b2b1b5f3",
  "parent": {
    "type": "block_id",
    "block_id": "ecd4ddaa-8a8e-40de-a587-cec2e88949d8"
  },
  "created_time": "2026-07-01T14:43:00.000Z",
  "last_edited_time": "2026-07-01T14:43:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "<Route>",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": true,
          "color": "default"
        },
        "plain_text": "<Route>",
        "href": null
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}

각각의 컴포넌트의 경로를 지정해주는 역할입니다.

route changers

사용자가 원하는 경로를 이동하는 역할

{
  "object": "block",
  "id": "0f76af3a-b294-4476-9360-02bf2ad85573",
  "parent": {
    "type": "block_id",
    "block_id": "e4c633c7-44d2-453f-bb3c-3d13d84e8263"
  },
  "created_time": "2026-07-01T14:43:00.000Z",
  "last_edited_time": "2026-07-01T14:43:00.000Z",
  "created_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "last_edited_by": {
    "object": "user",
    "id": "2ecd872b-594c-81f7-92e3-000210a8d473"
  },
  "has_children": false,
  "in_trash": false,
  "type": "heading_4",
  "heading_4": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "<Link>",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": true,
          "color": "default"
        },
        "plain_text": "<Link>",
        "href": null
      }
    ],
    "is_toggleable": false,
    "color": "default"
  },
  "archived": false
}