TIL

React SPA

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

React Router

Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요하다. 또한 화면에 따라 "주소"도 달라지는데, 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다. React자체에는 내장되지 않은 기능이기 때문에 직접 주소마다 다른 뷰를 보여줘야 한다. 그래서 React SPA에서는 라우팅을 위해 React Router를 사용하게 된다.
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link 가 있다.
라우터를 사용하기 위해서 먼저 설치를 하여야 한다.
컴포넌트를 꺼내기 위한 import구문을 작성하여야 한다.

라우터 사용 예제)
BrowserRouter
BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.

Switch, Route
경로를 매칭해주는 역할을 하는 컴포넌트이다.

• <Switch> 컴포넌트는 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

Link
경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 준다. ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 태그로 바뀌게 된다.

React Router에서 <a>태그말고 <Link>를 사용하는 이유는?
<a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. 즉, 새로고침 현상이 일어나게 되는 것이다. 하지만, <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있다.

React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여줍니다. exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을 합니다.

Tomorrow