프로세스 간 IPC 통신
ipcMain과 ipcRenderer를 사용해 메인 프로세스와 React 렌더러 사이에 메시지를 안전하게 주고받습니다.
프로세스 간 IPC 통신은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
ipcMain.handle: 요청-응답 패턴
ipcMain.handle은 렌더러의 요청에 응답하는 이름이 지정된 채널을 메인 프로세스에 등록합니다. 비동기 처리 함수를 받아 실행하며, 해당 함수의 반환값은 렌더러에서 Promise가 해결될 때의 값이 됩니다. 따라서 파일을 읽거나 데이터베이스를 조회하는 작업에 적합합니다.
ipcRenderer.invoke: 메인 프로세스 호출
ipcRenderer.invoke는 이름이 지정된 채널로 메시지를 보내고, 메인 프로세스 처리 함수의 반환값으로 해결되는 Promise를 반환합니다. 이를 통해 프리로드 스크립트와 React 컴포넌트에서 async/await와 자연스럽게 함께 사용할 수 있는 깔끔한 비동기 요청-응답 패턴을 구성할 수 있습니다.
contextBridge를 통한 invoke 노출
프리로드 스크립트는 ipcRenderer.invoke 호출을 감싼 뒤 contextBridge를 통해 노출합니다. 예를 들면 다음과 같습니다. api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath). 렌더러는 window.api.readFile(path)를 호출하고 프로미스를 반환받습니다. 구조가 깔끔하고 샌드박스 환경에서 작동합니다.
렌더러에서 ipcRenderer를 직접 가져오지 않는 이유
contextIsolation이 활성화되면 렌더러 프로세스는 require('electron')을 사용하거나 ipcRenderer를 직접 가져올 수 없습니다. 해당 모듈을 사용할 수 없기 때문입니다. 모든 IPC는 프리로드 스크립트의 contextBridge 노출을 거쳐야 합니다. 이는 XSS 공격이 IPC에 접근하지 못하도록 의도적으로 적용된 방식입니다.
ipcMain.on: 단방향 메시지
ipcMain.on은 ipcRenderer.send로 전송된 단방향 메시지를 수신합니다(invoke와는 다릅니다). 자동 응답 채널은 없으므로, 렌더러가 응답을 받을 필요가 없는 알림이나 명령에 적합합니다. 예를 들어 이벤트를 기록하거나 네이티브 알림을 실행할 때 사용할 수 있습니다.
메인에서 렌더러로 데이터 전송
메인 프로세스는 webContents.send('channel-name', data)를 사용하여 렌더러로 데이터를 전송할 수 있습니다. 이는 메인 프로세스가 통신을 시작할 때 사용하는 기본적인 방법입니다. 예를 들어 파일 시스템 감시 이벤트나 네이티브 메뉴 동작을 React UI로 전달할 수 있습니다.
ipcRenderer.on: 프리로드에서 수신 대기
프리로드 스크립트에서 ipcRenderer.on('update', callback)은 메인 프로세스에서 보내는 푸시 메시지를 수신할 리스너를 등록합니다. 콜백은 이벤트와 메인 프로세스가 보낸 모든 데이터를 전달받으며, 이를 contextBridge로 노출한 함수를 통해 렌더러에 그대로 전달합니다.
contextBridge를 통한 이벤트 리스너 노출
푸시 이벤트를 처리하는 깔끔한 패턴은 다음과 같습니다. api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)). React 컴포넌트는 window.api.onUpdate(setData)를 호출하여 구독하고, 메인 프로세스가 새 데이터를 푸시하면 콜백이 상태를 업데이트합니다.
정리: 이벤트 리스너 제거
메모리 누수와 중복 콜백을 방지하려면 더 이상 필요하지 않은 모든 ipcRenderer.on 리스너를 제거해야 합니다. 프리로드 함수는 정리 함수를 반환해야 합니다(예: () => ipcRenderer.removeListener('update', callback)). React는 이 함수를 useEffect의 정리 반환값에서 호출합니다.
보안: IPC 입력값 검증
렌더러에서 전달된 IPC 입력값은 메인 프로세스의 처리기에서 신뢰할 수 없는 데이터로 취급해야 합니다. 항상 파일 경로를 검증하고(경로 탐색 공격 방지), 쿼리 매개변수를 정제하며, 발신자의 출처가 예상한 것인지 확인해야 합니다. 일반적인 eval 또는 exec IPC 채널은 절대 노출하지 마십시오.
IPC 채널 구조화
앱이 커질수록 네임스페이스 규칙을 사용하여 IPC 채널을 구성하십시오. 예를 들어 'fs:read-file', 'db:query', 'window:minimize'와 같이 이름을 정할 수 있습니다. 오타를 방지하고 리팩터링을 더 안전하게 하려면 채널 이름을 공유 상수 파일에 보관하고 main.js와 프리로드 스크립트에서 모두 가져오십시오.
ipcMain.handle 반환값
ipcMain.handle 처리기가 반환한 값은 어떻게 되나요?
수업 복습
IPC는 Electron 통신의 핵심입니다. ipcMain.handle과 ipcRenderer.invoke는 렌더러에서 시작한 작업을 위한 프라미스 기반 요청-응답 쌍을 구성합니다. 메인 프로세스에서 시작한 푸시에는 webContents.send와 ipcRenderer.on이 함께 사용됩니다. 렌더러의 모든 IPC는 프리로드의 contextBridge를 통해 라우팅해야 하며, 메모리 누수를 방지하려면 리스너를 항상 정리해야 합니다.
AI 튜터와 함께 React을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 88
- 레슨
- 324
자주 묻는 질문
“프로세스 간 IPC 통신” 강의는 무료인가요?
네 — “프로세스 간 IPC 통신” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“프로세스 간 IPC 통신”에서 뭘 배우나요?
ipcMain과 ipcRenderer를 사용해 메인 프로세스와 React 렌더러 사이에 메시지를 안전하게 주고받습니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“프로세스 간 IPC 통신” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.