클라이언트 사이드 라우팅

경로가 바뀌는 경우, 서버에 별다른 요청을 보내지 않고 클라언트의 브라우저 단에서만 여러 페이지를 바꾸며 방문하는 기능을 의미한다. 클라이언트 사이드 라우팅의 구현에 있어 가장 중요한 핵심 세가지는 다음과 같다.

• 현재 URL에 맞는 컴포넌트를 렌더링 할 수 있어야 한다.
• 클라이언트 사이드 렌더링이므로, 리로드가 없어야 한다.
• history 기능을 사용하여, 앞으로 가기, 뒤로가기 시 이를 감지하고 처리할 수 있어야 한다.

React-Router 작동원리

BrowseRouter

react-router 컴포넌트들의 최상단의 위치시키는 컴포넌트로, 자식 컴포넌트인 routes 컴포넌트에 props 로 history 객체를 전달한다.

Routes

마운트 되는 순간에 props 전달받은 history 객체의 프로퍼티인 location 객체에 자신의 지역 상태를 저장한다. props로 받은 history 객체를 구독하여, 브라우저의 현재 URL이 변경될 때 마다 자신의 지역 상태에 해당하는 location 객체가 새로운 location 객체로 대체되도록 한다. 즉 URL의 정보를 Routes 컴포넌트에서 실시간으로 추적하여 해당 Route 컴포넌트를 반환하는 작업을 한다.

Route

props 로 전달 받는 path 값이 브라우저의 현재 URL과 매칭될 때 특정 컴포넌트를 렌더링한다. Routes 컴포넌트는 RouterContext.Provider 를 렌더링하여 match, location, history 객체를 전달하면 Route 컴포넌트 RouterContext.Consumer 컴포넌트를 렌더링하여 path 값과 일치하는 경우, 전달 받은 컴포넌트를 렌더링하고, 아니라면 null 값을 나타낸다. 매칭 시, 렌더링하는 컴포넌트에게 RouterContext 의 객체의 값을 그대로 전달한다.

Link

<a> 태그의 기능인 링크 이동을 가진 컴포넌트이다. 단 페이지의 리로드 없이 네비게이션 기능을 수행한다. 실제 <a> 태그로 렌더링 되지만 preventDefault() 를 통해 기본 동작을 막고, RouterContext 의 history 객체를 이용하여 네비게이션 기능을 수행한다.

참조
[React] react-router 동작 원리 간단히 알아보기
[TIL]react-router 동작 원리 알아보기