{"id":38491,"date":"2026-02-01T12:00:44","date_gmt":"2026-02-01T09:00:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/electron-ve-react-arasinda-guvenli-ve-etkili-veri-alisverisi-kapsamli-bir-devlog\/"},"modified":"2026-02-01T12:00:44","modified_gmt":"2026-02-01T09:00:44","slug":"electron-ve-react-arasinda-guvenli-ve-etkili-veri-alisverisi-kapsamli-bir-devlog","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/electron-ve-react-arasinda-guvenli-ve-etkili-veri-alisverisi-kapsamli-bir-devlog\/","title":{"rendered":"Electron ve React Aras\u0131nda G\u00fcvenli ve Etkili Veri Al\u0131\u015fveri\u015fi: Kapsaml\u0131 Bir Devlog"},"content":{"rendered":"

Electron ve React Aras\u0131nda G\u00fcvenli ve Etkili Veri Al\u0131\u015fveri\u015fi: Kapsaml\u0131 Bir Devlog<\/h2>\n

Electron uygulamalar\u0131, modern masa\u00fcst\u00fc uygulamalar\u0131n\u0131n g\u00fcc\u00fcn\u00fc web teknolojilerinin esnekli\u011fiyle birle\u015ftirerek geli\u015ftiricilere benzersiz imkanlar sunar. Bir Electron uygulamas\u0131nda React gibi bir \u00f6n y\u00fcz k\u00fct\u00fcphanesi kullan\u0131ld\u0131\u011f\u0131nda, uygulaman\u0131n ana (main) s\u00fcreci ile React tabanl\u0131 olu\u015fturucu (renderer) s\u00fcreci aras\u0131nda g\u00fcvenli ve verimli bir \u015fekilde veri al\u0131\u015fveri\u015fi yapmak, uygulaman\u0131n performans\u0131 ve g\u00fcvenli\u011fi a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Bu devlog yaz\u0131s\u0131nda, bu iki farkl\u0131 ancak birbiriyle entegre d\u00fcnyan\u0131n nas\u0131l g\u00fcvenli ve etkili bir \u015fekilde ileti\u015fim kurdu\u011funu, temel y\u00f6ntemlerden geli\u015fmi\u015f senaryolara kadar detayl\u0131ca inceleyece\u011fiz.<\/p>\n

1. Electron ve React Mimarisi: Temelleri Anlamak<\/h3>\n

Electron uygulamalar\u0131, Node.js ve Chromium’un birle\u015fimiyle \u00e7al\u0131\u015f\u0131r. Bu yap\u0131, uygulaman\u0131n farkl\u0131 yeteneklere sahip iki ana s\u00fcre\u00e7te i\u015flemesini gerektirir. Veri al\u0131\u015fveri\u015finin nas\u0131l yap\u0131laca\u011f\u0131n\u0131 anlamak i\u00e7in bu s\u00fcre\u00e7lerin rollerini iyi kavramak \u00f6nemlidir.<\/p>\n

Ana S\u00fcre\u00e7 (Main Process) Nedir?<\/h4>\n

Ana s\u00fcre\u00e7, Electron uygulamas\u0131n\u0131n ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r ve Node.js ortam\u0131nda \u00e7al\u0131\u015f\u0131r. \u0130\u015fletim sistemiyle do\u011frudan etkile\u015fime girebilen tek s\u00fcre\u00e7tir. Dosya sistemi eri\u015fimi, veritaban\u0131 ba\u011flant\u0131lar\u0131, sistem bildirimleri, men\u00fc y\u00f6netimi ve pencere olu\u015fturma gibi t\u00fcm sistem d\u00fczeyindeki i\u015flemler ana s\u00fcre\u00e7 taraf\u0131ndan y\u00fcr\u00fct\u00fcl\u00fcr. Her Electron uygulamas\u0131nda yaln\u0131zca bir ana s\u00fcre\u00e7 bulunur.<\/p>\n

Olu\u015fturucu S\u00fcre\u00e7 (Renderer Process) Nedir?<\/h4>\n

Olu\u015fturucu s\u00fcre\u00e7ler, web taray\u0131c\u0131lar\u0131nda \u00e7al\u0131\u015fan sekmeler gibidir. Her bir Electron penceresi kendi olu\u015fturucu s\u00fcrecinde \u00e7al\u0131\u015f\u0131r ve Chromium tabanl\u0131 bir ortam sa\u011flar. React, Vue veya Angular gibi \u00f6n y\u00fcz k\u00fct\u00fcphaneleri bu s\u00fcre\u00e7lerde \u00e7al\u0131\u015f\u0131r ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) olu\u015fturur. Olu\u015fturucu s\u00fcre\u00e7ler, do\u011frudan i\u015fletim sistemi kaynaklar\u0131na eri\u015femezler; bu t\u00fcr i\u015flemler i\u00e7in ana s\u00fcre\u00e7 ile ileti\u015fim kurmalar\u0131 gerekir.<\/p>\n

S\u00fcre\u00e7ler Aras\u0131 \u0130leti\u015fim (IPC) Neden Gerekli?<\/h4>\n

Ana s\u00fcre\u00e7 ve olu\u015fturucu s\u00fcre\u00e7lerin farkl\u0131 yeteneklere sahip olmas\u0131, aralar\u0131nda bir ileti\u015fim k\u00f6pr\u00fcs\u00fc kurulmas\u0131n\u0131 zorunlu k\u0131lar. \u00d6rne\u011fin, React tabanl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc, bir dosya a\u00e7ma d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda dosya sistemine eri\u015fmek i\u00e7in ana s\u00fcre\u00e7ten yard\u0131m istemelidir. Bu iki s\u00fcre\u00e7 aras\u0131ndaki ileti\u015fim, Electron’\u0131n S\u00fcre\u00e7ler Aras\u0131 \u0130leti\u015fim (Inter-Process Communication – IPC) mod\u00fcl\u00fc arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r. IPC, ana ve olu\u015fturucu s\u00fcre\u00e7lerin birbirlerine mesaj g\u00f6ndermesine ve yan\u0131t almas\u0131na olanak tan\u0131r.<\/p>\n

2. Veri Al\u0131\u015fveri\u015fi Neden Karma\u015f\u0131k? G\u00fcvenlik ve Performans<\/h3>\n

IPC, Electron uygulamalar\u0131n\u0131n temel bir bile\u015feni olsa da, bu ileti\u015fim modelini do\u011fru bir \u015fekilde uygulamak, \u00f6zellikle g\u00fcvenlik ve performans a\u00e7\u0131s\u0131ndan baz\u0131 zorluklar\u0131 beraberinde getirir.<\/p>\n

G\u00fcvenlik Endi\u015feleri ve Ba\u011flam \u0130zolasyonu (Context Isolation)<\/h4>\n

Electron uygulamalar\u0131, web teknolojilerini kulland\u0131\u011f\u0131 i\u00e7in web uygulamalar\u0131na \u00f6zg\u00fc g\u00fcvenlik risklerini de ta\u015f\u0131r. \u00d6zellikle olu\u015fturucu s\u00fcrecinde \u00e7al\u0131\u015fan web i\u00e7eri\u011fi, k\u00f6t\u00fc niyetli kodlar (XSS sald\u0131r\u0131lar\u0131) arac\u0131l\u0131\u011f\u0131yla ana s\u00fcre\u00e7teki Node.js API’lerine veya Electron mod\u00fcllerine eri\u015fmeye \u00e7al\u0131\u015fabilir. Bu t\u00fcr sald\u0131r\u0131lar\u0131 \u00f6nlemek i\u00e7in Electron, “Ba\u011flam \u0130zolasyonu” (Context Isolation) \u00f6zelli\u011fini sunar. Ba\u011flam izolasyonu etkinle\u015ftirildi\u011finde, olu\u015fturucu s\u00fcrecinin JavaScript kodu ile Electron’\u0131n dahili API’leri ve preload script’leri aras\u0131nda ayr\u0131 bir JavaScript ba\u011flam\u0131 olu\u015fturulur. Bu, web i\u00e7eri\u011finin do\u011frudan Electron API’lerine veya preload script’ine eri\u015fmesini engeller ve g\u00fcvenli\u011fi art\u0131r\u0131r.<\/p>\n

Performans Etkileri ve B\u00fcy\u00fck Veri Transferi<\/h4>\n

IPC \u00fczerinden veri al\u0131\u015fveri\u015fi yaparken, verinin serile\u015ftirilmesi (g\u00f6nderen tarafta) ve seri olmaktan \u00e7\u0131kar\u0131lmas\u0131 (al\u0131c\u0131 tarafta) gibi ek maliyetler olu\u015fur. \u00d6zellikle b\u00fcy\u00fck veri k\u00fcmeleri veya s\u0131k mesajla\u015fma durumlar\u0131nda bu i\u015flemler performans darbo\u011fazlar\u0131na yol a\u00e7abilir. Bu nedenle, IPC mesaj y\u00fck\u00fcn\u00fc minimumda tutmak ve yaln\u0131zca gerekli veriyi g\u00f6ndermek \u00f6nemlidir.<\/p>\n

Asenkron \u0130leti\u015fimin \u00d6nemi<\/h4>\n

IPC ileti\u015fimi genellikle asenkrondur. Senkron IPC \u00e7a\u011fr\u0131lar\u0131, ana s\u00fcreci veya olu\u015fturucu s\u00fcrecini bloke ederek uygulaman\u0131n donmas\u0131na neden olabilir. Bu nedenle, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131l\u0131\u011f\u0131n\u0131 korumak i\u00e7in asenkron ileti\u015fim y\u00f6ntemlerini tercih etmek ve uzun s\u00fcren i\u015flemleri ana s\u00fcre\u00e7te ayr\u0131 bir i\u015f par\u00e7ac\u0131\u011f\u0131nda (worker thread) y\u00fcr\u00fctmek en iyi uygulamad\u0131r.<\/p>\n

3. Temel \u0130leti\u015fim Y\u00f6ntemleri: ipcMain<\/code> ve ipcRenderer<\/code><\/h3>\n

Electron, ana ve olu\u015fturucu s\u00fcre\u00e7ler aras\u0131nda mesajla\u015fmay\u0131 sa\u011flamak i\u00e7in ipcMain<\/code> ve ipcRenderer<\/code> mod\u00fcllerini kullan\u0131r. Bu mod\u00fcller, olay tabanl\u0131 bir mimariyle \u00e7al\u0131\u015f\u0131r.<\/p>\n

Renderer’dan Main’e Tek Y\u00f6nl\u00fc \u0130leti\u015fim (ipcRenderer.send<\/code>)<\/h4>\n

Olu\u015fturucu s\u00fcrecinden ana s\u00fcrece tek y\u00f6nl\u00fc bir mesaj g\u00f6ndermek i\u00e7in ipcRenderer.send()<\/code> metodu kullan\u0131l\u0131r. Bu, bir olay\u0131 tetiklemek veya ana s\u00fcre\u00e7te bir i\u015flem ba\u015flatmak i\u00e7in idealdir.<\/p>\n

\/\/ Renderer S\u00fcrecinde (React bile\u015feni i\u00e7inde veya preload script'te)\n\/\/ \u00d6rne\u011fin, bir butona t\u0131klan\u0131nca ana s\u00fcrece mesaj g\u00f6nderme\ndocument.getElementById('myButton').addEventListener('click', () => {\n  window.electronAPI.send('asynchronous-message', 'Merhaba Ana S\u00fcre\u00e7!');\n});<\/pre>\n
<\/code><\/p>\n
Ana s\u00fcre\u00e7te bu mesaj\u0131 dinlemek i\u00e7in ipcMain.on()<\/code> metodu kullan\u0131l\u0131r:<\/p>\n
\/\/ Ana S\u00fcre\u00e7te (main.js)\nconst { ipcMain } = require('electron');\n\nipcMain.on('asynchronous-message', (event, arg) => {\n  console.log(arg); \/\/ \u00c7\u0131kt\u0131: Merhaba Ana S\u00fcre\u00e7!\n  \/\/ Ana s\u00fcre\u00e7ten olu\u015fturucuya geri mesaj g\u00f6ndermek i\u00e7in\n  event.sender.send('asynchronous-reply', 'Mesaj\u0131n\u0131 ald\u0131m!');\n});<\/pre>\n
<\/code><\/p>\n
Main'den Renderer'a Tek Y\u00f6nl\u00fc \u0130leti\u015fim (webContents.send<\/code>)<\/h4>\n
Ana s\u00fcre\u00e7ten olu\u015fturucu s\u00fcrece mesaj g\u00f6ndermek i\u00e7in BrowserWindow<\/code> nesnesinin webContents.send()<\/code> metodu kullan\u0131l\u0131r. Bu, ana s\u00fcre\u00e7te ger\u00e7ekle\u015fen bir olay\u0131 (\u00f6rne\u011fin, bir dosya indirme tamamland\u0131\u011f\u0131nda) olu\u015fturucuya bildirmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/\/ Ana S\u00fcre\u00e7te (main.js)\nconst { BrowserWindow } = require('electron');\n\nlet mainWindow; \/\/ Uygulaman\u0131n ana penceresi\n\nfunction createWindow() {\n  mainWindow = new BrowserWindow({ \/* ... *\/ });\n  \/\/ ...\n}\n\n\/\/ Bir s\u00fcre sonra veya bir olay \u00fczerine\nsetTimeout(() => {\n  if (mainWindow) {\n    mainWindow.webContents.send('update-ui', { status: 'Ba\u015far\u0131l\u0131', data: 'Yeni veriler' });\n  }\n}, 3000);<\/pre>\n
<\/code><\/p>\n
Olu\u015fturucu s\u00fcrecinde bu mesaj\u0131 dinlemek i\u00e7in ipcRenderer.on()<\/code> metodu kullan\u0131l\u0131r:<\/p>\n
\/\/ Renderer S\u00fcrecinde (preload script veya React bile\u015feni i\u00e7inde)\nwindow.electronAPI.on('update-ui', (data) => {\n  console.log('UI G\u00fcncellemesi:', data); \/\/ \u00c7\u0131kt\u0131: UI G\u00fcncellemesi: { status: 'Ba\u015far\u0131l\u0131', data: 'Yeni veriler' }\n  \/\/ React state'ini g\u00fcncelleme veya UI elementlerini de\u011fi\u015ftirme\n});<\/pre>\n
<\/code><\/p>\n
\u0130ki Y\u00f6nl\u00fc \u0130leti\u015fim ve Yan\u0131t Bekleme (ipcRenderer.invoke<\/code> \/ ipcMain.handle<\/code>)<\/h4>\n
Electron 9'dan itibaren tan\u0131t\u0131lan ipcRenderer.invoke()<\/code> ve ipcMain.handle()<\/code> metodlar\u0131, olu\u015fturucu s\u00fcrecinden ana s\u00fcrece bir fonksiyon \u00e7a\u011fr\u0131s\u0131 yap\u0131p bir yan\u0131t beklemek i\u00e7in modern ve daha g\u00fcvenli bir yol sunar. Bu, bir API \u00e7a\u011fr\u0131s\u0131 yapar gibi \u00e7al\u0131\u015f\u0131r ve Promise<\/code> tabanl\u0131d\u0131r.<\/p>\n
\/\/ Ana S\u00fcre\u00e7te (main.js)\nipcMain.handle('get-app-version', async (event) => {\n  return '1.0.0'; \/\/ Uygulaman\u0131n versiyonunu d\u00f6nd\u00fcr\n});\n\nipcMain.handle('read-file-content', async (event, filePath) => {\n  const fs = require('fs').promises;\n  try {\n    const content = await fs.readFile(filePath, 'utf8');\n    return content;\n  } catch (error) {\n    console.error('Dosya okuma hatas\u0131:', error);\n    throw new Error('Dosya okunamad\u0131.');\n  }\n});<\/pre>\n
<\/code><\/p>\n
Olu\u015fturucu s\u00fcrecinde bu metodlar\u0131 \u00e7a\u011f\u0131rmak i\u00e7in:<\/p>\n
\/\/ Renderer S\u00fcrecinde (React bile\u015feni i\u00e7inde)\nasync function fetchAppVersion() {\n  try {\n    const version = await window.electronAPI.invoke('get-app-version');\n    console.log('Uygulama Versiyonu:', version); \/\/ \u00c7\u0131kt\u0131: Uygulama Versiyonu: 1.0.0\n  } catch (error) {\n    console.error('Versiyon al\u0131namad\u0131:', error);\n  }\n}\n\nasync function readFile() {\n  try {\n    const filePath = '\/path\/to\/your\/file.txt'; \/\/ \u00d6rnek dosya yolu\n    const content = await window.electronAPI.invoke('read-file-content', filePath);\n    console.log('Dosya \u0130\u00e7eri\u011fi:', content);\n  } catch (error) {\n    console.error('Dosya okuma hatas\u0131:', error.error);\n  }\n}<\/pre>\n
<\/code><\/p>\n
4. Geli\u015fmi\u015f \u0130leti\u015fim Modelleri: Preload Scriptleri ve Context Isolation<\/h3>\n
G\u00fcvenli ve y\u00f6netilebilir bir ileti\u015fim kanal\u0131 olu\u015fturmak i\u00e7in preload script'leri ve contextBridge<\/code> API'si vazge\u00e7ilmezdir.<\/p>\n
Preload Scriptlerinin Rol\u00fc<\/h4>\n
Preload script'i, olu\u015fturucu s\u00fcreci y\u00fcklenmeden \u00f6nce \u00e7al\u0131\u015ft\u0131r\u0131lan bir JavaScript dosyas\u0131d\u0131r. Bu script, Node.js ortam\u0131nda \u00e7al\u0131\u015f\u0131r ve hem Node.js API'lerine hem de Electron API'lerine eri\u015febilir. Ayn\u0131 zamanda, window<\/code> objesi arac\u0131l\u0131\u011f\u0131yla olu\u015fturucu s\u00fcrecinin global kapsam\u0131na da eri\u015febilir. Preload script'lerinin temel amac\u0131, olu\u015fturucu s\u00fcrecine g\u00fcvenli bir \u015fekilde Electron API'leri veya Node.js mod\u00fcllerinden t\u00fcretilmi\u015f i\u015flevler sa\u011flamakt\u0131r.<\/p>\n
Context Isolation ile G\u00fcvenli API Maruziyeti<\/h4>\n
contextBridge<\/code> API'si, preload script'leri ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, olu\u015fturucu s\u00fcrecine belirli i\u015flevleri g\u00fcvenli bir \u015fekilde if\u015fa etmenin anahtar\u0131d\u0131r. contextBridge.exposeInMainWorld()<\/code> metodu, preload script'inde tan\u0131mlanan bir objeyi veya fonksiyonu, olu\u015fturucu s\u00fcrecinin window<\/code> objesine ekler, ancak bunu ayr\u0131 bir ba\u011flamda yapar. Bu, olu\u015fturucu s\u00fcrecindeki k\u00f6t\u00fc niyetli kodun, ana s\u00fcre\u00e7 API'lerine do\u011frudan eri\u015fmesini veya preload script'ini manip\u00fcle etmesini engeller.<\/p>\n
preload.js<\/code> \u00f6rne\u011fi:<\/strong><\/p>\n
const { contextBridge, ipcRenderer } = require('electron');\n\ncontextBridge.exposeInMainWorld('electronAPI', {\n  send: (channel, data) => {\n    \/\/ Sadece izin verilen kanallar\u0131 g\u00f6nder\n    let validChannels = ['asynchronous-message'];\n    if (validChannels.includes(channel)) {\n      ipcRenderer.send(channel, data);\n    }\n  },\n  invoke: (channel, data) => {\n    \/\/ Sadece izin verilen kanallar\u0131 \u00e7a\u011f\u0131r\n    let validChannels = ['get-app-version', 'read-file-content'];\n    if (validChannels.includes(channel)) {\n      return ipcRenderer.invoke(channel, data);\n    }\n  },\n  on: (channel, func) => {\n    \/\/ Sadece izin verilen kanallar\u0131 dinle\n    let validChannels = ['update-ui', 'asynchronous-reply'];\n    if (validChannels.includes(channel)) {\n      \/\/ ipcRenderer.on'dan gelen olay objesini d\u0131\u015far\u0131 s\u0131zd\u0131rmamak i\u00e7in\n      const subscription = (event, ...args) => func(...args);\n      ipcRenderer.on(channel, subscription);\n      return () => ipcRenderer.removeListener(channel, subscription);\n    }\n  }\n});<\/pre>\n
<\/code><\/p>\n
React (Olu\u015fturucu) taraf\u0131nda kullan\u0131m:<\/strong><\/p>\n
import React, { useEffect, useState } from 'react';\n\nfunction App() {\n  const [version, setVersion] = useState('');\n  const [messageFromMain, setMessageFromMain] = useState('');\n\n  useEffect(() => {\n    \/\/ Ana s\u00fcre\u00e7ten gelen mesajlar\u0131 dinle\n    window.electronAPI.on('asynchronous-reply', (message) => {\n      setMessageFromMain(message);\n    });\n\n    \/\/ Ana s\u00fcre\u00e7ten uygulama versiyonunu al\n    window.electronAPI.invoke('get-app-version').then(v => {\n      setVersion(v);\n    });\n\n    return () => {\n      \/\/ Temizleme i\u015flemi (event listener'\u0131 kald\u0131r)\n      \/\/ window.electronAPI.removeListener('asynchronous-reply', handler); \/\/ exposeInMainWorld i\u00e7indeki on metodu bunu y\u00f6netmeli\n    };\n  }, []);\n\n  const sendMessageToMain = () => {\n    window.electronAPI.send('asynchronous-message', 'React\\'tan selamlar!');\n  };\n\n  return (\n    
\n      
Electron React Uygulamas\u0131<\/h1>\n      
Uygulama Versiyonu: {version}<\/p>\n