SPA 와 react-router [1]

---

React Router with Velopert - 01 -

• SPA
  • SPA 란?
  • non-SPA
  • SPA 장점
  • SPA 단점
  • 주로 사용되는 리액트 라우터 라이브러리
    • 리액트 라우터 react-router
    • next
• 리액트 라우터 react-router
  • BrowserRouter
  • HashRouter
  • MemoryRouter
  • StaticRouter
  • Route
  • Link

---

Chap 1. SPA 와 react-router

SPA

SPA 란?

Single Page Application의 html 페이지가 1개인것을 의미한다. (화면이 한개라는 의미는 아니다.)

SPA에서는 라우팅을 클라이언트가 담당한다.

여기서 라우팅은 어떤 주소에 어떤 UI를 보여줄지 에 규칙을 정하는 작업이다.

non-SPA

non-SPA에서는 서버에서 라우팅 작업을 담당했다.

non-SPA, 즉 정통적인 웹 어플리케이션은 특정 데이터의 처리에 대한 응답을 하기 위해서 반드시 html 페이지를 반환해야 되기 때문에 자연스럽게 웹페이지가 많아지게 되었고, 새로고침을 지속적으로 일으켜야만 했다.

이러한 서버측의 처리는 서버자원을 많이 소비하게 되었고, 불필요한 트래픽도 낭비하게 되었다.

SPA 장점

SPA에서는 어떤 주소에서 어떤 UI를 보여줄지는 클라이언트가 담당한다.

서버는 그저 클라이언트가 선택한 페이지에 필요한 데이터만 응답해주면 되기 떄문에, 서버쪽은 서버자원을 많이 아끼고 사용자는 UX가 향상될 수 있다.

SPA 단점

1. 앱의 규모가 커지면 JS파일의 크기가 커질 수 있다. (Code Splitting 으로 해결가능)

   Code Splitting : 각 기능별로 파일을 나누어놓고 필요한 시점에 해당 파일을 불러올 수 있다.

2. 브라우저에서 JS가 구동되지 않으면 UI를 볼 수 없다. -> 검색엔진에서 크롤링이 불가능해진다.( Server Side Rendering으로 해결 )

주로 사용되는 리액트 라우터 라이브러리

1. react-router
2. next

리액트 라우터

컴포넌트 기반 라우팅

라우터 컴포넌트를 만들고 라우터 컴포넌트의 props에 컴포넌트를 렌더링하는 방식

next

서버 사이드 렌더링을 쉽게 구현 가능하다.

파일 경로, 이름을 기반으로 라우팅을 한다.

리액트 라우터 react-router

써드 파티 라이브러리, 라우팅으로 가장 많이 사용되고 있는 라이브러리.

클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.

주요 컴포넌트 : <BrowserRouter> , <HashRouter>, <MemoryRouter>, <StaticRouter>, <Route>, <Link>

1. BrowserRouter

가장 많이 사용되는 컴포넌트.

HTML5에는 History API라는 것이 있다.

위 API는 브라우저의 주소표시줄에 나타나는 경로를 바꿀 수 있다.

여기서, 주소만 바꾸는 것이고 서버에 요청을 하지않는다. 즉, 페이지를 새로 로드하지는 않는다.

2. HashRouter

엣날에 자주 쓰이던 라우팅 방식.

주소 뒤에 # 태그를 넣는 방법을 이용한다. ( example.com/#/path/to/route )

엣날 브라우저에서도 작동하는 장점이 있다. (BrowserRouter는 IE 6 ~ 9 에서 사용 할 수 없다.)

3. MemoryRouter

브라우저의 주소와는 전혀 관계가 없다.

브라우저가 아닌 환경에 사용하기 좋다.

테스트 환경, 임베디드 웹앱 ( 웹 어플리케이션이 전부 리액트가 아니라 일부분만 리액트 일 경우 ), 리액트 네이티브에서 사용한다.

4. StaticRouter

서버 사이드 렌더링에 이용

5. Route

라우트를 정의할 때 사용하는 컴포넌트.

어떤 경로로 들어왔을 때, 어떤 컴포넌트를 보여줄것인지 설정할 수 있다.(path)

6. Link

a 태그로 구성되어 있다.

하지만 Router의 주소만 바꿔줄 뿐, 새로고침 하지는 않는다.