[Electron] IPC 통신

References

https://ko.wikipedia.org/wiki/프로세스_간_통신

https://www.electronjs.org/docs/latest/tutorial/ipc

https://kdydesign.github.io/2020/12/23/electron-ipc-communication/

https://velog.io/@ckstn0777/Electron-이해하기

 

IPC의 정의

**IPC(Inter-Process Communication)**는 프로세스 간 내부 통신의 약자로 프로세스들 사이에 서로 데이터를 주고받는 행위나 방법 또는 경로를 의미한다.

특히 서로 간의 독립된 프로세스의 경우, 각 프로세스마다 데이터의 내용이 달라짐으로 인한 문제가 발생되므로 이를 해결하기 위한 교환 과정에서 필요한 기능이다.

 

일렉트론의 프로세스

일렉트론에서 프로세스는 Main process와 Renderer process로 나뉜다.

Main process

Electron에서 package.json 파일의 main 스크립트를 실행하는 프로세스를 의미한다. 여기서 메인 프로세스의 실행되는 웹페이지 스크립트는 GUI로 표시가 된다.

또한, Electron 앱은 하나의 Main process만을 가진다.

Renderer process

Electron은 웹페이지를 보여주기 위해 **크로미움(Chromium)**을 사용하는데 특성상 멀티 프로세스 아키텍쳐가 이용된다.

그로 인해 Electron의 웹페이지는 자체 프로세스로 동작하는(the renderer process) 특징을 가진다.

 

일렉트론의 IPC 사용

ipcMain

Renderer process가 보내는 메시지나 이벤트를 동기 / 비동기로 수신하여 처리한다.

const { ipcMain } = require('electron')

/**
* on : Main process의 수신 기능
* CHANNEL_NAME : 메시지를 수신할 이름(channel)
* reply : Main process의 응답 기능
* IPC_RENDERER_CHANNEL_NAME : 이벤트를 응답할 이름
*/
ipcMain.on('CHANNEL_NAME', (evt, payload) => {
  console.log(payload)
  evt.reply('IPC_RENDERER_CHANNEL_NAME', 'message')
})

그러나 ipcMain의 경우 IPC 통신시 수신만 가능하므로 (응답 ≠ 송신)

Render process와 비슷하게 **송신(send)**을 하기 위해선 다음과 같은 과정이 필요하다.

const { app, BrowserWindow } = require('electron')

/**
* webContents.send : 송신 기능
*/
app.whenReady().then(() => {
  const win = new BrowserWindow({ 
    // options 
  })
  
  win.webContents.send('IPC_RENDERER_CHANNEL_NAME', 'message')
})

ipcRenderer

Renderer process에서 Main process로 동기 / 비동기 메시지를 송신한다.

const { ipcRenderer } = require('electron')

const payload = 'message'

/**
* send : Renderer process의 송신 기능
* CHANNEL_NAME : 메시지를 송신할 이름
*/
ipcRenderer.send('CHANNEL_NAME', payload)