싱글 페이지 애플리케이션

영상 강의를 시청하며 글을 읽고 실습하면 더욱 효과적입니다.

SPA 란?

Single Page Application(이하 SPA)은 전통적인 Multi Page Application(이하 MPA)과 다릅니다. 가장 큰 차이점은 SPA 내비게이션은 단 하나의 웹 페이지에서 이루어진다는 점입니다. 같은 페이지 안에서 특정 영역에 View가 다시 그려지는 것입니다.

SPA 구현의 어려움

콘텐츠를 인라인으로 그려야 하는 것은 쉽지 않습니다. 어려운 부분은 사용자가 익숙한 방식으로 SPA가 작동되어야 하기 때문입니다. 일반적으로 웹 탐색 과정에서 사용자가 익숙한 경험은 다음과 같습니다.

1. 웹 브라우저 주소 창 URL은 변경된 페이지를 식별하는 주소로 변경되어야 합니다. (예: /, /react, /react/props.html)
2. 웹 브라우저의 이전/다음 버튼을 눌렀을 때 페이지가 변경되도록 히스토리 기능이 요구됩니다. (예: ← 이전, → 다음)
3. 직접 URL을 웹 브라우저 주소 창에 입력했을 때 해당 화면이 그려져야 합니다. (예: /react/props.html#props-검사)

MPA는 이러한 조건이 기본 제공되므로, Front-End 개발자가 할 일은 없습니다. 하지만 SPA를 구현할 경우 Front-End 개발자는 앞서 나열한 3가지 조건을 모두 구현해야 합니다. 이러한 탐색 기능을 라우팅(Routing) 이라고 합니다. 다행히 직접 구현하지 않아도 이미 구현된 라이브러리를 사용해 SPA를 구현할 수 있습니다.

SPA 라이브러리

React에서는 React Router 라이브러리가 좋은 선택이 될 수 있습니다.

영상 강의