웹뷰 간 상태 유지하기

문제 상황

현재 앱 구조는 일관적인 화면 전환 애니메이션을 위해 페이지 전환 시마다 새로운 WebView를 생성한다.

이로 인해 Zustand, React Context API 같은 웹 전역 상태 관리가 페이지 간 유지되지 않는다.

[구체적 사례] 모집글 작성

1. 사용자가 모집글 작성 페이지에서 글을 작성한다.
2. 모임 장소 선택 페이지(지도)로 이동한다.
3. 장소를 선택하고 다시 모집글 작성 페이지로 돌아온다.

문제: 이때 이동 전 입력한 폼 데이터가 돌아왔을 때 모두 사라진다.

아이디어

• 상태 보존이 필요한 경우에, 페이지 이동 시 앱-웹 간 통신으로 동기화
  • 웹 → 앱: 페이지 이동 직전에 현재 작성 상태 전달
  • 앱 → 웹: 돌아올 때 저장된 상태를 다시 주입

<aside> 💡

즉, 앱이 ‘작성 중인 모집글 상태’의 주체가 된다. 페이지 이동 시 앱이 상태를 저장하고, 진입 시 해당 상태를 해당 상태를 웹뷰로 복구한다.

또한 이 구조는 Next.js 전역 상태가 필요한 모든 페이지에 공통으로 적용한다.

</aside>

상태 저장/복구 흐름

• 상태 저장

  [웹 페이지 내부]
     ↓ saveStateToApp() 호출
     ↓ postMessage(type: 'SAVE_STATE', key, state)
  
  [앱 WebViewContainer]
     onMessage() → setWebViewState(key, state)
  

• 상태 복구

  [웹 페이지 진입 시]
     useRestoreAppState() 실행
      → sendRegisterState() (앱에게 상태 요청)
      → messageEventHandler 대기
  
  [앱]
     getWebViewState(key)
      → postMessage({ type: 'RESTORE_STATE', state })
  
  [웹]
     messageEventHandler 동작 → onRestore(state) 실행