T.I.L React SPA, React router

SPA

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.

SPA 장점 및 단점

장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 interaction에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

단점

• SPA 경우 javascript 파일의 크다.
  그렇기때문에 이 javascript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
• 검색 엔진 최적화(SEO)가 좋지 않다.
  구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA 의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.

React Router

BrowserRouter

BrowserRouter는 HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 이다.
이는 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해주고, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 한다.
BrowserRouter는 리액트 라우터 돔을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 래퍼 컴포넌트이다.

Route

path에 따라 해당 UI를 보여주는 라우팅 기능을 가진 컴포넌트 로, path=""부분에 URL 경로를 적고, 렌더링될 컴포넌트를 자식요소로 넣어주면 된다.

<Route path="/이동할 주소">
	<출력할 컴포넌트 />
<Route/>

Switch

Switch가 감싸준 Route들 중에 Route path와 일치하는 첫 번째 컴포넌트만을 라우팅한다.
그렇기에 경로를 설정할 때

<Route path="/" exact>

처럼 path가 /인 라우트에 exact를 부여하면된다.

Link

<Link to="이동할주소">내용</Link>

Link 컴포넌트는 클릭하면 다른 주소로 이동하는 과정에서 페이지를 새로 불러오지 않고 기존의 상태를 유지한 채 History API만을 사용해서 페이지의 주소만 변경해준다. 즉 a태그와 비슷하지만 추가로 페이지 전환을 방지하는 기능이 들어있다.