React Fragments

React Fragmentler, JSX'de birden fazla elementi döndürmenize izin verir. Böylece, birbirine bağlı olan ancak yalnızca bir ana element içine yerleştirilemeyen elemanları döndürmenizi sağlarlar. Bu yazıda, React Fragmentler hakkında detaylı bilgi ve örnekler paylaşacağım.

React Fragmentler Nedir?

React Fragmentler, DOM hiyerarşisinde gerçek bir düğüm olmadan bir grup JSX elementini gruplandırmaya yarayan özel bir React bileşenidir. Fragmentler, aynı zamanda <></> kısayolu ile de kullanılabilir.

Fragmentler, birbirine bağlı olan elemanların bir listesini döndürdüğünüzde özellikle yararlıdır. Örneğin, bir tablo içinde bir dizi <tr> elemanını döndürmek istediğinizde, bunları bir <tbody> elementi içinde gruplandırabilirsiniz. Ancak, <tbody> elementi, gerçek bir düğüm olmadan elemanları gruplayabileceğiniz tek yer değildir. Bu tür durumlarda Fragmentler kullanışlıdır.

React Fragmentleri Nasıl Kullanılır?

React Fragmentleri kullanmak çok kolaydır. React fragments, birkaç farklı şekilde kullanılabilir. İşte bunlardan bazıları:

Empty Fragment

Empty fragment, hiçbir şeyi sarmayan bir fragmenttir. Sadece açılış ve kapanış tagleri kullanılır.

function Example() {
  return (
    <>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </>
  );
}

Bu örnekte, <p> elemanları, <React.Fragment> veya <div> yerine <></> ile sarılmıştır.

Fragment with Key

Fragments, key özelliğini kullanarak bir dizi elemanı gruplamak için kullanılabilir. Bu, birden çok öğeyi içeren bir liste oluşturmak veya yinelemeleri gruplamak için kullanışlıdır.

function Example() {
  const items = ['item1', 'item2', 'item3'];

  return (
    <>
      {items.map(item => (
        <React.Fragment key={item}>
          <li>{item}</li>
        </React.Fragment>
      ))}
    </>
  );
}

Bu örnekte, her öğe için bir key özelliği tanımlanmıştır.

Named Fragment

Fragments aynı zamanda isimlendirilebilir. Bu, daha okunaklı bir kod yazmak için kullanışlı olabilir.

function Example() {
  return (
    <React.Fragment>
      <header>Header</header>
      <main>Main Content</main>
      <footer>Footer</footer>
    </React.Fragment>
  );
}

Bu örnekte, fragment isimlendirilmiştir.

React Fragmentleri Neden Kullanmalısınız?

React Fragmentleri kullanmanın birkaç avantajı vardır:

• Daha temiz JSX: Birden fazla elementi gruplamak istediğinizde, <React.Fragment> kullanarak gereksiz bir DOM düğümünü önleyebilirsiniz. Bu, daha temiz ve daha okunaklı JSX kodu üretir.

• Performans: Ekstra DOM düğümleri, uygulamanızın performansını olumsuz etkileyebilir. React Fragmentleri kullanarak gereksiz düğümleri önleyerek, uygulamanızın performansını iyileştirebilirsiniz.