React Props Nedir?

Başlığımızdan da anladığımız üzere bu yazımızda React Props hakkında bir takım bilgiler paylaşacağım.

Öncelikle props kavramına geçmeden önce React’ in ne olduğunu tekrardan hatırlayalım. React, Facebook tarafından geliştirilen kimi geliştiriciler tarafından framework kimi geliştiriciler tarafındanise library olarak kabul gören temelinde JavaScript çalışan bir SPA(Single Page Application) ortamıdır. Tabi ki bu yazımızda baştan sona SPA nedir vb. şeyler gibi konulara değinmeyeceğiz. Evet bu ufak hatırlatmamızı yaptıktan sonra gelelim props nedir?

Nedir Bu React Props?

Props’lar en temelde componentleri kontrol etmemize yarayan componentler arası veri aktarma aşamasında kullandığımız yapıya denir. Evet şuan bu kavram biraz havada kalmış olabilir fakat endişelenmeye hiç gerek yok yazımızın sonunda taşlar yerine oturacaktır.

Şimdi basitçe bir soy ağacı düşünmenizi isteyeceğim. Bir soy ağacında ne vardır, soy ağacının başında anne, baba daha sonra siz ve kardeşleriniz ve sizlerin çocukları. Şuan soy ağacı ile props’un ne alakası var dediğinizi duyar gibiyim fakat merak etmeyin birazdan daha iyi anlayacaksınız.

Gelelim soy ağacımıza, soy ağacımızda anne ve babalarımız bizim ebeveynlerimız(parent) bizde çocuklarımızın(child) ebeveynleri oluyoruz. Nasıl ki biz anne babamızdan genetik miras alıyoruz onların özelliklerini alıyoruz ve çocuklarımızda bizden genetik miras özelliklerimizi alıyorsa. React Props ta aynen böyle işliyor. Evet şimdi biraz daha soy ağacı örneği ilginizi çekmiş olabilir. Hemen aşağıda bir yapı ile bunu sizlere daha açıklayıcı şekilde anlatayım.

React Props Diagram

Evet yukarıda ki görselde bir Parent Componentimiz var tıpkı soy ağacında ki gibi ve buradan name değerinde props’lar alıyoruz ve bu propsları Child Componentlerimizde kullanıyoruz. Öncelikle Parent componentimizi oluşturalım. Anasayfada yorum yapılacak bir yapımızın olduğunu düşünelim.

const App = () => {
  return (
    <div>
      <Comment name="Alex"/>
      <Comment name="Daniel"/>
      <Comment name="David"/>
    </div>
  );
};

Bu yapımızda App adında parent bir componentimiz var içerisinde name değerleri alan Comment adında 3 tane child componentleri mevcut. Gördüğünüz gibi name değeri child componentlerde farklı değerler almış. Evet buraya kadar gayet güzel. Peki child componentlerimizi oluşturup buradaki name değerlerini props ile nasıl aktarıyoruz onu görelim. Hadi gelin Comment adındaki child componentimizi oluşturalım.

const Comment = (props) => {
  return (
    <div>
        <span>{props.name}</span>
    </div>
  );
};

Evet yukarıdaki kod yapısında Comment adında functional componentimizi oluşturduk. Dikkat ederseniz componentimize props adında bir parametre geçtik. Props parametresi ile parent componentimizde bulunan name değerlerine ulaşıp comment componentimizde bunu kullanabildik. Gelin ekranda bu nasıl görünüyor ona bakalım.

React Props Image

Evet gördüğünüz üzere uygulamamızı başlattığımızda props ile aldığımız değerleri görebiliyoruz. Umarım sizler için faydalı bir yazı olmuştur.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.