코드스테이츠 소프트웨어엔지지어링 부트캠프 +25일

SPA (Single Page Application)

필요한 부분만 서버에서 전달받아 업데이트 하고 중복되는 부분은 냅둔다. 전통적인 방식은 전체를 새로 로딩하기 때문에 불필요한 트래픽이 발생한다. JS크기가 크기때문에 첫 로딩시간이 길다.

구글 네이버등 검색엔진은 HTML을 분석하여 검색기능을 구동하는데 SPA의 경우 HTML이 가볍기 때문에 SEO가 좋지 않다. 하지만 이러한 단점은 사라지는 추세이다.

라우팅(Routing)

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

메신저의 경우 홈, 메시지창, 프로필 등 한 화면에서 여러종류의 작은 화면들이 필요하다.

코드스테이츠 학습자료

또한 이 화면에 따라 '주소' 도 달라질 것이다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경한다. 라는 의미로 라우팅(Routing)이라고 한다. React에 내장되어 있지 않기 때문에 직접 주소마다 다른 뷰를 보여주어야 한다.

이때 사용하는 라이브러리를 React Router라고 한다.

React Router

코드스테이츠 자료

리액트 라우터의 주요 컴퍼넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch와 Route, 그리고 경로를 변경하는 역할을 하는 Link이다. 이 컴퍼넌트들은 React Router 라이브러리에서 다음 명령어를 통해 따로 불러올 수 있다.

import { BrowserRouter, Switch, Route, Link} from 'react-router-dom';

1. react-router 라이브러리 설치

// A폴더에 React App 설치

$ npx create-react-app (폴더이름A)

$ cd (폴더이름)

// react-router 라이브러리 설치

$ npm install react-router-dom

2. App.js 로 react-router 컴포넌트 꺼내오기

import React from 'react'
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

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