React JS Props Kullanımı

ReactJS Props nedir sorusuna cevap aramadan önce, kısaca veri ve verilerin farklı yerlere aktarılması ihtiyacından bahsetmek gerekiyor.

Bir arayüz geliştirirken, çok farklı bölümler oluşturmak zorundayız. Bu bölümleri bir bileşen (komponent) olarak oluşturuyoruz. Yapısı gerepi komponentler iç içe geçiyor ve çoğu durumda bizim hazırladığımız komponentin içerisinde bir veri kullanmak zorundayız.

Mesela sayfamızın bir bölümünde hoşgeldin mesajı vermek isteyebiliriz. Bu bölümü bir komponent olarak tasarladıktan sonra o bölümde özelliştirilmiş bir mesaj vermek için o bölüme kullanıcı / üye adını iletmek durumundayız. Sadece Hoşgeldiniz şeklinde bir mesaj yerine mesela Selami hoşgeldin demek daha güzel duracaktır.

Peki kullanıcı ismini komponente nasıl geçireceğiz? Bu sorudan sonra props nedir sorusuna geçelim.

React Props Nedir?

React bileşene veri aktarmak için kullandığımız özelliklerin (prop) tamamını tutan nesyene (obje) props denir. Bir komponente bir veya daha fazla özellik (property – prop) ekleyebiliriz ve bu özelliklere komponent içerisinden tek tek props nesnesi üzerinden ulaşabiliriz. Bu proplar sabittirler sadece okunabilir ve değerleri değiştirilemez.

React JS Props Kullanımı

Şimdi yukarıda bahsettiğimiz hoşgelsiniz mesajı için bir komponent yazalım.

function Hosgeldin(props) {
    return (
        <h1>{props.isim} Hoşgeldin</h1>
    );
}

function App() {
    return (
        <Hosgeldin isim='Selami' />
    );
}

Bu örneğimizde iki komponent kullandık. App ve Hosgeldin isminde olan bu iki bileşenden App içerisinde Hoşgeldin bileşenini kullanıyoruz. Hoşgeldin bileşeni isim adında bir prop (bir özellik) alıyor.

<Hosgeldin isim='Selami' />

Bu proba bir değer atıyoruz, Selami. Atadığımız isim, Hosgeldin komponetine bir parametre olarak gidiyor. Çünkü bir komponent aslında JavaScript fonskiyonudur. Bunu Hosgeldin komponentinde karşılıyoruz.

function Hosgeldin(props)

Burada parametreyi direkt olarak isim olarak fonsiyona geçmiyor. Bunun yerine props isminde bir nesne olarak Hosgeldin fonksiyonuna geçiyor. Sonrada hoşgeldin fonksiyonu içerisinde props.isim olarak kullanıyoruz.

<h1>{props.isim}</h1>

Çok kolay oldu. Peki birden fazla özelliğimiz olsaydı. Mesela ürün sepetinde seçilen ürünleri isim, fiyat ve adet olarak listelemek isteseydik. Bu durumda bir Sepet komponentimiz ve birde sepet içerisinde gösterilecek ürün listesinde kullanılacak Urun komponentimiz olsun. Sepet içerisinde ürünler listesini oluşturacağız ve her ürün için Urun bileşenini çağıracağız. Yazmaya başlayalım.

function Urun(props) {
    return (
        <li>{props.isim} - {props.adet} - {props.fiyat} tl</li>
    );
}

function Sepet() {
    const urunler = [
        {
            isim: 'Klavye',
            adet: 1,
            fiyat: 235
        },
        {
            isim: 'Mouse',
            adet: 1,
            fiyat: 99
        },
        {
            isim: 'Mouse Pad',
            adet: 2,
            fiyat: 49
        }
    ];

    return (
        <div>
            <h2>Sepetteki Ürünler</h2>
            <ul>
                {
                    urunler.map((urun, index) => <Urun key={index} 
                        isim={urun.isim} 
                        adet={urun.adet} 
                        fiyat={urun.fiyat} />)
                }
        </div>
    );
}

Şimdi sırasıyla kodlarımızı inceleyelim. İlk olarak Urun komponentine bakalım. Basit bir komponent, yaptığı iş, sadece kendisine verilen isim, adet ve fiyat bilgilerini props üzerinden almak ve ürün listesi için li etiketi içerisinde ürün bilgisini düzenlemek. Bilgileri props üzerinden okuduğumu için props.isim, props.adet ve props.fiyat olarak üç bilgiyi de kolayca alıyoruz.

Sepet komponentimizde ürün listesini tutuğumuz urunler değişkenimiz var. Bu değişkenin içerisindeki ürünleri maplıyoruz. Böylece her ürüne kolaylıkla ulaşıyoruz. Aldığımız ürün bilgilerini de prop olarak Urun bileşine gönderiyoruz.

    {
        urunler.map((urun, index) => <Urun key={index} 
            isim={urun.isim} 
            adet={urun.adet} 
            fiyat={urun.fiyat} />)
    }

Not: key probu listeleme yapılırken listenin daha rahat kontrol edilmesi için React tarafından istenmektedir.

Gelen özellik bilgilerini yine props yardımı ile kolaylıkla alıyoruz.

Sonuç

React ile geliştirme yaparken komponentlere veri aktarmak için propları kullanıyoruz. Proplar birer değişken gibi kullanılırken, proplara ilgili komponent üzerinden props nesnesi ile ulaşıyoruz. props bir JavaScript nesnesidir ve içerisinde prop isim ve değerlerini tutar.

Sormak istedikleriniz veya eklemek istedikleriniz varsa lütfen bize yorumlar bölümünden ulaşınız.