[react] SPA에서 라우팅 1: 기본 전략
SPA는 기술적으로 단일 페이지인 프론트엔드 앱이지만, 유저에게는 몇 가지 이유로 MPA처럼 보여야 하는 경우가 있다.
SPA에서는 UX를 위해 라우팅 기능이 기본적으로 필요하다.
프레임워크가 없는 리엑트는 SPA가 적합하다. 이는 유저가 앱에 접속하면 단일한 html 파일 내에서 자바스크립트(중략 js) 파일로 UI를 변경하는 방식이다. 그런데, 유저는 프론트엔드를 앱이 아니라 '페이지 혹은 문서'처럼 인식하는 경향이 있다. 만약 유저가 프로그램을 실행하는 거라면 언제나 메인화면이 뜨는 것에 이상함을 느끼지 않겠지만, 웹 브라우저로 접속하는 경우에는 내가 보던 페이지에 바로 접근하지 못하는 것에 이상함을 느낄 가능성이 크다.
이는 관습적으로 웹 페이지가 하나의 앱이 아니라 여러 문서 페이지처럼 여겨져오던 경향 때문이다. 사람들은 웹 페이지에서 정보를 찾으려 하고, 이를 위한 다양한 지원 도구(계층화된 메뉴, 검색 창)에 익숙하다. 정보의 위치를 url로 북마크하는 패턴 역시 이런 지원 도구 범주에 속한다. 그래서 SPA는 유저가 특정 문서에 접근할 수 있도록 방법을 마련해야 UX를 개선할 수 있다.
문서 탐색 도구로서 URL 라우팅을 이야기 해보자.
이는 '특정 기능'과 '데이터'가 담긴 '페이지'에 접근하는 방법이다.
- 특정 기능이란, 문서 조회, 수정, 조회 수 통계 보기 등에 해당한다.
- 데이터란, 문서, 프로필 등이 해당한다.
- 두 가지를 조합하면 보통 이런 예시들이 있다.
- 문서 전체 조회 : /post/list
- 281번 문서 상세 보기 /post/detail/281
- 281번 문서 수정 하기 /edit/post/281
이걸 리엑트에서 구현하는 가장 간단한 방법은 react-router-dom(중략. rrd)을 사용하는 것이다. 이 때, rrd는 url 라우트에 부합하는 컴포넌트 함수를 호출하는 방식을 사용한다.
이런 요구 사항은 주로 'SPA 내에서 기능이 명확하게 구분되는 여러 페이지를 구분할 때' 유용하다.
예컨대, 티스토리 앱을 만든다면, 사용자 페이지와 관리자 페이지로 구분할 수 있을 것이다. 그리고 중첩 라우트는 기존 페이지 내에 중첩된 또 다른 페이지를 여는 방식일 때 유용하다.
예컨대, 사용자 페이지는 상세 보기, 댓글 모두 보기, 방명록, 후원 페이지 등으로 나뉠 수 있는데, 이들은 모두 사용자 페이지의 공용 레이아웃 내부에 중첩된 페이지로 열릴 수 있다.
SPA의 기술적인 관점에서 보자면, 라우트의 구축 방식은 크게 3가지이다.
- pathname
- /post/detail/와 /edit/post/ 처럼 url의 경로 자체가 변경되는 방식이다.
- rrd에서 pathname이 변경된다는 건, 서로 완전히 다른 페이지가 호출된다는 의미이다.
- 페이지 자체가 변경될 정도면 대개는 데이터보단 기능이 완전히 변경되는 경우에 유용하다.
- nested route(중첩 라우트)
- 동일한 페이지 내에서 새로운 기능이 추가되는 경우에 유용하다.
- 예컨대, 문서 상세 조회 페이지 내에서 특정 버튼을 클릭할 시, 요약된 초록을 모달로 띄워줄 수 있다. 이런 경우, 라우트는 /post/detail/20/abstract 처럼 설정할 수 있다.
- dynamic route(동적 라우트)
- 정해진 라우트 문자열이 아닌, 임의의 값을 받을 수 있는 경로이다.
- 동일한 페이지 내에서 주요 데이터만 변경되는 등 동적 처리에 유용하다.
- /post/detail/20의 경우, pathname에서 가장 마지막의 20을 추출하여 데이터를 가져오는 인자로 사용할 수 있다.