1.사이드 라우팅
서버에게 별다른 요청을 보내지않고 클라이언트의 브라우저 단에서 여러 페이지를 왔다갔다 방문할 수 있는 기능
- 현재 URI에 맞는 UI를 렌더링 할 수 있어야함
- 페이지 리로드 없이 다른 페이지를 방문할 수 있는 기능이 있어야함
- 사용자의 액션(앞으로가기 , 뒤로가기) URL이 변경될 때 이를 감지 처리할 수 있어야함
2.BrowserRouter, Rouhter 컴포넌트
- BrowerserRouter 컴포넌트는 Router컴포넌트르르 렌더링 할 때 props로 history객체를 전달 , 이 객체는 history 패키지의 createBrowserHistory()함수를 호출함으로 생성
history API
브라우저는 현재 탭의 방문 기록을 메모리 상에서 스택의 형태로 관리, 이 히스토리 스택을 조작하기 위해 탭 단위로 존재하는 window 전역 객체의 프로퍼티인 hitory객체의 프로퍼티들과 메소들로 제공됨
- history.back() : 방문기록의 바로 뒷 페이지로 이동하는 비동기 메소드
- history.forward() : 방문기록의 앞 페이지로 이동하는 비동기 메소드
- history.go() : 현재 페이지를 기준으로, 상대적 위치에 존재하는 방문 기록 내 페이지로 이동하는 비동기 메소드
history와 리액트
react-router-dom 패키지는 이 history패키지를 활용하여 클라이언트 사이드 라우팅을 구현한 것이다.
-
Router 컴포넌트 인스턴스 생성될 때
Router 컴포넌트는 props로 전달받은 history객체의 프로퍼티인 loaction객체를 자신의 지역 상태에 저장 그리고 props로 전달받은 history객체를 구독하여 브라우저의 현재 URL이 변경될 때마다 자신의 지역 상태에 해당하는 location 객체가 새로운 location 객체로 대체되도록 함 -
Router 컴포넌트 렌더링 조직
Router 컴포넌트는 현재의 URL과 관련된 정보를 Context로 구성해서 Context의 Provider(Routercontext,Provide)를 렌더링 (브라우저의 현재 url과 관련된 정보들 참조하기 위해서) , 이때 context로 구성된 정보로는 match, location, history객체가 있음
Switch 컴포넌트
- RouterContext.Consumer 컴포넌트를 렌더링함으로 RouterContext를 참조
Route 컴포넌트
-
Route 컴포넌트는 props 로 전달받은 path 값이 브라우저 현재 url과 매칭 될 때 특정 컴포넌트를 렌더링하는 컴포넌트
Router.context.consumer 컴포넌트를 렌더링함으로 RouterContext를 참조함
매칭되는 경우 props로 RouterContext와 동일한 구성의 값(match, location, history)를 넘겨준다
