일렉트론(Electron) - 메인 프로세스와 렌더러 프로세스

일렉트론은 내부적으로 메인 프로세스와 렌더러 프로세스 구조를 가진다.

단일 메인 프로세스가 여러 개의 렌더러 프로세스를 관리하게 된다.

 

메인 프로세스(main process)

일렉트론은 웹이 아닌 앱, 즉 데스크 탑 응용 프로그램의 창을 통해 화면에 표시하게 해준다.

 

메인 프로세스가 바로 이 응용 프로그램창의 생성 및 삭제 및 컨트롤을 해주는 역할을 한다.

또한 node 기반으로 동작한다.

앱 상단 메뉴 또한 메인 프로세스에서 관리

 

 

렌더러 프로세스(renderer process)

렌더러 프로세스는 응용 프로그램 창 내부에 띄워지게 되는 화면(html,css,js를 통해 만들어진 화면)에 대한 것을 담당한다.

 

 

IPC(Inter-process Communication)

Ipc를 직역하면 내부 프로세스 의사소통이다.

즉 메인 프로세스와 렌더러 프로세스간의 의사소통에 쓰이는 방법이다.

왜 이것이 필요 할까? 

렌더러 프로세스에서 발생한 인터랙션으로 어떤 디렉토리 폴더를 열고 싶을 때 혹은 데스크탑 앱의 상단 메뉴를 컨트롤 하기등 애플리케이션 제어를 원할 때 이 IPC를 통해 메인 프로세스에게 요청하고 메인 프로세스는 그 요청을 핸들링 및 다시 렌더러 프로세스에게 결과 값을 반환할 수 있다.

 

 

IPC 관계

 

ipcRenderer에서 이벤트를 보내서 통신할때

1. ipcRenderer에서 이벤트 송신

• hi 전달

ipcRenderer.send('OPEN_DIRECTORY', 'hi');

2. ipcMain에서 이벤트 수신

• payload로 hi를 받음
• evt.reply로 ipcRenderer에게 다시 응답

ipcMain.on('OPEN_DIRECTORY', (evt, payload) => {
	// payload => 'hi'
	evt.reply('OPEN_DIRECTORY_RESPONSE', 'yes hi')
})

3. ipcRenderer에서 이벤트 응답

ipcRenderer.on('OPEN_DIRECTORY_RESPONSE', (evt, payload) => {
	//payload => 'yes hi'
})

 

 

 

ipcMain에서 단독으로 ipcRenderer로 송신할 때

webContents.send('DOWNLOAD', 'this is download')

ipcRenderer.on('DOWNLOAD', (evt, payload) => {
	//payload => 'this is download'
})