React JS: Render Props Nedir?

React JS: Render Props Nedir?

React.js, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bu kütüphane, bileşen tabanlı bir yapı sunar ve bu bileşenler, kullanıcı arayüzünü oluşturmak için kullanılır.

Bu makalede, React.js’teki “rendering prop” özelliğini anlatacağız.

Bileşenler ve Props

React.js’de, her bileşen, belirli bir görevi yerine getiren, bağımsız bir yapıdır.

Bileşenler genellikle başka bileşenleri içerebilir ve bu şekilde karmaşık kullanıcı arayüzleri oluşturulabilir. Bileşenlere, bilgi iletmek için props (özellikler) kullanılır.

// Örnek bir React bileşeni
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

// Bileşeni kullanma
<MyComponent message="Merhaba, Dünya!" />

Yukarıdaki örnekte, MyComponent adlı bir bileşen oluşturuldu ve bu bileşene message prop’unu ileterek içerik belirlendi.

Bu kullanım teknolojinin en basit şekli ile bilgi aktarımını gösterir. Fakat bazen ihtiyaç duyduğumuzda bir bileşene başka bir bileşeni render etme yeteneği kazandırmak isteyen bir desen veya teknikten faydalanılmak istenebilir.

Bu ihtiyacı çözebilmesi için ise; bir bileşenin içeriğini dinamik olarak değiştirmeye olanak tanıyan Rendering prop özelliği kullanılabilir. Rendering props özelliğinde, bileşen bir fonksiyonu prop olarak alır ve bu fonksiyonu kullanarak içerik oluşturur. Bu bileşenin render işlevini başka bir bileşenle paylaşmasını sağlayan bir deseni ifade eder. Bu desen, bir bileşenin içindeki belirli bir mantığı veya durumu dışarıya aktarmak ve bu mantığı başka bileşenlerle paylaşmak amacıyla kullanılır.

Render props deseni, bir bileşenin render adlı bir prop'u aracılığıyla bir fonksiyon almasını ve bu fonksiyonu kullanarak içeriği oluşturmasını içerir. Bu, parent bileşeni, child bileşenine bir fonksiyon vererek, child bileşenin içeriğini dinamik olarak belirlemesine olanak tanır.

Bu desen, bileşenler arasında mantık paylaşımı ve bileşenlerin daha esnek ve yeniden kullanılabilir olmasını sağlar. Render props deseni, özellikle özelleştirilebilir veya dinamik içerik oluşturmak istediğiniz durumlarda kullanışlıdır.

Bu durum aşağıdaki uygulama ile örneklendirilmiştir.

Öncelikle uygulamada kullanılacak ve veri ihtiyacını karşılayacak JSON dosyası oluşturulur.

[
  {
    "title": "Başlık 1",
    "detail": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
    "type": "underline"
  },
  {
    "title": "Başlık 2",
    "detail": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
    "type": "overline"
  },
  {
    "title": "Başlık 3",
    "detail": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
    "type": "line-through"
  }
]

Sonrasında proje dizininde yer alan, App.js yüklendiğinde gösterilecek Home.js componenti oluşturulur.

//Uygulamada data ihtiyacını karşılayan json dosyası import edilir
import data from "./data.json";
import { TextComponent } from "./TextComponent";

export default function Home() {
  //Json datası bir değişkene atanır.
  const jsonData = data;

  //Data array özellikte olacağından, map fonksiyonu ile dönülür.
  const renderMyComponent = jsonData.map((item, index) => {
    //TextComponent.js isimli component kullanılır.
    return (
      <TextComponent
        key={index}
        title={item.title}
        detail={item.detail}
        type={item.type}
        render={(types, text) => <p onClick={() => alert(types)}>{text}</p>}
      />
    );
  });

  return (
    <div className="App">
      <header className="App-header">
        <h1>Home</h1>
      </header>

      {/* renderMyComponent değişkeninine yüklenen component render edilir.*/}
      {renderMyComponent}
    </div>
  );
}

Home.js componentinden çağrılan ve rendering prop ihtiyacını karşılayacak özelliği sunacak olan TextComponent.js componentini oluşturulur.

export function TextComponent({ title, detail, type, render }) {
  const types = {
    "underline": "underline",
    "overline": "overline",
    "line-through": "line-through",
  }[type];

  return (
    <div
      style={{
        width: "300px",
        alignItems: "center",
        justifyContent: "center",
        margin: "auto",
        marginTop: "10px",
        marginBottom: "10px",
        border: "1px solid #000",
      }}
    >
      <h1>{title}</h1>
      <p style={{ textDecoration: types }}>{render(types, detail)}</p>
    </div>
  );
}

Bu uygulama içerisinde yapılmak istenen, Home.js componentinden JSON dataları için üretilen veri seti, uygun bir çıktı ile çıkarılacakken, üst componentte belirtilen uygulamamızda “type” verisine göre şekillendirilecek ve çıktı buna göre değiştirilecektir.

Bu sayede Home.js üzerinden çağrılan component içerisine, propslar aracılığı ile veri iletilecek, yine propslarda belirtilen bir özelliğe göre çıktı dönüşerek Home.js üzerinde çağrılan componentin render props özelliğinin içerisine gelecektir.