React’te Veri Üzerinde Döngü Yapmak (Mapping Over Data)

Diyelim ki bir Müşteri Yönetim Sistemi (CRM) için kullanacağımız veriler bir dizi içinde tutuluyor. Örneğin:

const data = [
  {
    id: 'sunita-abc123',
    name: 'Sunita Kumar',
    job: 'Electrical Engineer',
    email: 'sunita.kumar@acme.co',
  },
  {
    id: 'henderson-def456',
    name: 'Henderson G. Sterling II',
    job: 'Receptionist',
    email: 'henderson-the-second@acme.co',
  },
  {
    id: 'aio-ghi789',
    name: 'Aoi Kobayashi',
    job: 'President',
    email: 'kobayashi.aoi@acme.co',
  },
];

Şimdi, bu verilerle her bir kişi için bir ContactCard bileşeni oluşturalım ve ekrana gösterelim.

React’te Döngü Mantığı

Diğer bazı framework’lerde (Vue veya Angular gibi), döngü işlemleri için özel bir sözdizimi bulunur. Örneğin, Vue’da v-for veya Angular’da ngFor kullanılır. Ancak React'te, bu tür döngüler tamamen JavaScript üzerinden yapılır. React, sizin için yeni bir "özel sözdizimi" sunmaz. Bunun yerine, JavaScript'in güçlü metodlarını kullanırız.

React ile Map Kullanımı

React'te, bir dizi elemanını ekrana dökmek için genelde .map() yöntemi kullanılır. Şöyle çalışır:

Diziyi Dönüştürme: Map metodu, dizideki her bir elemanı alır ve istediğiniz yeni bir yapıya dönüştürür.
React Elemanları Üretme: Map ile her bir eleman için bir React bileşeni oluşturabilirsiniz. Örneğin, yukarıdaki data dizisi için, her bir kişi bilgisiyle bir ContactCard bileşeni oluşturabiliriz:

function App() {
  return (
    <ul>
      {data.map((contact) => (
        <ContactCard
          name={contact.name}
          job={contact.job}
          email={contact.email}
        />
      ))}
    </ul>
  );
}

Bu kodda, data.map ile ContactCard bileşenlerini sırasıyla oluşturup bir <ul> içerisine yerleştiriyoruz.

ContactCard Bileşeni

ContactCard bileşeni, kişinin adını, mesleğini ve e-posta adresini gösterecek şekilde basit bir yapı içerir:

function ContactCard({ name, job, email }) {
  return (
    <li className="contact-card">
      <h2>{name}</h2>
      <dl>
        <dt>Job</dt>
        <dd>{job}</dd>
        <dt>Email</dt>
        <dd>{email}</dd>
      </dl>
    </li>
  );
}

export default ContactCard;

React Neden Özel Bir Döngü Sözdizimi Kullanmaz?

React’te döngü işlemleri için özel bir sözdizimi olmamasının temel nedeni, tamamen JavaScript’in gücünü kullanmaya izin vermesidir. React şöyle bir kolaylık sağlar:

Dizi Halinde Bileşen Döndürmek: React, doğrudan bir dizi React elemanı döndürdüğünüzde bunları otomatik olarak işler ve ekrana yansıtır. Örneğin:

return ['Hello', 'World'];

Bu kod, "HelloWorld" şeklinde DOM’a yansır.

React ile Dilimleme veya Alt Küme Gösterimi

Bir diziden sadece belirli bir kısmı göstermek istiyorsanız, .slice() gibi diğer JavaScript metotlarını da rahatlıkla kullanabilirsiniz:

return data.slice(0, 2).map(contact => (
  <ContactCard
    name={contact.name}
    job={contact.job}
    email={contact.email}
  />
));

Yukarıdaki örnekte, sadece ilk iki kişiyi gösteriyoruz.

Parantezler mi Küme Parantezleri mi? (Parentheses vs. Squigglies)

React projelerinde sıklıkla karşılaşılan bir hatayı inceleyelim. Aşağıdaki koda bakalım:
return (
 <ul>
   {data.map((contact) => {
     <ContactCard
       name={contact.name}
       job={contact.job}
       email={contact.email}
     />
   })}
 </ul>
);
Bu kodu çalıştırdığınızda, hiçbir ContactCard ekranda gözükmez. Peki, neden?

Sorunun Kaynağı: return Eksikliği

Kodun çalışmamasının temel nedeni, data.map() fonksiyonunun içinde ContactCard bileşenlerini döndürmememizdir.

React'in elemanları ekrana yansıtabilmesi için, map işlemi sırasında her bir öğenin bir sonuç üretmesi, yani bir değer döndürmesi gerekir. Ancak yukarıdaki örnekte küme parantezleri ({}) kullandığımız için, React otomatik olarak hiçbir şey döndürmediğimizi varsayıyor.

Çözüm: return Kullanmak

Küme parantezleri kullandığınızda, return anahtar kelimesini eklemeniz gerekir. Bu sayede, ContactCard bileşenleri açıkça döndürülür:
return (
 <ul>
   {data.map((contact) => {
     return(
      <ContactCard
       name={contact.name}
       job={contact.job}
       email={contact.email}
      />
     );
   })}
 </ul>
);
Burada, return anahtar kelimesi map fonksiyonunun her döngüsünde bir ContactCard bileşeni döndürmesini sağlar.

Kısa Yazım (Short-Form Syntax)

Eğer kodunuzu daha kısa ve okunabilir yazmak isterseniz, küme parantezlerini tamamen kaldırabilir ve parantez (()) kullanabilirsiniz. Bu durumda, return anahtar kelimesine gerek kalmaz; çünkü tek bir ifade varsa bu ifade otomatik olarak döndürülür:
return (
 <ul>
   {data.map((contact) => (
      <ContactCard
       name={contact.name}
       job={contact.job}
       email={contact.email}
      />
   ))}
 </ul>
);
Bu yazımda küme parantezleri yerine parantez kullandığımız için, React tek bir ifadeyi (burada ContactCard) döndürdüğümüzü anlar. Daha temiz ve okunabilir bir çözüm sunar.

Özet: Ne Zaman Küme Parantezi? Ne Zaman Parantez?

Küme Parantezi {}:

İçinde birden fazla JavaScript ifadesi (örneğin, bir console.log veya başka bir işlem) yazmak istiyorsanız kullanılır.

return anahtar kelimesini yazmanız gerekir.
return (
 <ul>
   {data.map((contact) => {
      console.log(contact.name); // Ek bir işlem yapılıyor
      return(
          <ContactCard
              name={contact.name}
              job={contact.job}
              email={contact.email}
          />
      );
   })}
 </ul>
);
Parantez ():

Tek bir ifade döndürecekseniz, daha kısa ve temiz bir yazım sağlar. return gerekmez.
data.map((contact) => (
 <ContactCard
   name={contact.name}
   job={contact.job}
   email={contact.email}
 />
));

JSX İçinde JS, JS İçinde JSX

React'te bir listeyi döngüyle oluştururken, aşağıdaki gibi bir yapı ile karşılaşmanız oldukça yaygındır:

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

Bu koda baktığımızda ikinci satırda, JSX içinde küme parantezleri kullanarak "düz JavaScript" (vanilla JS) ekliyoruz. Ancak, o JavaScript'in içinde tekrar JSX kullanıyoruz! İlk bakışta kafa karıştırıcı olabilir, ancak bu tamamen geçerli ve doğru bir yazımdır.

Bu Neden Geçerli?

React'in JSX derleyicisi (compiler), bu tür iç içe geçmiş JSX çağrılarını kolayca çözümleyebilir. Arka planda, yukarıdaki kod aslında şu şekle dönüştürülür:

React.createElement(
  'ul', // 'ul' HTML etiketi
  {},   // 'ul' etiketi için herhangi bir özellik yok
  items.map(item => (
    React.createElement(
      'li', // 'li' HTML etiketi
      {},   // 'li' etiketi için herhangi bir özellik yok
      item  // Liste öğesi burada yer alır
    )
  ))
);

Kodu Anlaması Kolaylaştıran Açıklama

Ana Eleman (ul) JSX ile Oluşturulur:
- İlk olarak bir <ul> etiketi oluşturuluyor.
- Bu, listeyi sarmalayacak bir kapsayıcıdır.
JavaScript Döngüsü (map) Kullanılıyor:
- Liste elemanlarını (items) döngüye alıyoruz.
- Her bir öğe için <li> etiketi oluşturuluyor.
JSX İçinde JSX Kullanımı:
- Döngü sırasında her öğe için bir <li> etiketi JSX ile oluşturuluyor.
- JSX derleyicisi bunu JavaScript'e çevirerek her şeyi doğru şekilde işler.

Bu Yapıyı Kullanmaktan Korkmayın

React'te JSX içinde JavaScript, JavaScript içinde JSX kullanmak tamamen doğal bir pratiktir. Bu, React'in gücünden gelir ve size daha dinamik, yeniden kullanılabilir bileşenler oluşturma fırsatı sunar.

Yeni Başlayanlar İçin Örnek

Eğer bu yapıya alışmak isterseniz, basit bir örnekle pratik yapabilirsiniz:

const fruits = ['Elma', 'Armut', 'Muz'];

function App() {
  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li> // Her meyve için bir <li> oluşturuluyor
      ))}
    </ul>
  );
}

Bu örnek, şu sonuca dönüştürülür:

React.createElement(
  'ul',
  {},
  fruits.map(fruit => (
    React.createElement(
      'li',
      { key: fruit },
      fruit
    )
  ))
);

Artık JSX ile JavaScript'in nasıl bir arada çalıştığını anladınız! React ile daha karmaşık projelerde bile bu yapı size güçlü bir esneklik sağlayacaktır. 🚀