049. React - 페이지 라우팅 - 소개

page-routing의 개념

Single Page Application을 만드는 React.js는 정말로 하나의 페이지만 갖고 있는 것이 아니라 여러 html을 작성하더라도 마치 하나로 합쳐진 듯 보여주는 사용성을 보여주는 라이브러리일 뿐이고 실제로는 하나의 웹 사이트나 애플리케이션에 여러 개의 페이지가 존재한다.

이 페이지들을 html의 <a> 태그처럼 하나로 이어주는 역할을 page-routing이라 한다.

server는 웹 사이트를 구성하는 여러 개의 html 페이지를 갖고 있다가 서버 사이드 렌더링 방식으로 사용자가 요청한 페이지를 띄워준다.

서버 사이드 렌더링은 서버에서 자바스크립트 등 웹 페이지를 구성하는 모든 요소를 직접 렌더링 한 뒤 사용자에게 화면을 넘겨주는 방식이고, 반대 방식으로는 클라이언트 사이드 렌더링이라는 개념이 있는데 클라이언트 사이드 렌더링은 사용자가 웹 브라우저에서 직접 모든 요소를 렌더링 하는 방식이다.

각자의 장단이 있다. 클라이언트 사이드 렌더링은 초기 로딩 속도는 느리지만 데이터가 사용자에게 있기 때문에 이후부터는 신속하게 이용할 수 있다는 특징이 있고 서버 사이드 렌더링은 초기 로딩 속도가 빠르지만 클라이언트 사이드 렌더링에 비해 페이지 이동 속도가 느리고, 서버에서 모든 렌더링을 처리하기 때문에 서버에 부하가 걸리기 쉽다는 특징이 있다.

React.js는?

리액트는 여러 개의 페이지를 서버가 갖고 있다가 클라이언트가 요청했을 때 필요한 웹 페이지를 전달해주는 방식인 멀티 페이지 어플리케이션 방식이 아니라 싱글 페이지 어플리케이션 방식을 채택한다.

리액트로 개발된 웹 사이트의 서버는 실제로 index.html 하나만 가지고 있고, 클라이언트에게 이 페이지 하나만 전달해주고, 그 다음 여기에 필요한 JS파일 등을 하나로 묶어서 Bundle 파일을 클라이언트에 전달해주게 된다. 그러면 클라이언트가 그 번들 파일을 해석하여 웹 사이트를 구성하고 있는 여러 가지 기능이나 컴포넌트를 렌더링 하게 된다.

따라서 React.js는 클라이언트 사이드 렌더링 방식을 채택하고 있다고 생각하면 된다.

이러한 방식의 장점은 MPA 방식에서는 여러 페이지를 옮겨 다닐 때 완전히 다른 페이지로 이동하는 것이기 때문에 화면이 깜빡- 하면서 리로드 되는 것을 경험할 수 있는데 사용이 쾌적하지 못하다. SPA 방식을 채택한 리액트로 개발된 사이트는 마치 하나의 페이지를 이용하는 듯한 사용성을 주기 때문에 모바일 네이티브 앱을 이용하는 것과 같은 쾌적한 사용 경험을 할 수 있다.