React Liste Oluşturma

React ile liste oluşturmak için farklı seçenekler bulunur. Bunlar arasında bilenen Html listeleme etiketleri (ul, ol) olduğu gibi farklı olarak DIV etiketi ile de bir liste oluşturulabilir..

Html Etiketleri İle Sabit Bir Liste Oluşturma

Bu yöntem Html ile oluşturulan listeleme ile aynı şeklidedir. Yapılması gereken hangi liste türünün seçileceğine karar vermek ve sonrasında listeyi oluşturmaktır.

Mesela şehir isimlerini listelemek için aşağıdaki gibi bir component yazabiliriz.

import React from 'react';

function SehirListesi() {
    return (
        <ul>
            <li>Ankara</li>
            <li>İstanbul</li>
            <li>Kocaeli</li>
            <li>Bursa</li>
            <li>Konya</li>
        </ul>
    );
}

export default SehirListesi;

Oluşturduğumuz listeyi bir componente dönüştürmek dışında tüm işlemler bir Html listelemesi şeklinde oluşturuldu.

React Dizi İçerisindeki Elemanları Listeleme

Şimdi elimizde bir dizi içerisinde üye isimleri olduğunu varsayalım bunu bir listeye dökmek isteyebiliriz. Bunun için de basit bir component yazacağız. Fakat artık kodumuz biraz daha farklı olacak.

import React from 'react';

function IsimListesi() {
    const isimler = ['Ali', 'Bekir', 'Hasan', 'Nuri', 'Lütfü'];
    return (
        <ul>
            {
                isimler.map((item, index) => <li key={index}>{item}</li>)
            }
        </ul>
    );
}

export default IsimListesi;

Kodumuzu incelediğimizde isimler dizisine sahip olduğumuzu ve bu dizinin map metodunu çağırdığımızı görebilirsiniz.

React map metodunu her dizi elemanını çağırdığında elemanın kendisini ve o elemanın bulunduğu indeks değerini verir. Bunları kullanarak işlem yapıyoruz.

Yaptığımız işlem gelen dizi elemanını bir li etiketi içerisinde göstermekten ibaret. Bunun yanında React performans açısından her liste elemanına bir key probu verilmesini ister. Her elamanın key değeri farklı olmak zorundadır. Bu nedenle dizinin indeks değerini li elemanına key probu olarak geçiyoruz.

Geniş bir uygulama yazıldığında tekil bir anahtar geliştirmek için bir UUID üreten paket kullanılabilir.

React ile bir dizi içerisindeki elemanlar listelenecekse bu durumda map metodu kullanılmalıdır.

React Listeleme İçin Div Kullanma

Listeleme yaparken liste elemanları ( ol, ul gibi) kullanmak yerine DIV etiketi de kullanılabilir. Bu durumda gerek görüldüğünde sitiller ile gerekli ayarlamalar yapılabilir. Burada bir örnek verelim.

import React from 'react';

function Renkler() {
    const renkler = ['Beyaz', 'Siyah', 'Kırmızı', 'Mavi', 'Turuncu'];
    return (
        <ul>
            {
                renkler.map((item, index) => <div key={index}>{item}</div>)
            }
        </ul>
    );
}

export default Renkler;

Örneğimizi çalıştırdığımızda daha önce yaptığımız listelemelere benzer bir sonuç alacağız. Tek farkla liste elemanlarının başında bulunan ikonlar bulunmayacaktır.

React Liteleme Performansı Sorunu

Liste oluşturmak basit gibi görünse de bazı durumlarda performans düşüklüğüne neden olabilir. Bunu engellemek için liste elemanlarına key probu geçmek gereklidir.

Eğer bir liste elemanına tekil bir key probu geçirilmese uygulama çalışsa da uygulama konsolunda aşağıdaki hata görüntülenecektir.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
li
App

Bu React tarafından istenmeyen bir durumdur. Bu nedenle liste elemanlarına key probu vermeye dikkat etmek gereklidir.

Sonuç

React ile listeleme basit bir işlemdir. Eğer bir dizi içersindeki elemanlar listelenecekse map metodu kullanılmalıdır. Dikkat edilecek hususlardan bir tanesi de dizi elamanlarına tekil bir değer içeren key probu girilmesidir.

• React Performans Optimizasyonu yazımızda Rect performan artırma yöntemlerini bulabilirsiniz.
• ReactJS Map Kullanımı yazısında map ile daha ayrıntılı bilgi bulabilirsiniz.
• Javascript UUID / GUID Nasıl Oluşturulur? yazımızda tekil anahtar oluşturmayı inceliyoruz.

React ile listeleme hakkındaki deneyimlerinizi yorumlardan bizlerle paylaşabilirsiniz.