브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과
라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로match, location, history라는 객체를 전달하게 된다.
Match
- match 객체에는 브라우저와 URL이 매칭된 것에 대한 정보가 담겨져있다.
- 대표적으로
match.params로 path에 설정한파라미터값을 가져올 수 있다.현재 프로젝트에서 REST API를 작성할 때 파라미터로 값을 넘겨주는 URL을 많이 포함하고 있는데 파라미터 값을 가져올 때 사용해봐야겠다.
- path: [string] 라우터에 정의된 path
- url: [string] 실제 클라이언트로부터 요청된 url path
- isExact: [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행
- params: [JSON object] url path로 전달된 파라미터 객체
Location
- location 객체에는 현재 페이지의 정보를 가지고 있다. 대표적으로
location.search로 현재url의 쿼리 스트링을 가져올 수 있다.게시글 리스트의 경우 두 가지 버전으로 나누어 백단 로직을 짜놓았고 하나는 쿼리스트링을 사용한 페이지네이션이며 다른 하나는 body로 페이지번호를 입력받는 페이지네이션이다. 나는 후자의 경우 페이지네이션을 사용할 것이므로 location.search를 사용할 일은 없을 것 같다.
- path: [string] 현재 페이지의 경로명
- search: [string] 현재 페이지의 query string
- hash: [string] 현재 페이지의 hash
History
- history 객체는 브라우저의 history와 유사하다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.
- length: [number] 전체 history 스택의 길이
- action: [string] 최근에 수행된 action (PUSH, REPLACE or POP)
- location: [JSON object]: 최근 경로 정보
- push(path, [state]): [function] 새로운 경로를 history 스택으로 푸시하여 페이지를 이동
- replace(path, [state]): [function] 최근 경로를 history 스택에서 교체하여 페이지를 이동
- go(n): [function] history 스택의 포인터를 n번쨰로 이동
- goBack(): [function] 이전 페이지로 이동
- goForward(): [function] 앞 페이지로 이동
- block(prompt): [function] history 스택의 PUSH/POP 동작을 제어
