React Portals

React Portals, React uygulamalarında DOM hiyerarşisi dışında bir yere render etmek için kullanılan bir araçtır. Portals, React uygulamasının normal hiyerarşisi içinde olmayan bir yere render etmek için kullanılabilir. Bu, birçok senaryoda yararlı olabilir, örneğin, bir modal penceresi açmak veya bir tooltip görüntülemek gibi.

React Portals, DOM ağacında belirli bir noktada olmayan bileşenleri render etmek için kullanılır. Bunu yaparken, bir Portal, DOM ağacında belirli bir yere monte edilen ve bu bileşenin yine de orijinal yerinde görüneceği bir bileşendir. Böylece, Portal bileşeni oluşturduğunuzda, onun içindeki tüm bileşenler belirtilen yere yerleştirilir.

React Portals, özellikle birçok bileşenin üst üste bindiği veya uygulama DOM ağacında işlevsel bir şekilde olmadığı zamanlarda faydalıdır.

Örneğin, bir modal bileşeni oluşturmak istediğinizi varsayalım. Bu modal bileşeni, tüm sayfanın üzerinde belirir ve birkaç z-index değeri ile tüm sayfanın geri kalanından ayrılır. Ancak, bu bileşenin normal hiyerarşide yer alması gereken bir yeri yoktur. Bu nedenle, bir Portal kullanarak modal bileşenini ana DOM ağacından ayrı bir yerde render etmek daha iyi olacaktır.

Şimdi, bir Portal nasıl oluşturulur ve kullanılır örneklerle birlikte inceleyelim.

Modal bileşeni:

Modal bileşenleri, web uygulamalarında sık sık kullanılan bir bileşendir. Aşağıdaki örnek, bir Portal kullanarak modal bileşenini oluşturur.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-overlay" onClick={onClose} />
      <div className="modal-content">{children}</div>
    </div>,
    document.body
  );
};

const App = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      <Modal open={showModal} onClose={() => setShowModal(false)}>
        <h2>Modal Title</h2>
        <p>Modal Content</p>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Yukarıdaki kodda, Modal adında bir bileşen tanımladık. Bu bileşen, open, onClose ve children adında üç özellik alır. open özelliği, modalın açık veya kapalı olup olmadığını belirtir. `onClose onClose özelliği, modalın kapatılması gerektiğinde çalıştırılacak bir fonksiyondur. children özelliği, modal içeriğini içerir.

Modal bileşeni, if (!open) return null satırı ile open özelliği false olduğunda null döndürür ve modal görüntülenmez. Aksi takdirde, ReactDOM.createPortal yöntemi kullanılarak modal, document.body içinde oluşturulan bir Portal'a render edilir.

App bileşeni, showModal adında bir state değişkeni ve setShowModal adında bir state değişkeni atanır. Bu değişkenler, modalın açık veya kapalı olup olmadığını tutar. Modal bileşeni, showModal özelliğini ve onClose fonksiyonunu kullanarak gösterilir.

React Portal'ın avantajlarından bazıları:

1. DOM hiyerarşisindeki yerleşim esnekliği: Portal kullanarak, bir component'i, normal olarak bir component'in render edilemeyeceği bir yere render edebilirsiniz. Örneğin, bir modal component'in body elemanının hemen altında yer alması gerektiği durumlarda, portal kullanarak bunu kolayca sağlayabilirsiniz.

2. CSS kaynaklı problemleri önleme: Portal kullanarak, component'in render edildiği yerdeki CSS özelliklerinden etkilenmeden, istediğiniz CSS özelliklerini kullanabilirsiniz. Böylece, örneğin bir modal component'in z-index'i gibi, başka bir component'in CSS özelliklerinden etkilenmeden, istediğiniz şekilde ayarlanabilir.

3. Performance iyileştirmesi: React Portal, bir component'in parent elementinden ayrı bir DOM node'da render edilmesine olanak sağlar. Böylece, component'in parent elementinin herhangi bir güncelleme yapması gerekmediğinde, bu güncellemeler performansı artırarak gerçekleşir.

4. Kodun daha okunaklı olması: Portal kullanarak, component'in parent elementinden ayrılmış şekilde render edilmesi, kodun daha okunaklı ve yönetilebilir olmasına yardımcı olur.

5. Accessibility geliştirmeleri: Portal kullanarak, component'in render edildiği yerin accessibility özelliklerini kolayca yönetebilirsiniz. Böylece, component'in erişilebilirliği ve kullanılabilirliği artırılabilir.

Bu avantajlar, React Portal'ın React uygulamalarında kullanılması için önemli bir neden olabilir. Ancak, her kullanım senaryosunda dikkatli bir şekilde ele alınmalıdır.