멀티윈도우 앱

"창 하나하나가 자기만의 작은 브라우저 탭이야. JavaScript를 한 줄도 안 나눠 가져 — 그러니 진짜 값은 둘 다 닿을 수 있는 곳, 코어에 있어야 해."

다른 웹뷰면 다른 세계

창은 저마다 자기 JavaScript 컨텍스트를 가진 독립된 웹뷰야. 메인 창의 React state는 설정 창엔 아예 존재하지 않아 — 브라우저 탭 둘만큼이나 떨어져 있거든. 여기서 다들 한 번 놀라. 두 번째 창을 열었다고 네 store가 '같이 쓰이지' 않아. 두 창이 같은 데이터를 봐야 하면, 그 데이터는 Rust 코어(managed state)에 있어야 하고 창마다 command로 읽어가야 해. 코어가 기준이고, 창은 그 위에 얹힌 화면일 뿐이야.

창끼리 말 붙이기

창은 코어를 거쳐서 손발을 맞춰. 특정 창한테 뭘 밀어주려면 emit_to("label", …), 전부한테 뿌리려면 emit. 흔한 흐름은 이래. 설정 창이 command로 설정을 저장하면(managed state가 갱신되고), 코어가 settings-changed 이벤트를 emit하고, 메인 창이 그걸 듣고 반응해. 창이 다른 창을 직접 부르는 일은 없어. 전부 코어를 거치니까 데이터가 어긋날 일도 없고.

생애주기: show, hide, close

창엔 네가 쥔 생애주기가 있어. show(), hide(), close()가 있고, close-requested(닫기 전에 확인) 같은 이벤트나 포커스 변화도 들을 수 있어. close 대신 hide를 하면 창의 웹뷰가 살아 있어서 다시 열 때 빠르고 state도 그대로야. close는 아예 없애서 자원을 돌려주고 다음엔 새 state로 시작하고. 다시 열 때 즉시여야 하는지, 깨끗해야 하는지로 골라.

Code

창끼리 직접이 아니라 코어를 거쳐 맞추기·rust

use tauri::{Manager, Emitter};

// 코어가 공유 진실; 창은 그걸 거쳐 동기화.
#[tauri::command]
fn set_theme(app: tauri::AppHandle, theme: String, state: tauri::State<Prefs>) {
    *state.theme.lock().unwrap() = theme.clone();   // 공유 state 갱신
    let _ = app.emit("settings-changed", theme);     // 모든 창에 알림
}

// 창 닫힘을 가로채 먼저 확인.
fn guard_close(win: &tauri::WebviewWindow) {
    let w = win.clone();
    win.on_window_event(move |event| {
        if let tauri::WindowEvent::CloseRequested { api, .. } = event {
            api.prevent_close();           // 기본 닫기 중단
            let _ = w.emit("confirm-close", ()); // UI에 확인 요청
        }
    });
}

Exercise

두 번째 창을 열어서 격리를 직접 확인해봐. 메인 창에 React state를 좀 넣어두고, 두 번째 창을 열고, 그 state가 거기 없다는 걸 봐. 그다음 그 값을 managed Rust state로 옮기고 두 창이 command로 읽어가게 해서 말을 맞춰. 코어가 왜 기준이어야 하는지 방금 다시 발견한 거야.

Hint

두 번째 창은 아예 새로 시작해 — 메인 창 store 같은 건 없어. 같이 쓸 값을 managed state의 Mutex로 옮기고, 두 창이 get command를 부르고 changed 이벤트를 듣게 해서 계속 맞춰.