일렉트론 + 리액트로 PC 프로그램 개발하기

Electron에서 React를 함께 사용하는 건 매우 일반적인 패턴입니다. React로 UI를 만들고, Electron으로 데스크탑 앱화하는 거죠.
아래에 기본적인 구성 방법을 순서대로 정리해드릴게요.

---

✅ 목표

Electron + React를 연동해서 데스크탑 앱 개발하기
→ React가 렌더링한 UI가 Electron 창에 표시되는 구조

---

🧱 1. 프로젝트 생성

# 1. 새로운 React 프로젝트 생성
npx create-react-app my-electron-app
cd my-electron-app

# 2. Electron 설치
npm install --save-dev electron concurrently wait-on

concurrently와 wait-on은 React dev 서버 + Electron을 동시에 실행하기 위한 도구입니다.

---

📦 2. 디렉터리 구조

my-electron-app/
├── public/
│   └── index.html
├── src/
│   └── App.js
├── electron/
│   └── main.js        ← Electron 진입점
├── package.json

---

✏️ 3. Electron 메인 프로세스 작성

electron/main.js:

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
    },
  });

  win.loadURL('http://localhost:3000'); // React dev 서버 주소
}

app.whenReady().then(createWindow);

---

🔧 4. package.json 설정 변경

최상위 package.json 수정:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "electron/main.js",
  "scripts": {
    "start": "concurrently \"npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "react-start": "react-scripts start",
    "build": "react-scripts build",
    "electron-build": "electron ."
  },
  ...
}

---

🚀 5. 실행

npm start

→ React 개발 서버가 먼저 실행되고, Electron이 그 주소(http://localhost:3000)를 브라우저 대신 창에 띄웁니다.

---

📦 6. 빌드해서 Electron에 넣기 (프로덕션용)

npm run build

이후 main.js의 win.loadURL을 아래처럼 수정합니다:

win.loadFile(path.join(__dirname, '../build/index.html'));

그리고 실행은:

npm run electron-build

---

🎁 보너스: preload.js 또는 IPC 통신, 메뉴 설정 등도 추가 가능

Electron ↔ React 사이 통신을 하려면 preload.js와 contextBridge, ipcRenderer, ipcMain을 사용합니다.
이건 중급 내용이니 원하시면 다음 단계에서 알려드릴게요.

---

🧪 실습 아이디어

• 버튼 클릭 시 알림 띄우기 (Electron Notification API)
• React로 만든 To-Do 앱을 Electron에 이식
• Tray 아이콘 추가
• 시스템 트레이에서 앱 실행

---

궁금한 점 있으면 말씀해주세요.

“배포는 어떻게 해?”, “타입스크립트도 같이 쓰고 싶어”, “아이콘 넣는 법 알려줘” 같은 추가 요청도 OK입니다!