React SPA
- SPA(Single-Page Application) 개념
서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식
- SPA의 장, 단점
장점 : 필요한 부분만 업데이트하기 때문에 사용자의 행동에 빠르게 반응
단점 : JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어짐
검색 엔진 최적화가 좋지 않다 (SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세)
React Router
주소에 따라 다른 뷰를 보여주는 과정 - 라우팅
React Router 주요 컴포넌트
- <BrowserRouter> - router
라우터 자체의 역할 (페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줌)
-
<Switch>, <Route> - route matchers
경로를 매칭해주는 역할
<Switch>컴포넌트는 여러<Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다.<Switch>를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.<Route>컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다.<Link>컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.
-
<Link> - route changer
경로를 연결하는 역할
ReactDOM으로 렌더를 시키게 되면
<Link>컴포넌트는<a>태그로 바뀌는 모습을 볼 수 있습니다.React Router 에서 < a > 태그가 아닌 < Link >를 사용하는 이유
< a > 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다.
하지만 < Link > 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있습니다.
React Router 라이브러리 설치
npm install react-router-dom
React Router 기능 불러오기
import {BrowserRouter, Switch, Route, Link} from "react-router-dom";
(BrowserRouter, Switch, Route, Link를 불러온 상태)
