history 쌓기 vs 지우기 #shorts #SAP #UI5

UI5 라우팅 — navTo 두 가지 모드

UI5에서 화면 전환 시 navTo를 사용하지만, 세 번째 인자 하나로 동작이 완전히 달라집니다. 바로 Push와 Replace의 차이입니다. 어떤 걸 써야 뒤로가기가 되고, 어떤 걸 쓰면 막히는지 알아봅니다.

Push — history 스택에 쌓기

Push는 기본값입니다. 세 번째 인자를 생략하면 현재 페이지를 history 스택에 추가하고 새 페이지로 이동합니다. 사용자가 뒤로가기를 누르면 이전 페이지로 돌아올 수 있습니다.

// Push 모드 — 뒤로가기 가능
this.getRouter().navTo("DetailPage", {
  productId: sId
});

Replace — history 덮어쓰기

Replace는 현재 history 항목을 교체합니다. 세 번째 인자를 true로 전달하면 이동 후 뒤로가기를 눌러도 이 페이지로 돌아오지 않습니다.

// Replace 모드 — 뒤로가기 차단
this.getRouter().navTo("MainPage", {}, true);

언제 Replace를 써야 할까?

• 로그인 성공 후 메인 화면 전환 (로그인 화면 차단)
• Wizard 완료 후 결과 화면 (단계 되돌리기 방지)
• 에러 복구 후 정상 화면 복귀

목록 → 상세 전환처럼 사용자가 돌아와야 하는 경우엔 반드시 Push를 써야 합니다. Replace를 잘못 쓰면 뒤로가기가 예상과 달라 UX를 망칩니다.

핵심 한 줄

navTo 세 번째 인자 true면 Replace(뒤로가기 차단), 없으면 Push(뒤로가기 허용).