단일 페이지 애플리케이션 구축을 점검하는 새로운 API를 통해 클라이언트 측 라우팅을 표준화한다.
- SPA에서 많이 사용하는 History API는 SPA가 많이 사용되기 전에 개발되어서 잘 어울리지 않음.
- 이를 개선한 Navigation API는 현재 Draft 상태이지만, 크롬 102 버전부터 미리 적용된 상태.
- 글로벌 navigation 객체에 navigate 리스너를 붙여서 동작
- 사용자 또는 프로그램적으로 네비게이션( 클릭, 서브밋, 백/포워드)할 때 무조건 호출되어 중앙집중식 처리 가능
- transitionWhile()또는 preventDefault()로 인터셉트 가능
navigation 항목
`navigation.currentEntry`현재 항목에 대한 액세스를 제공합니다. 이것은 사용자가 현재 어디에 있는지를 설명하는 개체입니다. 이 항목에는 현재 URL, 시간 경과에 따라 이 항목을 식별할 수 있는 메타데이터 및 개발자 제공 상태가 포함됩니다.
메타데이터에는 현재 항목과 해당 슬롯 `key`를 나타내는 각 항목의 고유한 문자열 속성이 포합됩니다. 이 키는 현재 항목의 URL 이나 상태가 변경되더라도 동일하게 유지됩니다. 반대로 사용자가 뒤로가기를 누른 다음 통일한 페이지를 다시 열면 이 새 항목이 새 슬롯을 생성하므로 `key`가 변경됩니다.
Navigation API를 사용하면 일치하는 키가 있는 항목으로 사용자를 직접 탐색할 수 있기 때문에 개발자에게 "키"는 유용합니다. 페이지 사이를 쉽게 이동하기 위해 다른 항목의 상태에서도 이를 유지할 수 있습니다.
const {key} = navigation.currentEntry;
backToHomeButton.onClick = () => navigation.traverseTo(key);
await navigation.navigate('/another_url').finished;State
Navigation API는 현재 기록 항목에 지속적으로 저장되지만 사용자에게 직접 표시되지 않는 개발자 제공 정보인 "state"의 개념을 표시합니다. 이것은 `history.state` History API와 매우 유사하지만 개선되었습니다.
Navigation API `.getState()`에서 현재 항목(또는 모든 항목)의 메서드를 호출해 상태 복사본을 반환할 수 있습니다.
console.log(navigation.currentEntry.getState());defafult 값은 `undefined`입니다. `NavigationHistoryEntry`를 호출하여 현재 상태를 동기적으로 설정할 수 있습니다.
navigation.updateCurrencEntry({state: something});프로그래밍 방식으로 탐색할 때 상태를 설정할 수 있습니다.
Navigation API에서 `.getState()`에 반환된 상태는 이전에 설정된 상태의 복사본입니다. 수정하면 저장된 버전도 변경되지 않습니다. 예를들어 :
navigtion.updateCurrenctEntry({count: 1});
const state = navigation.currentEntry.getState();
state.count = 2;
console.info(navigation.currenctEntry.getState().count);
`navigate`메서드는 다음을 설정할 수 있는 옵션 개체도 있습니다.
- `state`: NavigationHistoryEntry의 `.getState()`메서드를 통해 사용 가능한 새로운 history entry를 위한 state 값
- `history`: 현재 history entry 항목을 대체하기 위해 'replace'로 설정할 수 있습니다.
- `info`: NavigationEvent.info를 통해 탐색 이벤트에 전달할 개체입니다.
Example Usage
navigation.addEventListener('navigate', navigateEvent => {
switch (navigateEvent.destination.url) {
case 'http://example.com/':
navigateEvent.transitionWhile(loadIndexPage());
break;
case 'https://example.com/cats':
navigateEvent.transitionWhile(loadCatsPage());
break;
}
});다음 두 가지 방법 중 하나로 탐색을 가로챌 수 있습니다.
- Calling `transitionWhile()` (위에 설명한대로) 탐색을 처리합니다.
- Calling `preventDefault()` 탐색을 완전히 취소할 수 있습니다.
이 예제는 비동기 함수에서 생성된 프라미스가 있는 이벤트에서 transitionWhile()을 호출합니다. 이 메서드를 호출하면 브라우저는 코드가 사이트의 다음 상태를 구성할 것임을 알고 있습니다. 이렇게 하면 전환 개체가 생성됩니다.
`transitionWhile()`, `preventDefault()` 모두 일반적으로 허용되지만 호출할 수 없는 경우가 있습니다.:
- navigation이 cross-origin navigation인 경우
예를들어, 도메인을 떠나는 경우. 사용자가 뒤로가기 또는 앞으로가기 버튼을 누르고 있으면 `preventDefault()`를 통해 `navigation`을 취소 할 수 없습니다. 사이트에서 사용자를 가둘 수 없어야 합니다. (Github에서 논의중)
댓글