일렉트론기초-13.Electron + React로 IPC 통신하기

이 글의 동영상 강의입니다.

https://youtu.be/ytB0vOdZaJc

React + Electron IPC 통신하기

 

이전 12번 강좌에 이어서 진행합니다.

 

이번 강좌는 일렉트론과 React로 만들어진 프로젝트에서 IPC 통신을 하는 코드를 만들어봅니다.

실무 프로그램에서 사용되는 중요한 항목입니다.

 

기존 소스 클론하기

우선 이전 강좌에서 만든 Electron과React를 결합하여 한번에 실행하는 프로젝트의 소스를 github에서 클론합니다.

https://github.com/CodeGearGit/react-electron

GitHub - CodeGearGit/react-electron: React + Electron Project - Basic Setting

• github 사이트의 repository에서 react-electron의 code를 클릭하여 URL을 Copy합니다.

repository url copy

• 로컬 workspace 폴더에서 git clone 실행합니다.
  프로젝트명은 "electron-react-ipc"로 합니다.
  Visual Studio Code를 실행해 프로젝트를 만들 상위폴더를 엽니다.
  터미널에 아래 명령을 실행합니다.

git clone https://github.com/CodeGearGit/react-electron.git react-electron-ipc

• 프로젝트의 패키지들을 설치합니다.

npm install

• 프로젝트를 실행합니다.

npm start

• 오류없이 실행이 완료되면 아래와 같은 화면이 나옵니다.

Electron+React 실행화면

 

IPC 통신하기

 

일렉트론과 리액트간의 IPC 통신을 위한 코드를 작성합니다.

• 일렉트론 소스와 리액트에서 동일한 코드를 사용하기 위해 상수를 정의합니다.
  src/constants.js를 추가하고 다음 코드를 추가합니다.

module.exports = { 
    SEND_MAIN_PING: 'send_main_ping', 
};

• 일렉트론에서 요청을 받는 코드를 추가합니다.
  src/main.js를 아래와 같이 수정합니다.
  1. ipcMain 선언
  2. 상수 정의 추가
  3. ipc callback function의 코드 추가 - ipcMain.on

const { app, BrowserWindow, ipcMain } = require('electron')  
const path = require('path')  
const { 
  SEND_MAIN_PING 
} = require('./constants'); 
function createWindow () {  
  const win = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true, 
      contextIsolation : false, 
    }  
  })  
  win.loadURL("http://localhost:3000") 
}  
ipcMain.on(SEND_MAIN_PING, (event, arg)=>{ 
  console.log('Main received a ping!!!'); 
}) 
app.whenReady().then(() => {  
  createWindow()  
})  
app.on('window-all-closed', function () {  
  if (process.platform !== 'darwin') app.quit()  
})

• 리액트에서 ipc send 코드를 추가합니다.
  1. constants 추가
  2. ipcRenderer 추가
  3. ipc send function 추가
  4. ipc send function을 호출하는 버튼 추가

import logo from './logo.svg'; 
import './App.css'; 
import { SEND_MAIN_PING } from './constants'; 
function App() { 
  const { ipcRenderer } = window.require("electron"); 
  const sendMail = () => { 
    ipcRenderer.send(SEND_MAIN_PING, 'send'); 
  } 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <img src={logo} className="App-logo" alt="logo" /> 
        <p> 
          Hello world!!! 
        </p> 
        <a 
          className="App-link" 
          href="https://reactjs.org" 
          target="_blank" 
          rel="noopener noreferrer" 
        > 
          Learn React 
        </a> 
        <button onClick={ sendMail }>Send Mail</button> 
      </header> 
    </div> 
  ); 
} 
export default App;

• 프로그램을 실행합니다.

npm start

• 화면에서 버튼을 클릭합니다.
  터미널 창에서 ipc callback function의 로그를 확인합니다.

이상으로 react+electron 프로젝트에서 IPC 통신하는 법을 알아보았습니다.

 

소스코드는 다음에서 확인하실 수 있습니다.

https://github.com/CodeGearGit/react-electron-ipc

GitHub - CodeGearGit/react-electron-ipc: react+electron 프로젝트에서 ipc 사용법