React Router는 단일 페이지인 React 프로젝트에서 라우팅을 구현하기 위한 라이브러리이며, 그래서 React로 App을 만들 때 필수적으로 사용해야 한다.
그런데 왜 React는 단일 페이지로 App을 렌더링하며, 라우팅이 필요한 것일까? 라우팅을 왜 신경써서 구현해야 할까?
다른 블로그나, 커뮤니티에선 '어떻게 라우팅을 구현'할지는 많이 알려주지만, 왜 필요한 것인지, 왜 신경써야 하는지는 비교적 정보가 적을 것이다. 나 또한, 아무것도 모를 때 이런 의문을 가졌기에, 오늘은 이 둘을 다뤄보고자 한다.
왜 React는 따로 Router가 필요한가?
전통적인 Web의 문제점
전통적인 Web은 페이지 이동할 때마다, URL 엔드포인트에 맞는 html과 js파일을 일일히 다운받아 보여주는 MPA(Multi Page Application) 방식이었다.
그런데, 모바일 디바이스 사용이 늘어나면서, MPA 방식의 단점이 부각되었다. 매번 서버와 요청을 주고 받으면서, 페이지 전체가 갱신되고, 트래픽도 많아져 로딩 또한 길어진다. 버튼을 누를 때마다 화면이 깜빡이고, 로딩이 발생하면 사용자 입장에서 매우 답답하고 불편할 것이다.
jQuery 등의 기술이 등장하면서, 개별 페이지에서의 조작은 비교적 자유로워졌다. 하지만 여전히 MPA 방식이었기 때문에, 페이지를 이동할 때마다 화면이 깜빡이고, 로딩이 발생하는 것은 매한가지였다.
SPA가 Web 앱의 시대를 열다.
그렇다면 매번 서버와 요청을 주고받지 말고, 처음에 모두 다운받아 보여주면 어떨까? 이 방식이 바로, react.js 같은 SPA(Single Page Application)이다.
이 방식은 초기 접속 시 로딩이 길다는 단점이 있지만, 아래와 같은 장점을 지닌다.
- 필요한 부분만 변경해, 서버와의 트래픽과 필요 자원이 감소한다.
- 페이지 전체가 아니라, 필요한 부분만 변경하므로 화면 깜빡임 없이 이동이 가능하다.
위 장점 덕분에 Web 또한 Natvie 앱 처럼 매끄러운 사용자 경험을 제공할 수 있게 되었고, 웹앱(WebApp)이 경쟁력을 가지는 계기가 되었다.
라우팅에 대해서
어떻게 라우팅을 구현할까?
앞서 말했듯이, SPA는 한 개의 html 파일을 가지고 Web을 보여주는 방식이다. 그렇다면 어떻게 한 개에 html 파일에서, 여러 페이지를 보여줄까?
정답은, 모든 페이지를 한 html 파일에 담고, URL에 맞게 페이지를 전환하면서 보여주면 된다. JavaScript로 페이지 이동, URL 변경, 방문 관리를 해 줌으로써, 사용자로 하여금 '흡사 여러 개의 페이지가 있는 것처럼' 눈속임을 해 주는 것이다.
이게 바로 Client Routing이며, 이를 react.js에 구현한 것이 React Router이다. 자세한 동작 원리는 추후 포스팅에서 다루겠다.
왜 라우팅에 신경써야 할까?
React Router를 적절히 활용하지 않으면, 앞서 말한 SPA의 장점을 활용할 수 없다.
예시로, 페이지를 이동하기 위해 React Router에서 제공하는 <Link> 말고 <a>를 쓰면 어떻게 될까? 모든 html과 js 파일을 다시 다운받고, 화면을 깜빡이며 로딩되는 SPA와 MPA의 단점을 겸비한 최악의 App이 될 것이다.
그래서 React Router를 깊게 이해하고, SPA의 이점을 살리는 라우팅을 구현해야 한다.
- 재사용되는 컴포넌트를 파악 및 최적화해, 불필요한 렌더링을 줄여야 한다.
<a>태그로 페이지 이동같이, 전체 페이지 갱신을 불러오는 실수를 피해야 한다.- 필요한 동적 데이터를 재활용해, 쓸데없는 HTTP GET 요청을 줄여야 한다.
지금 생각나는 것만 적어 봤는데, 여컨데 '좋은 라우팅'이라 함은 React의 SPA의 장점을 살리는 모든 행위가 될 것이고, '나쁜 라우팅'은 React의 SPA의 장점을 활용하지 못하고, 더욱이 단점으로 승화시키는 행위가 될 것이다.
오늘은 React Router가 왜 쓰이는지, 왜 신경써서 개발해야 하는지를 알아보았다. 개인적으로, 대부분의 Web APP은 여러 페이지를 사용하기에, SPA 개발자로써 라우팅을 구현하는 것 또한 중요한 역량이 될 것 같다.
