KBennyCC

React.js 01.17. React Router 01.17.1. SPA SPA 는 Single Page Application , 말 그대로 페이지가 하나인 애플리케이션 이라는 의미이다. 전통적인 페이지는 여러 페이지로 구성되어 있다. 유저가 요청할 때 마다 페이지를 새로고침하며, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 후 렌더링한다. HTML 파일 또는 템플릿 엔진 등을 사용해서 애플리케이션 뷰를 어떻게 보일지도 서버에서 담당한다. 웹에서 제공하는 정보가 점점 많아지면서 속도 문제가 발생했는데, 이를 해소하려고 캐싱과 압축을 해서 서비스를 제공한다. 그러나 이 방법은 사용자와 상호작용(interaction)이 많은 모던 웹 애플리케이션에선느 충분하지 않을 수 이다. 서버에서 렌더링을 담당한다는 것은 그만큼 서버 사줭늘 렌더링하는데 사용한다는 의미로, 불필요한 트래픽이 낭비가 되기 때문이다. 리액트 같은 라이브러리 또는 프레임워크를 사용해서 뷰 렌더링을 유저의 웹 브라우저가 담당하도록 하고, 애플리케이션을 우선 웹 브라우저에 로드시킨 후 필요한 데이터만 전달받아 보여 줄 것이다. 싱글 페이지 애플리케이션 은 서버에서 제공하는 페이지가 하나이지만, 로딩을 한 번 하고 나면 웹 브라우저에서 나머지 페이지들을 정의한다. 페이지에 들어온 후 다른 페이지로 이동할 때는 서버에 새로운 페이지를 요청하는 것이 아니라, 새 페이지에서 필요한 데이터만 받아 와 그에 따라 웹 브라우저가 다른 종류의 뷰를 만들어 주는 것이다. SPA 단점 은 앱 규모가 커지면 자바스크립트 파일 크기도 너무 커진다는 것이다. 페이지를 로딩할 때, 유저가 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 함께 불러오기 때문이다. 하지만 코드 스플리팅(code splitting)을 사용하면 라우트별로 파일을 나누어 트래픽과 로딩 속도를 개선할 수 있다. 01.17.2. React Router 리액트 라우터를 사용한 클...