[React] 리액트의 라우팅과 SPA(Single Page Application)

# SPA(Single Page Application)

• SPA 가 아닌 Application 은 Client인 Browser 에서 서버에 지속적으로 요청하여 새로운 리소스들을 불러옴
• SPA 는 필요한 리소스들을 초기에 한번에 불러오고 난 후, 라우팅등이 발생하면 Client(Browser) 단에서 동적으로 페이지를 작성하여 서버의 부하를 줄여주며, 서버로 부터 리소스를 받는 작업들을 줄이기 때문에 페이지의 반응도 빨라짐. 
• SPA 에서는 Form 태그를 지양

---

# 라우팅 (Routing)

 • react-router-dom 을 이용하여 라우팅을 한다. (create-react-app 에 내장된 패키지가 아님, 따라서 설치 필요)

 • Facebook 공식 패키지는 아니나, 가장 대표적인 리액트 라우팅 패키지. 

 

 # 설치

 - cra(create-react-app)으로 생성된 프로젝트 디렉토리에서 해당 커멘드를 입력

npx i react-router-dom

 

 # 사용법

  • <BrowserRouter> 또는 <HashRouter> 로 감싼 영역안에 <Route /> 컴포넌트를 생성

 

# BrowserRouter 

 • HTML5의 history API를 사용하여 UI를 업데이트하는 라우터

 • 동적 페이지에 적합 (서버의 데이터를 스크립트로 가공시킨 후, 생성되는 페이지)

 • 페이지의 유무를 서버에 알려주는 등 추가적인 세팅이 필요함 (검색엔진 커스터마이징 가능, 접근권한 설정등)

 * 배포가 HashRouter 보다 복잡하나 HashRouter보다 다양한 기능을 제공

 * 따라서 현업에서는 BroswerRouter를 사용하는 것이 좋다.

 

# HashRouter

 • URL의 # 를 활용한 라우터

 • 정적 페이지에 적합

 • #값 때문에 서버가 읽지 못하고 서버가 페이지의 유무를 알지 못한다. (검색엔진 사용불가)

 * 배포가 매우매우 쉽다. 포트폴리오용으로 작성하기 좋다.

---