Diiiiiikey

Blog

SPA(Single Page Application)

서버로부터 페이지 갱신에 필요한 데이터만 받아 현재의 페이지를 업데이트 하는 방식

장점

  1. 필요한 데이터만 받아 화면을 업데이트 하기 때문에 사용자와 interaction에 빠르게 반응
  2. 서버는 요청 받은 데이터만 전달하면 되기 때문에 서버 과부하 문제 저하
  3. 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저경험 제공

단점

  1. JS파일 크기가 크기 때문에 첫 로딩이 길어진다.

  2. 검색엔진최적화(SEO)가 좋지 않다. 보통 검색포털사이트는 HTML 자료를 분석하는 방식으로 구동하기 때문이다.

Wireframe

선을 이용해 윤곽선을 잡는 것

React Router(라이브러리)

SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지는 않는다.

따라서 주소도 달라지며 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅(Routing)이라고 한다.

주요 컴포넌트

  1. BrowserRouter - 라우터 역할
  2. Routes, Route - 경로 매칭
  3. Link - 경로 변경

위 컴포넌트를 사용하기 위해서 라이브러리에서 따로 불러와야한다

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

import는 비구조화 할당과 비슷하게 이용, 필요한 모듈을 불러오는 역할

설치

  1. npx create-react-app 이름 - React App 설치
  2. npm install react-router-dom@^6.3.0 - router 설치

react-router 컴포넌트 꺼내오기

import React from "react";
import { BrowerRouter, Routes, Route, Link } from "react-router-dom";

export default function App(){
    return (...)
}

path=”*” 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여줌

ReactDOM으로 렌더를 시키게 되면 Link 컴포넌트는 a 요소로 바뀜

Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA 구현가능

a요소인 경우 새로고침을 포함

export defalt에 대해 찾아보자

댓글남기기

참고