React Props Nedir?

React uygulamalarında, “bileşenler” (components) bir araya gelerek kullanıcıların gördüğü arayüzü oluşturur. Bu bileşenler arasında iletişim kurabilmek, daha dinamik ve esnek bir yapı sağlamak için önemlidir. İşte burada props devreye girer.

React’ta props, bileşenler arasında bilgi aktarımını sağlamak için kullanılır. Bir bileşenden diğerine, yani bir üst bileşenden bir alt bileşene doğru bilgi akışı oluşturur. Bu bilgi akışı; yukarıdan aşağıya, “parent” (ebeveyn) bileşenden “child” (çocuk) bileşene olmak üzere her zaman tek yönlüdür.

Props ile Yapabilecekleriniz

1. Bilgi Aktarma ve Görüntüleme
   Bir bileşene bilgi göndererek bu bilgiyi ekranda gösterebilirsiniz.
2. Koşullu Yapılar Oluşturma
   Aktarılan bilgilere göre farklı içerikler veya stiller oluşturabilirsiniz.
3. Olay Yöneticileri Tanımlama
   Bir bileşende tanımlanan olayları başka bileşenlere aktarabilir ve bu olayları tetikleyebilirsiniz.
4. Alt Bileşenlerle Çalışma
   Bir bileşenin içinde başka bileşenleri dinamik bir şekilde yönetebilirsiniz.
5. Varsayılan Değerler Atama
   Eğer bir prop gönderilmezse, bileşenin varsayılan bir değer kullanmasını sağlayabilirsiniz.

Her React bileşeninin sahip olduğu bir özellik olan props, bileşenin bilgilerini tutan bir nesnedir. Props, bileşenlerin daha dinamik hale gelmesine ve belirli davranışlar sergilemesine olanak tanır.

HTML öğelerine bilgi aktarmayı düşündüğünüzde, aslında props’un nasıl çalıştığını anlamaya bir adım yaklaşmış olursunuz. Örneğin, bir HTML button etiketi üzerinden bilgi aktarımını ele alalım:

<button type="submit" value="Gönder">Gönder</button>

Bu örneğimizde, button etiketi, type ve value olmak üzere iki bilgi almıştır. Buradaki type özelliği, butonun bir formdaki davranışını belirlerken, value değeri butonun neyi temsil ettiğini ifade eder. React bileşenlerine bilgi aktarmak da buna benzer şekilde işler. Kendi bileşenlerinizde, belirli özellikler ve davranışlar tanımlamak için props kullanabilirsiniz.

Props ile Bileşenlere Bilgi Aktarma

React’ta props, fonksiyona gönderilen argümanlar gibi çalışır. Bir bileşenin props nesnesine erişmek için, bu nesneyi ve ilgili özelliğini “nokta notasyonu” (dot notation) ile çağırabilirsiniz. Örneğin:

function Hosgeldin(props) {
  return <h1>Merhaba, {props.isim}!</h1>;
}

function App() {
  return (
    <div>
      <Hosgeldin isim="Ali" />
      <Hosgeldin isim="Ayşe" />
    </div>
  );
}

Bu kodda, Hosgeldin bileşeni dışarıdan bir isim bilgisi alıyor ve bu bilgiyi ekranda gösteriyor. props.isim ifadesi, props nesnesindeki isim özelliğine erişiyor.

Props, bileşenlerin aynı yapıyı koruyarak farklı bilgilerle çalışmasını sağlar. Yukarıdaki örneğimizde fark ettiyswniz Hosgeldin bileşeni iki farklı isimle çağrılıyor ancak bileşenin yapısı değişmemektedir. Bu da kodun tekrar kullanılabilirliğini artırır ve esnekliğini sağlamaktadır.

Props, bir liste gibi tekrarlayan yapılar oluştururken de oldukça faydalıdır. Örneğin:

function ListeElemani(props) {
  return <li>{props.icerik}</li>;
}

function Liste() {
  return (
    <ul>
      <ListeElemani icerik="Elma" />
      <ListeElemani icerik="Armut" />
      <ListeElemani icerik="Kiraz" />
    </ul>
  );
}

Burada her bir ListeElemani, farklı bir içerik alıyor ve aynı yapıyı koruyarak listede gösteriliyor.

Props Nasıl Gönderilir?

Bir bileşene props göndermek, ona bir özellik eklemek kadar kolaydır. Bu sayede bileşenler daha dinamik bir şekilde davranabilir ve farklı içerikler gösterebilir.

Bir bileşene bilgi göndermek için tek yapmanız gereken, bileşeni kullanırken bir attribute eklemektir. Örneğin:

<Selamlama isim="Merve" />

Burada Selamlama bileşenine bir isim bilgisi gönderiliyor. Bu bilgi, bileşenin içindeki props nesnesinde saklanır ve kullanılabilir hale gelir.

Props, aşağıdaki gibi birçok veri türünde olabilir:

• Sayı (Number)
• Metin (String)
• Fonksiyon (Function)
• Nesne (Object)

❗️Eğer bir değer string dışında bir veri türündeyse, o değeri süslü parantezler içinde göndermek gerekir.

<Selamlama isim="Merve" />
<Kart numara={7} />
<Ayar aktif={true} />
<Kisiler liste={["Ahmet", "Ayşe", "Zeynep"]} />

Birden Fazla Props Gönderimi

Bir bileşene birden fazla bilgi aktarabilirsiniz. Her bir bilgi için ayrı bir özellik eklemek yeterlidir. Örneğin:

<Profil ad="Ali" yas={30} sehir="İstanbul" aktif={true} />

Yukarıdaki örnekte, Profil bileşeni; ad, yas, sehir ve aktif olmak üzere dört farklı bilgi almıştır.

Aşağıdaki örnek, props kullanarak mesaj görüntüleyen bileşeni göstermektedir:

function Mesaj({ yazar, icerik }) {
  return (
    <div>
      <h3>{yazar}</h3>
      <p>{icerik}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Mesaj yazar="Merve" icerik="React öğrenmek harika!" />
      <Mesaj yazar="Ali" icerik="Props gerçekten işlevsel!" />
    </div>
  );
}

Bu örnekte, Mesaj bileşeni her seferinde farklı bir yazar ve içerik bilgisi ile çağrılarak özelleştirilmektedir.

Props Nesnesini Kullanma

Bir fonksiyon bileşeninin props nesnesini kullanabilmesi için, bileşenin parametresi olarak props tanımlanmalıdır. Örneğin:

function Buton(props) {
  return <button>{props.metin}</button>;
}

Bu kodda Buton bileşeni, dışarıdan bir metin bilgisi alıyor ve bu bilgiyi butonun içinde görüntülüyor. props.metin, props nesnesindeki metin özelliğini temsil eder. Aşağıdaki örneği inceleyiniz:

Eh, props nesnesi bir JavaScript nesnesi olduğu için, “destructuring” ile yalnızca gerekli bilgileri çıkararak daha sade bir yazım elde edebilirsiniz. Bakınız:

function Buton({ metin }) {
  return <button>{metin}</button>;
}

Bu yöntemde props yerine doğrudan metin adıyla bilgiye erişilir. Kod daha temiz bir görünüme kavuşur.

Props kullanarak farklı bilgilerle çalışan bir bileşen oluşturabilirsiniz. Aşağıda her bir butona farklı bir metin atanmıştır:

Görüleceği üzere Buton bileşeni, dışarıdan gelen metin bilgisine göre farklı bir görünüm sunmaktadır.

Parent ve Child İlişkisi

React’ta props, parent bileşenden child bileşene bilgi aktarmak için kullanılır. Alt bileşenler, kendilerine gönderilen props’ları okuyabilir ancak üzerinde değişiklik yapamaz. Aşağıdaki örneği inceleyiniz:

❗️ Props, alt bileşenlerde değiştirilemez. Eğer bir bileşenin farklı değerlere ihtiyacı varsa üst bileşen bu değerleri günceller ve yeniden gönderir.

Props ile Karar Alma

Bir bileşen, props kullanarak hangi içeriğin ekranda görüneceğini belirleyebilir. Örneğin:

function GirisMesaji(props) {
  if (props.sifre === 'guclu-sifre') {
    return <h2>Giriş Başarılı.</h2>;
  } else {
    return <h2>Giriş Başarısız.</h2>;
  }
}

Bu örnekte, bileşene gönderilen sifre bilgisi değerlendirilir. Eğer sifre değeri “guclu-sifre” ile eşleşiyorsa, “Giriş Başarılı” mesajı görüntülenir. Aksi halde “Giriş Başarısız” mesajı gösterilir.

Gönderilen props ekranda doğrudan görüntülenmek yerine, bileşenin davranışını ve çıktılarını etkileyebilir. Yukarıdaki örnekte olduğu gibi, props sadece karar mekanizmasında bir araç olarak kullanılır. Şifre ekranda hiç gösterilmeden, doğruluk durumu üzerinden bir mesaj oluşturulur. Örneği canlandıralım:

Bu tür bir yaklaşım, bileşenlerin daha dinamik ve duruma duyarlı olmasını sağlar. Kullanıcıdan alınan veriler, API sonuçları veya başka bir kaynaktan gelen bilgiler değerlendirilerek arayüz özelleştirilebilir.

Olay Yöneticisini Bir Bileşene Props Olarak Gönderme

Olay yöneticileri, başka bir bileşene props olarak da aktarılabilir. Bu sayede, olay yöneticisi bir bileşende tanımlanır, ancak bir başka bileşende çağrılır. Örneğin:

function UstBilesen() {
  function mesajGoster() {
    alert("Tebrikler, olay tetiklendi!");
  }

  return <AltBilesen olay={mesajGoster} />;
}

function AltBilesen({ olay }) {
  return <button onClick={olay}>Olayı Tetikle</button>;
}

Bu kodda, mesajGoster adlı olay yöneticisi UstBilesen içinde tanımlandı. AltBilesen bileşenine props olarak gönderildi ve kullanıcı düğmeye tıkladığında bu olay tetiklendi.

React’ta olay yöneticilerini tanımlarken ve props olarak aktarırken adlandırma oldukça önemlidir. Olay yöneticilerinin ve props’ların doğru şekilde adlandırılması, kodun daha okunabilir ve anlaşılır olmasını sağlar.

Olay yöneticilerini props olarak aktarırken iki adlandırma yapılır:

1. Olay yöneticisinin adı
   Bileşen içinde tanımlanan fonksiyonun adıdır. Örneğin, bir tıklama olayını yönetmek için handleClick gibi bir ad tercih edilir.
2. Props adı
   Olay yöneticisinin başka bir bileşene aktarılacağı props’ın adıdır. Bu ad, genellikle on ile başlar ve olay türünü belirtir, örneğin onClick.

Adlandırma Konvansiyonu

Olay yöneticisinin adında “handle” kelimesi, props adında ise “on” kelimesi kullanılır. Örneğin:

• Tıklama olayları için:
  Olay yöneticisi adı: handleClick
  Props adı: onClick
• Hover olayları için:
  Olay yöneticisi adı: handleHover
  Props adı: onHover

Bu konvansiyon, olay yöneticisinin hangi olayı dinlediğini ve hangi props’ın bu olayı tetiklediğini kolayca anlamayı sağlar. Örneğin:

function AnaBilesen() {
  function handleClick() {
    alert("Butona tıklandı!");
  }

  return <CocukBilesen onClick={handleClick} />;
}

function CocukBilesen({ onClick }) {
  return <button onClick={onClick}>Tıkla</button>;
}

Burada:

• AnaBilesen içinde olay yöneticisi handleClick olarak adlandırıldı.
• CocukBilesen bileşenine olay yöneticisi onClick adıyla props olarak gönderildi.

Adlandırma konvansiyonu, olay yöneticisinin görevini ve props’ın işlevini net bir şekilde ifade eder. Bu yaklaşım, özellikle büyük projelerde kodun okunabilirliğini ve bakımını kolaylaştırır. Yani demem o ki; React’ta olay yöneticileri ve props için adlandırma yaparken:

• Olay yöneticisinin adı, “handle” ile başlar ve olay türünü belirtir.
• Props adı, “on” ile başlar ve olay türünü belirtir.

Bu adlandırma yöntemi, kodun daha düzenli ve anlaşılır olmasını sağlar, siz de böyle yapın.

props.children

Fark ettiyseniz React bileşenlerini kendi kendine kapanan etiketler şeklinde yazdık hep, örneğin:

<MyFunctionComponent />

Ancak, bileşenler yalnızca bu şekilde kullanılmak zorunda değil. Pekala, açılış ve kapanış etiketleriyle yazılabilir:

<MyFunctionComponent></MyFunctionComponent>

Bu durumda, bileşenin açılış ve kapanış etiketleri arasına yazılan her şey, props.children aracılığıyla bileşen içinde kullanılabilir. props.children, bu içeriği alır ve bileşenin içerisinde istediğiniz şekilde yerleştirmenize veya işlemenize olanak tanır.

function Konteyner(props) {
  return <div className="konteyner">{props.children}</div>;
}

function App() {
  return (
    <Konteyner>
      <h1>Başlık</h1>
      <p>Bir açıklama paragrafı.</p>
    </Konteyner>
  );
}

• Konteyner bileşeni, içine yerleştirilen içeriği (h1 ve p) props.children ile alır.
• Bu içerik, Konteyner bileşeninin belirlediği dış yapının içinde gösterilir.

❗️ Eğer bir bileşenin açılış ve kapanış etiketleri arasına birden fazla içerik (çocuk) yerleştirilirse, props.children bu çocukları bir dizi (array) olarak döner. Ancak, bileşen yalnızca tek bir çocuk içeriyorsa, props.children bu tek çocuğu, bir dizi içine sarmadan direkt olarak döner.

Varsayılan Değerler Tanımlama Yöntemleri

React bileşenlerinde, props için varsayılan değerler tanımlanabilir. Eğer bileşene bir prop gönderilmezse, bu varsayılan değerler kullanılır. Props için varsayılan değerleri tanımlamanın üç farklı yöntemi vardır:

1. defaultProps Kullanımı

Bir bileşen için varsayılan değerleri tanımlamak amacıyla defaultProps özelliği kullanılabilir. Bu özellik, bileşen dışına eklenir:

function Ornek(props) {
  return <h1>{props.metin}</h1>;
}

Ornek.defaultProps = {
  metin: "Varsayılan metin",
};

Eğer bileşene bir metin prop’u gönderilmezse, “Varsayılan metin” ekrana yazılır.

2. Fonksiyon Tanımında Varsayılan Değer

Varsayılan değer, fonksiyon bileşeninin parametresinde doğrudan tanımlanabilir:

function Ornek({ metin = "Varsayılan metin" }) {
  return <h1>{metin}</h1>;
}

3. Fonksiyon Gövdesinde Varsayılan Değer

Varsayılan değer, fonksiyonun gövdesinde tanımlanabilir. Bu yöntem, “destructuring” kullanılarak gerçekleştirilir:

function Ornek(props) {
  const { metin = "Varsayılan metin" } = props;
  return <h1>{metin}</h1>;
}

Aşağıdaki örneği inceleyiniz: