Electron과 React를 같이 사용해 보자. (Electron + React 연동)

Electron으로 윈도우용 프로그램을 만들다보니

UI를 만드는데 문제가 있더라.

 

HTML과 css를 사용해서 UI를 만들다 보니

UI 라이브러리 같은게 있으면 좋겠다는 생각이 들었다.

 

그러다 불현듯 React가 생각났다.

 

React로 웹 어플리케이션을 만들 수 있는데

이것을 Electron에 넣을 수 있지 않을까?

Electron도 어차피 크롬을 사용하잖아??

 

이런 생각에 구글링 잠깐 해보니 관련 글이 있다!! ㅎㅎ

 

몇 가지 시행 착오를 겪었지만 

결국 Electron과 React를 같이 사용하는 데 성공했다.

 

 

윈도우 11에서 테스트 한 결과를 공유합니다!

 

 

 

React 프로젝트 설정

 

먼저, React 프로젝트를 만들자.

 

npx create-react-app electron-react --template typescript

 

npm start로 프로젝트가 잘 실행되는지 확인하고 다음 단계로~

 

 

Electron 설치

 

npm install --save-dev electron electron-builder

 

 

Electron을 설치하고 vscode에 Electron 디버깅 환경을 추가한다.

 

 

.vscode 폴더에 launch.json 파일을 만들고 다음 내용을 추가.

 

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args": ["."],
      "outputCapture": "std"
    }
  ]
}

 

 

 

 

 

Electron 코드 추가

 

 

 

 

src_electron 폴더를 만들고 그 밑에 main.ts를 추가하고 아래 내용 추가.

 

import { BrowserWindow, app } from "electron";
import * as path from "path";

const isDev = !app.isPackaged;

const BASE_URL = "http://localhost:3000";

let mainWindow: BrowserWindow | null = null;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: true,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  if (isDev) {
    mainWindow.loadURL(BASE_URL);
    mainWindow.webContents.openDevTools();
  } else {
    // 2024.7.5일 코드 변경.
    // mainWindow.loadFile(path.join(__dirname, "./build/index.html"));
    mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
  }
};

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

 

 

BASE_URL은 React가 실행되는 경로입니다. 

 

 

Electron 실행을 위해서 package.json에 아래 두가지 추가.

 

"homepage": "./",
"main": "./public_electron/main.js"

 

 

Electron을 위한 tsconfig-electron.json을 만들고 아래 내용 추가.

 

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "public_electron",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "src_electron/*",
        "src_electron/renderer-process/*"
      ]
    }
  },
  "include": ["src_electron/**/*"]
}

 

Electron과 React 모두 typescript를 적용하려고 했는데

React의 tsconfig.json이 Electron의 main.ts에 적용되지 않아서

Electron용 tsconfig를 따로 만들었습니다.

 

 

Electron 코드를 위한 아래 스크립트를 package.json의 scripts에 추가.

 

"compile-main": "tsc -w --project tsconfig-electron.json",

 

 

 

 

 

npm run compile-main으로 main.ts가 컴파일 되는지 확인.

 

 

 

 

Electron + React

 

먼저 npm start로 React를 실행하고 F5 키로 Electron을 실행한다.

 

 

 

이렇게 Electron 윈도우에 React가 표시되면 성공!!

 

React의 App.tsx 내용을 변경하면 화면에 적용되는지 확인해보자.

 

 

 

더 확인할 사항:

1. React와 Electron의 코드 연동은 어떻게 할 것인가.

2. 배포 단계에서의 동작 확인.