Props

Components dersinde Button component'ini üç kez kullanmıştık, ama üçü de birbirinin aynısıydı. Peki her kullanımda farklı bir metin, farklı bir renk göstermek istersek? Bunun cevabı props. Bu ders, bir component'e dışarıdan veri göndermenin yolunu basit örneklerle anlatıyor.

Props Nedir?

Props (properties), bir component'e dışarıdan veri göndermenin yoludur -- tıpkı bir HTML etiketine attribute vermek gibi (JSX dersindeki "Attribute'lar ve className" bölümünü hatırla), ama burada değer, component fonksiyonuna bir parametre olarak ulaşır.

Parent'tan Child'a Veri Göndermek

Bir component'i kullanırken (yani onu "render" ederken), ona attribute gibi değerler verebilirsin -- bunlar, o component'in props'u olur:

// Props (properties), bir component'e DIŞARIDAN veri göndermenin yoludur --
// tıpkı bir HTML etiketine attribute vermek gibi, ama burada değer, senin
// component fonksiyonuna bir parametre olarak ulaşır.
function Greeting(props) {
  return <h1>Merhaba, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Ayşe" />;
}

console.log(App());
// Sonuç: <h1>Merhaba, Ayşe!</h1>

Burada App, Greeting'i kullanan (yani "parent") component; Greeting ise kullanılan (yani "child") component. name="Ayşe" yazarak, Greeting'e name adında bir prop gönderiyoruz.

Birden Fazla Prop Kullanmak

Bir component'e istediğin kadar prop gönderebilirsin:

// Bir component'e istediğin kadar prop gönderebilirsin -- her biri
// props nesnesinin ayrı bir alanı olarak fonksiyona ulaşır.
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Yaş: {props.age}</p>
      <p>Şehir: {props.city}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Ayşe" age={28} city="İzmir" />;
}

console.log(App());

Her prop, props nesnesinin ayrı bir alanı olarak component'e ulaşır -- props.name, props.age, props.city gibi.

Destructuring ile Props Okumak

Her yerde props.name yazmak yerine, çoğu React kodunda destructuring kullanılır:

// Her yerde "props.name", "props.age" yazmak yerine, çoğu React kodunda
// destructuring kullanılır -- fonksiyon parametresinin içinde, ihtiyacın olan
// alanları doğrudan değişken olarak çıkarırsın. İki örnek de AYNI işi yapar,
// ikincisi yalnızca daha kısa ve daha yaygın kullanılan yazım şekli.

// 1) Destructuring OLMADAN:
function UserCardLong(props) {
  return <p>{props.name} -- {props.age} yaşında</p>;
}

// 2) Destructuring İLE (yaygın kullanılan biçim):
function UserCard({ name, age }) {
  return <p>{name} -- {age} yaşında</p>;
}

console.log(UserCardLong({ name: "Ayşe", age: 28 }));
console.log(UserCard({ name: "Ayşe", age: 28 }));

İki yazım da tamamen aynı işi yapar -- destructuring, yalnızca props. tekrarını ortadan kaldırıp kodu biraz daha kısa yapar. Yaygın kullanılan biçim bu -- ilerleyen derslerde de bunu kullanacağız.

Varsayılan Değerler (Default Props)

Bir prop hiç gönderilmezse ne olur? Destructuring sırasında bir varsayılan değer tanımlayabilirsin:

// Bir prop hiç gönderilmezse ne olsun? Destructuring sırasında bir
// "varsayılan değer" (default value) tanımlayabilirsin -- normal JavaScript
// fonksiyon parametrelerindeki varsayılan değerlerle tamamen aynı fikir.
function Greeting({ name = "Misafir" }) {
  return <h1>Merhaba, {name}!</h1>;
}

console.log(Greeting({ name: "Ayşe" })); // Merhaba, Ayşe!
console.log(Greeting({}));               // Merhaba, Misafir! (varsayılan kullanıldı)

name = "Misafir", normal JavaScript fonksiyon parametrelerindeki varsayılan değerlerle tamamen aynı fikir -- name gönderilmezse, Misafir kullanılır.

Props vs Normal Fonksiyon Parametreleri

Props, aslında sıradan bir fonksiyon parametresinden fazlası değil -- React'in özel bir mekanizması yok burada. Fark yalnızca kullanım şeklinde: normal bir fonksiyonu Greeting({ name: "Ayşe" }) diye çağırırken, bir component'i JSX içinde <Greeting name="Ayşe" /> diye "çağırırsın". Ayrıca önemli bir kural var: props'lar salt okunurdur (read-only) -- bir component, kendisine gelen bir prop'u asla değiştirmemelidir. Veriyi değiştirmek istiyorsan, bunun yolu "state" -- onu State & Events kategorisinde göreceğiz.

Özet ve Terimler Sözlüğü

Props, bir component'e dışarıdan veri göndermenin yoludur. Parent component, child'a attribute gibi değer verir; child bunu props (ya da destructuring ile doğrudan değişken olarak) okur. Bir prop gönderilmezse, varsayılan bir değer tanımlanabilir. Props salt okunurdur.

Terimler Sözlüğü

Props — Bir component'e dışarıdan gönderilen, salt okunur veriler.

Parent Component — Başka bir component'i kullanan (render eden) component.

Child Component — Bir parent component tarafından kullanılan component.

Destructuring — Bir nesnenin alanlarını doğrudan değişken olarak çıkarma söz dizimi ({ name, age } gibi).

Default Prop (Varsayılan Değer) — Bir prop gönderilmediğinde kullanılacak, önceden tanımlanmış değer.