React.js Liste Render İşlemi – map() ve for()

map() fonksiyonu ile liste render işlemi

React.js’de, “lists rendering” veya “liste render etme” dediğimiz şey, genellikle bir dizi veya liste içinde bulunan öğeleri ekranda görüntülemek için kullanılan bir tekniktir. Bu, genellikle map() fonksiyonuyla gerçekleştirilir. Örneğin, bir dizi içindeki öğeleri alıp her birini bir HTML elemanına dönüştürerek bir liste oluşturabilirsiniz.

import React from 'react';

function ListRenderingExample() {
  // Örnek bir dizi oluşturuyoruz
  const names = ['Alice', 'Bob', 'Charlie', 'David'];

  return (
    <div>
      <h1>Names List</h1>
      <ul>
        {/* names dizisini map fonksiyonu ile dönüyoruz */}
        {names.map((name, index) => (
          // Her bir isim için bir <li> elemanı oluşturuyoruz
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListRenderingExample;

Bu örnekte, names adında bir dizi oluşturduk ve ardından map() fonksiyonunu kullanarak her bir ismi bir <li> elemanına dönüştürdük. Her bir <li> elemanının key özelliğini belirtmek, React’in bu öğeleri etkili bir şekilde takip etmesini sağlar. Bu genellikle her öğenin benzersiz bir kimliğe sahip olması için öğenin dizinini kullanmak anlamına gelir.

Sonuç olarak, bu kod, names dizisindeki her bir ismi içeren bir liste oluşturur ve ekranda görüntüler. Listede herhangi bir değişiklik olduğunda, React, sadece değişen öğeleri güncelleyerek verimli bir şekilde yeniden render eder. Bu, dinamik ve verimli bir liste oluşturmanın yaygın bir yoludur React uygulamalarında.

for() döngüsü ile liste render işlemi

React’ta map() fonksiyonunun yerine bir dizi içindeki öğeleri for döngüsüyle de dönebilirsiniz. Ancak genellikle map() fonksiyonu kullanmak daha yaygın ve tercih edilen bir yöntemdir.

import React from 'react';

function ListRenderingExample() {
  // Örnek bir dizi oluşturuyoruz
  const names = ['Alice', 'Bob', 'Charlie', 'David'];
  const nameItems = [];

  // for döngüsüyle names dizisindeki her bir öğeyi dönüyoruz
  for (let i = 0; i < names.length; i++) {
    // Her bir isim için bir <li> elemanı oluşturup nameItems dizisine ekliyoruz
    nameItems.push(<li key={i}>{names[i]}</li>);
  }

  return (
    <div>
      <h1>Names List</h1>
      <ul>
        {/* nameItems dizisini direkt olarak ekrana yazdırıyoruz */}
        {nameItems}
      </ul>
    </div>
  );
}

export default ListRenderingExample;

Bu örnekte, for döngüsü kullanarak names dizisindeki her bir öğeyi dönüyoruz. Her döngü adımında, isim öğesini alıyoruz ve bir <li> elemanı oluşturup nameItems adında bir diziye ekliyoruz. Sonra bu nameItems dizisini doğrudan JSX içinde kullanarak ekrana yazdırıyoruz.

Ancak, map() fonksiyonu, for döngüsünden daha okunaklı ve genellikle tercih edilir. Bu nedenle, listeleri render etmek için map() fonksiyonunu kullanmak daha yaygın bir pratiktir.

Share on Facebook

Tweet