react-router를 통해서 리액트 싱글 페이지 애플리케이션을 만들 것이다.
싱글 페이지 어플리케이션(SPA)
페이지가 1개인 어플리케이션이다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있다. 유저가 요청할 때마다 페이지가 새로고침되며, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석후 렌더링을 한다. 웹에서 제공되는 정보가 많을수록, 속도적인 문제가 발생하고, 해결 방안으로 캐싱과 압축을 해서 서비스가 제공된다고는 하지만, 사용자와 인터랙션이 많은 웹에서는 충분하지 않을 수도 있다. 렌더링을 서버측에서 담당하는 것부터가 그만큼의 서버자원이 손실되는 것이다.
그래서!
리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하게 하고, 우선 어플리케이션을 브라우저에 로드한 다음에 정말 필요한 데이터만 전달받아 보여준다. 다른 주소에 따라서 다른 뷰를 보여주는 것을 라우팅이라고 한다. 공교롭게도 리액트에는 해당 기능이 내장되어있지 않아서 직접 브라우저의 API를 사용하고 상태를 설정해서 다른 뷰를 보여줘야한다.react-router는 써드파티 라이브버리로 가장많이 사용되고 있는 라이브러리이다. 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.
그럼 SPA의 단점은 뭘까?
- 앱의 규모가 커지면, 파일의 사이즈가 너무 커진다.
유저가 방문하지 않은 페이지에 대한 렌더링 관련 스크립트도 불러오기 때문. 해결방안으로 Code Splitting을 사용한다면 라우트별로 파일들을 나눠서 트래픽과 로딩속도를 개선할 수 있다.
react-router 처럼 브라우저 측에서 자바스크립트를 사용하여 라우트를 관리하는 것의 단점은, 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못한다는 것이다.
자바스크립트가 실행될 때까지는 흰 페이지가 나타난다는 단점또한 있지만, 서버 사이드 렌더링을 통해서 해결할수 있다.
리액트 라우터에 사용되는 주요 컴포넌트
- BroserRouter: HTML5 History API사용해서 브라우저의 주소표시줄에 나타나는 경로를 변경한다. 서버측에 새로운 요청하지 않고 브라우저 측에서 주소를 변경한다. 주소만 바꾸고 페이지는 다시 불러오지 않는다.
-
HashRouter : 주소 뒤에 #를 사용하는 컴포넌트이다 ex) example.com/#/path/to/route
#를 사용함. 못생김, 구버전의 브라우저 전용이다. -
StaticRouter : 서버사이드 렌더링에서 사용하는 용도
-
Route : 라우터를 정의할때 쓰는 컴포넌트
-
Link : 사용한 Router의 주소를 바꿈. a 태그지만 새로고침안됨
실습
프로젝트를 새로 만들고
yarn add react-router-dom을 입력해서 react-router를 설치한뒤 index.js에서 BrowserRouter를 import 하고 렌더링 내용을 수정한다.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
새로운 라우터를 작성해보자.
Home.js 와 About.js를 각각 작성한다.
import React from "react";
function Home() {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보이는 페이지입니다.</p>
</div>
);
}
export default Home;import React from "react";
function About() {
return (
<div>
<h1>소개</h1>
<p>이 프로젝트는 리액트 라우터 기초를 실습하는 예제입니다.</p>
</div>
);
}
export default About;이제 App.js로 돌아가서 Route 라는 컴퍼넌트를 불러온다. Route는 "특정 주소에 특정 컴퍼넌트를 보여주겠다"라는 뜻으로 사용된다.
이전에 작성한 Home과 About을 불러와서 렌더링 내용을 수정한다.
import React from "react";
import {Route} from 'react-router-dom';
import Home from "./Home";
import About from "./About";
function App() {
return (
<div>
<Route path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
</div>
);
}
export default App;
현재 위와 같이 작성을 해도 렌더링 되지 않고 오류가 생길것이다.
첫번째로 Route들을 Routes 안으로 감싸지 않았기 때문이고,
두번째 이유는 react-router가 업데이트 되어서 <Route>의 매개변수의 이름이 변경되었다.
따라서 위의 두가지 이유를 바탕으로 오류없이 동작하게 하려면
import React from "react";
import {Route, Routes} from 'react-router-dom';
import Home from "./Home";
import About from "./About";
function App() {
return (
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
</Routes>
);
}
export default App;이렇게 작성하던지, react-router 의 버전을 5.3 버전으로 변경한다.
그럼 이제 Link 컴포넌트를 사용해보자.
Link 컴포넌트는 특정 링크를 클릭했을 때 다른 경로로 이동하게 해주는 역할을 한다. "엥? 그럼 a태그 쓰면 되는거 아닌감?" 이라고 생각할 수 있지만, a태그로 작성을 한 링크를 클릭하면 새로운 페이지가 로딩되어 버린다. 만약 App은 그대로 유지하고 주소만 변경하고 그에대한 렌더링만 되게끔 하고 싶다면, Link컴포넌트를 사용하면 된다.
function App() {
return (
<>
<ul>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to='/about'>소개</Link>
</li>
</ul>
<hr/>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
</Routes>
</>
);
}
