React İle Bileşen Bazlı Bir Modal Pencere Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi uygulamak için bilgisayarınızda güncel bir Node.js sürümünün (v20 veya üzeri önerilir) kurulu olması gerekmektedir. React projenizi oluşturmak için Vite kullanmanızı öneriyoruz, çünkü Vite, 2026 standartlarında en hızlı geliştirme deneyimini sunan araçtır.

• Node.js (LTS sürümü)
• VS Code veya benzeri bir kod editörü
• Temel React bilgisi (Hooks ve Props kullanımı)
• CSS modülleri veya Tailwind CSS (Bu rehberde saf CSS kullanacağız)

Terminalinize aşağıdaki komutu yazarak boş bir React projesi başlatabilirsiniz:

npm create vite@latest modal-projesi -- --template react
cd modal-projesi
npm install
npm run dev

Bu komutlar, projenizi ayağa kaldıracak ve geliştirme sunucusunu başlatacaktır. Artık bileşenlerimizi oluşturmaya başlayabiliriz.

Modal Bileşeninin Temel Yapısını Oluşturma

Modal bileşeni, ana içeriğin üzerinde duran ve genellikle bir "overlay" (kaplama) katmanına sahip olan bir yapıdır. İlk adımda, bileşenin temel iskeletini ve props (özellik) yapısını tanımlayacağız. Modalın açık olup olmadığını kontrol etmek için isOpen ve modalı kapatmak için onClose fonksiyonlarını kullanacağız.

// src/components/Modal.jsx
const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    

      

        Kapat
        {children}
      
    
  );
};

export default Modal;

Burada children prop'u, modalın içine dinamik içerik yerleştirmemize olanak tanır. isOpen kontrolü, bileşenin DOM'dan tamamen kaldırılmasını sağlayarak gereksiz render işlemlerini engeller.

CSS ile Modal Tasarımı ve Konumlandırma

Modalın görsel olarak doğru çalışması için CSS katmanına ihtiyacımız var. Modalın ekranın tam ortasında durması ve arka planın karartılması gerekir. Aşağıdaki CSS kodlarını Modal.css dosyanıza ekleyin.

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  position: relative;
}

Bu CSS kuralları, modalın her zaman ekranın merkezinde kalmasını ve z-index değeri ile diğer içeriklerin üzerinde görünmesini sağlar.

Modal Bileşenini Ana Sayfada Kullanma

Bileşenimizi oluşturduk, şimdi onu App.jsx içerisinde nasıl yöneteceğimizi inceleyelim. Burada useState hook'unu kullanarak modalın durumunu (açık veya kapalı) kontrol edeceğiz.

import { useState } from 'react';
import Modal from './components/Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    

      


React Modal Rehberi
       setIsModalOpen(true)}>Modalı Aç
      
       setIsModalOpen(false)}>
        


Bilgilendirme
        
Bu bir React modal bileşenidir.
      
    
  );
}

Bu adımda, modalı tetikleyen ana buton ve modalın kendisi arasında bir durum yönetimi kurduk. onClose fonksiyonu, modal içindeki kapatma butonuna basıldığında isModalOpen değerini false yaparak modalı kapatır.

React Portals Kullanımı (İleri Seviye)

Modal pencereler, DOM hiyerarşisinde genellikle en üst seviyede bulunmalıdır. React Portals, bir bileşeni DOM ağacında başka bir yere (örneğin document.body) taşımamıza olanak tanır. Bu, CSS çakışmalarını önlemek için en iyi pratiktir.

import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    

      

        X
        {children}
      
    
,
    document.body
  );
};

ReactDOM.createPortal kullanımı sayesinde modal, App bileşeninin içindeki karmaşık CSS yapılarından etkilenmeden doğrudan body etiketinin altına yerleşir.

Modal Yöntemlerinin Karşılaştırılması

Güvenlik Uyarısı: Modal pencerelerde kullanıcıdan alınan verileri işlerken XSS (Cross-Site Scripting) saldırılarına karşı her zaman verileri temizleyin (sanitize). Kullanıcı girdilerini doğrudan HTML olarak render etmeyin.

Sıkça Sorulan Sorular

Modalın dışına tıklandığında kapanmasını nasıl sağlarım?

Modal overlay div'ine bir onClick event'i ekleyerek, tıklanan hedefin event.target değerinin overlay olup olmadığını kontrol edebilirsiniz.

Modal içinde form kullanabilir miyim?

Evet, children prop'u sayesinde modal içine istediğiniz form yapısını, inputları ve butonları yerleştirebilirsiniz.

Birden fazla modalı aynı anda açabilir miyim?

Evet, her modal için ayrı bir useState durumu tutarak veya bir modal yöneticisi (modal manager) kullanarak bunu başarabilirsiniz.

Erişilebilirlik (A11y) için ne yapmalıyım?

Modal açıldığında klavye odağını modala hapsetmek (focus trap) ve ESC tuşu ile kapatma özelliği eklemek, erişilebilirlik standartları için gereklidir.

Modal animasyonları nasıl eklenir?

CSS transition özelliklerini veya framer-motion gibi kütüphaneleri kullanarak modalın giriş ve çıkış animasyonlarını yumuşatabilirsiniz.

Modal Bileşenlerinde Performans Optimizasyonu ve Bellek Yönetimi

Büyük ölçekli React uygulamalarında, modal pencerelerin gereksiz yere render edilmesi veya DOM ağacında sürekli tutulması performans sorunlarına yol açabilir. Özellikle karmaşık formlar veya veri yoğunluklu içerikler içeren modallarda, bileşenin sadece ihtiyaç duyulduğunda yüklenmesi (lazy loading) kritik bir öneme sahiptir.

Performansı artırmak için React.memo ve useCallback kullanarak gereksiz yeniden render işlemlerini engelleyebilirsiniz. Ayrıca, modalın içeriğini bir Suspense sarmalayıcısı ile yüklemek, ana uygulama paketinizin boyutunu küçültecektir.

import React, { lazy, Suspense } from 'react';

const HeavyModalContent = lazy(() => import('./HeavyModalContent'));

const ModalWrapper = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    

      
        
      
    
  );
};

Bellek yönetimi açısından, modal kapandığında içerideki state'lerin temizlendiğinden emin olmalısınız. useEffect kancasını kullanarak modal kapandığında verileri sıfırlayan bir temizleme fonksiyonu tanımlamak, bellek sızıntılarını (memory leaks) önlemek için en iyi pratiktir.

Modal Bileşenleri İçin Birim Testleri (Unit Testing)

Modal bileşenleri, kullanıcı etkileşimi ile doğrudan ilişkili olduğu için test edilmesi gereken en önemli UI parçalarından biridir. Jest ve React Testing Library kullanarak modalın doğru şekilde açılıp kapandığını ve dış tıklamaların (overlay click) tetiklendiğini doğrulayabilirsiniz.

Aşağıdaki örnek, bir modalın ekranda görünürlüğünü ve kapatma butonunun işlevselliğini test eden temel bir yapıyı göstermektedir:

import { render, screen, fireEvent } from '@testing-library/react';
import Modal from './Modal';

test('Modal kapatma butonuna tıklandığında onClose fonksiyonu çalışmalı', () => {
  const handleClose = jest.fn();
  render();
  
  const closeButton = screen.getByRole('button', { name: /kapat/i });
  fireEvent.click(closeButton);
  
  expect(handleClose).toHaveBeenCalledTimes(1);
});

test('Modal kapalıyken içerik DOM üzerinde bulunmamalı', () => {
  render( {}} />);
  const modalElement = screen.queryByText(/modal başlığı/i);
  expect(modalElement).not.toBeInTheDocument();
});

Bu test senaryoları, uygulamanızın gelecekteki güncellemelerinde modal yapısının bozulmadığından emin olmanızı sağlar. Özellikle queryByText kullanarak elementin DOM'dan tamamen kaldırıldığını doğrulamak, Portal yapısının düzgün çalıştığını teyit etmek için önemlidir.

Sonuç

React ile bileşen bazlı bir modal pencere oluşturmak, uygulamanızın kullanıcı deneyimini profesyonel bir seviyeye taşır. Bu rehberde, temel bir modal yapısından başlayarak Portals kullanımına kadar kritik adımları öğrendiniz. Bir sonraki adım olarak, modal bileşeninize framer-motion ile giriş-çıkış animasyonları eklemeyi ve klavye odağını yöneten bir "focus trap" mekanizması kurmayı deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce güvenlik açıklarını (XSS, veri doğrulama) kontrol etmeniz ve projenizin özel ihtiyaçlarına göre test etmeniz tavsiye edilir.