React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅이다. React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법으로 문제를 해결할 수 있다.
SPA 라우팅 문제점
-
특정 페이지에 대한 즐겨찾기 등록이 불가하다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문이다.
-
뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버린다.
-
새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동한다.
-
SEO(검색 엔진 최적화) 측면에서도 일반 웹사이트들과 차이가 있어서 검색 엔진에 의해 원치않는 방식으로 색인이 될 수도 있다.
React Router
React Router는 위에서 살펴본 SPA의 라우팅 문제를 해결하기 위해서 거의 표준처럼 사용되고 있는 네비게이션 라이브러리이다.
React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 된다. 따라서 SPA에서 제공하는 다이나믹한 사용자 경험을 그대로 살리면서도 기존 웹사이트에서 가능하던 브라우저 상의 매끈한 라우팅을 제공할 수 있다.
404 페이지 처리
SPA를 개발할 때도 많은 경우, 브라우저에 잘못된 경로가 입력되었을 때, 특정한 404 페이지를 보여줘야 한다.
밑에는 react-router-dom v5에 대한 설명으로, 참고하시길 바랍니다
이럴 경우, React Router에서 제공하는 또 다른 컴포넌트인 Switch로 모든 Route 컴포넌트로 묶어줘야 한다. Switch 컴포넌트를 사용하면 그 하위에 있는 Route 컴포넌트 중에 매치되는 제일 첫번째 컴포넌트만 보여주고, 그 이후에 나오는 Route 컴포넌트는 매치되더라도 무시된다. 따라서 Route 컴포넌트의 순서가 중요하다. 그 다음에 path prop이 없는 Route 컴포넌트를 하나 추가해주면, 이 Route는 모든 경로에 매치가 가능해지고, 여기에 404 컴포넌트를 할당해줄 수 있습니다. 그러면, 자연스럽게 위에 나온 Route 중에 매치되는 것이 없었을 경우, 제일 아래까지 내려올 것이고, 이 마지막 Route 컴포넌트가 매치되어 404 페이지가 보여질 것이다.
