React Client-Side Routing

Routing in React SPA

• SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 것은 아니다.
• 변경된 화면에 따라 주소 또한 달라져야 할 필요가 있다.
• React 자체만으로는 라우팅 기능을 사용할 수 없다. 
• React SPA에서는 라우팅을 위해 React Router 라이브러리가 가장 많이 사용된다.
• 이를 사용한 라우팅은 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다.

 

React는 자바스크립트 프론트엔드 라이브러리로 주로 SPA를 만들 때 사용된다.

 

Single Page Application이라는 용어 그대로 SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 것은 아니다. 화면이 변경되기 위해선 주소 또한 달라져야 할 필요가 있는데 이렇게 다른 주소에 따라 다른 화면을 보여주는 과정을 '경로에 따라 변경한다'라는 의미로 라우팅(Routing)이라고 한다. React는 View에 중점을 둔 프론트엔드 라이브러리이기 때문에 React 자체만으로는 라우팅 기능을 사용할 수 없다. 별도의 라이브러리를 설치해야지만 라우팅 기능을 사용할 수 있는데 통상적으로 React Router라는 라이브러리가 가장 많이 사용된다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다.

 

라우팅이 클라이언트 측에서 일어나게 되면 주소가 변경될때마다 매번 서버에서 페이지를 받아오지 않아도 되기 때문에 서버와 클라이언트 간의 데이터 트래픽이 감소한다는 이점이 있다. 또한 페이지 전환 시 새로고침을 방지할 수 있기 때문에 보다 자연스러운 페이지 이동과 사용자 경험을 제공하는 것이 가능해진다.

 

Client-Side Routing에는 단점도 존재하는데 대표적으로 검색엔진 최적화(SEO)에 불리하다는 점이 있다. 라우팅 시 콘텐츠 구성이 완료된 HTML을 서버에서 받아오는 것이 아니라 화면 구성에 필요한 모든 HTML을 클라이언트 측에서 처리하기 때문에 검색엔진에서 페이지 파악이 불리해진다. 이 때문에 검색 결과에서 더 높은 순위를 점하는 것이 어렵다. 보안 관련해서도 주의할 점이 있는데 Client-Side Routing에서 사용자 정보 저장이 기존 서버 기반 세션이 아닌 상대적으로 보안에 취약한 클라이언트 기반의 쿠키에서 이루어지기 때문이다.