Konfigürasyon Yerine Bileşen Kompozisyonu

Hepimiz o bileşenleri gördük: 20'den fazla prop alan, yarısı opsiyonel olan ve yönetimi tam bir kabusa dönüşen devasa yapılar. Önce title ile başlarsınız, sonra hasIcon gelir, ardından iconPosition... Bir bakmışsınız JSX'inizin içi if/else labirentine dönmüş.

"Prop Çorbası" Problemi

Bileşene eklediğiniz her yeni prop, karmaşıklığı katlayarak artırır:

• 🐜 Kombinasyon Patlaması: 10 tane boolean prop, test edilmesi gereken 1.024 farklı durum demektir.

• 🐜 Sızdıran Soyutlamalar: Bileşeniniz, aslında bilmemesi gereken detaylarla ilgilenmeye başlar.

• 🐜 Katılık (Rigidity): Bir alt başlık mı eklemek istiyorsunuz? Şimdi bir subTitle ve bir de subTitleStyle prop'una ihtiyacınız var.

Çözüm: Atomik Kompozisyon

Gelecekteki her kullanım durumunu prop'larla tahmin etmeye çalışmak yerine, bileşeni kullanan geliştiriciye özgürlüğünü geri verin.

❌ Konfigürasyon Yaklaşımı (Katı)

TypeScript

<Card 
  title="Proje Alfa"
  showIcon={true}
  footerText="Aktif"
  variant="dark"
/>

✅ Kompozisyon Yaklaşımı (Esnek)

TypeScript

<Card variant="dark">
  <Card.Header>
    <Icon name="zap" />
    <h2>Proje Alfa</h2>
  </Card.Header>
  <Card.Body>...</Card.Body>
  <Card.Footer>
    <Badge status="aktif" />
  </Card.Footer>
</Card>

Kompozisyon Neden Kazanır?

1. Kontrolün Tersine Çevrilmesi (Inversion of Control): Yapıya bileşeni yazan değil, kullanan karar verir.

2. Azaltılmış Yüzey Alanı: Ana bileşeniniz sadece mantığı/state'i yönetir; yerleşim (layout) alt bileşenlere bırakılır.

3. Elveda Prop Drilling: Bir font boyutunu değiştirmek için 3 katman derine titleClassName taşımanıza gerek kalmaz.

Ne Zaman Prop Kullanmalı?

Prop'lar durum (state) ve kimlik içindir; yapı için değil.

• 🐜 Prop Kullanın: size, color, isDisabled, onClick.

• 🐜 Kompozisyon Kullanın: Yerleşim, iç içe geçme ve karmaşık iç yapılar.

Sonuç

Bileşenlerinizi önceden monte edilmiş makineler olarak değil, LEGO parçaları olarak düşünün. Bir makinenin ayarları sınırlıdır; parçalardan ise her şeyi yapabilirsiniz. Parça üretin.