React'ta Bileşenler Nasıl Birleştirilir: Kompozisyon ve Props Tasarımı

Kompozisyon neyi çözer?

React'ta arayüz, küçük bileşenlerin birbirinin içine yerleştirilmesiyle kurulur. Kompozisyon, bir bileşenin başka bileşenleri ya da öğeleri kendi içinde barındırması ve bunu props üzerinden dışarıdan yönetilebilir kılmasıdır. Amaç, her bileşenin tek bir işi üstlenmesi ve farklı ekranlarda yeniden kullanılabilmesidir.

Kompozisyonun karşıtı, her görünüm farkı için yeni bir seçenek ekleyerek şişen tek parça bileşendir. Örneğin bir kart bileşeni başta yalnızca başlık ve metin alırken zamanla görsel, rozet, alt bilgi, tıklanabilirlik ve yükleniyor durumu için de ayrı props kazanır. Her yeni props davranış kombinasyonlarını çoğaltır, test etmek ve okumak zorlaşır. Kompozisyon bu seçenekleri bileşenin içine gömmek yerine çağıran tarafın eline verir.

children ile kap bileşen yazmak

En yalın kompozisyon aracı children prop'udur. Bir JSX etiketinin içine yazdığınız her şey, o bileşene children adıyla gelir. Kap bileşen içeriğin ne olduğunu bilmek zorunda kalmaz, yalnızca çerçeveyi çizer.

function Kart({ baslik, children }) { return ( <section className="kart"> <strong>{baslik}</strong> <div className="kart-govde">{children}</div> </section> ); }

<Kart baslik="Teslimat bilgileri"> <AdresFormu /> </Kart>

Aynı Kart bileşeni artık bir form, bir tablo ya da bir grafik taşıyabilir. Kartın kodu değişmez, değişen yalnızca içine konan içeriktir. Kap bileşenlerin tipik örnekleri sayfa iskeleti, kart, modal penceresi, yan panel ve yetki sarmalayıcılarıdır.

Slot gibi çalışan props

Bir bileşenin birden fazla boşluğu olduğunda tek children yetmez. Bu durumda JSX parçalarını adlandırılmış props olarak geçirirsiniz. React'ta props yalnızca metin ya da sayı değildir, bir öğe de olabilir.

function SayfaBasligi({ baslik, aksiyon, ustYol }) { return ( <header> {ustYol} <strong>{baslik}</strong> {aksiyon} </header> ); }

<SayfaBasligi baslik="Siparişler" ustYol={<ZiyaretYolu />} aksiyon={<Button>Yeni sipariş</Button>} />

Bu desen, bileşene bir boolean ya da metin seçeneği eklemek yerine yerleşimi sabit tutup içeriği çağıran tarafa bırakır. Sayfa başlığı artık aksiyon düğmesinin ne yaptığını, hangi ikonu taşıdığını ya da hiç olup olmadığını bilmez. Aksiyon verilmezse alan kendiliğinden boş kalır.

Dinamik içerik gerektiğinde işlev geçirmek de mümkündür: bileşen kendi içindeki veriyi bir işleve verir, işlev de ne çizileceğine karar verir. Bu yönteme render prop denir. Özel hook'lar çoğu durumda aynı işi daha okunur biçimde yaptığı için önce hook düşünülmelidir.

Props arayüzü nasıl tasarlanır?

İyi bir props listesi kısa, öngörülebilir ve yanlış kullanımı zor olandır. Aşağıdaki ilkeler çoğu bileşen için işe yarar.

• Davranışı değil niyeti adlandırın. Bir düğme için kirmiziRenkli yerine varyant="tehlikeli" demek, tasarım değiştiğinde çağıran kodu bozmaz.
• Birbirini dışlayan boolean'lar yerine tek bir varyant prop'u kullanın. Birincil ve ikincil aynı anda doğru olamıyorsa ikisi ayrı boolean olmamalıdır.
• Varsayılan değerleri parametre listesinde verin. React dokümantasyonuna göre varsayılan yalnızca prop eksikse ya da undefined geçildiyse devreye girer; null geçilirse varsayılan kullanılmaz.
• Olay işleyicilerini on ile başlatın (onKapat, onSec). Bileşenin içinden çağrılan işlevler böylece ayırt edilir.
• Spread sözdizimini ölçülü kullanın. Resmî dokümantasyon, her bileşende kullanılan spread'in bir sorun işareti olduğunu söyler.

Bir props listesi uzamaya başladığında ilk soru, bileşenin birden fazla iş üstlenip üstlenmediğidir. Çoğu zaman çözüm daha fazla props değil, bileşeni daha küçük bileşenlere bölmektir.

State nerede durmalı?

Props bileşene dışarıdan gelir ve bileşen onları değiştiremez; değişecek bir şey varsa state kullanılır. Kompozisyonda sık sorulan soru, state'in hangi bileşende tutulacağıdır.

Birden fazla bileşenin aynı veriye ihtiyacı varsa state, onların en yakın ortak üst bileşenine taşınır ve aşağıya props ile iletilir. Buna state'i yukarı taşımak denir. Örneğin açık olan sekmeyi hem sekme başlıkları hem içerik paneli bilmek zorundaysa, state ikisinin ortak üst bileşeninde durur; başlıklar seçimi bildirmek için bir işlev alır.

Bir bileşen kendi state'ini içeride tutuyorsa kontrolsüz, değeri props ile alıyorsa kontrollü sayılır. Kontrolsüz bileşen kullanması kolaydır ama dışarıdan yönlendirilemez. Kontrollü bileşen daha esnektir ama çağıranın bağlantıyı kurmasını gerektirir. Pratikte iyi tasarlanmış bileşenler ikisini birlikte destekler: varsayılan olarak kendi içinde çalışır, istenirse dışarıdan yönetilir.

State'i gereğinden yukarı taşımak da bir hatadır. Yalnızca bir alt ağacı ilgilendiren geçici bir değer en tepeye çıkarıldığında, her değişiklikte gereksiz yere geniş bir alan yeniden çizilir.

Birlikte çalışan bileşenler: bileşik desen

Sekme, akordeon ve açılır menü gibi parçaları birbirine bağlı bileşenlerde tüm seçenekleri tek bileşenin props'una doldurmak yerine, parçaları ayrı bileşenler olarak sunmak okunaklıdır.

<Sekmeler varsayilan="ozet"> <Sekmeler.Liste> <Sekmeler.Baslik deger="ozet">Özet</Sekmeler.Baslik> <Sekmeler.Baslik deger="detay">Detay</Sekmeler.Baslik> </Sekmeler.Liste> <Sekmeler.Panel deger="ozet">...</Sekmeler.Panel> <Sekmeler.Panel deger="detay">...</Sekmeler.Panel> </Sekmeler>

Parçalar arasındaki ortak durum, en dıştaki bileşende tutulur ve Context ile içerdeki parçalara ulaştırılır. Böylece kullanıcı parçaları istediği sırada ve istediği sarmalayıcıların içinde yerleştirebilir; yerleşim üzerindeki kontrol çağıran tarafta kalır. Bu desen tasarım sistemi kütüphanelerinde çok yaygındır, ancak küçük bir bileşen için fazla ağırdır: birkaç prop yetiyorsa bileşik desene geçmeyin.

Sık yapılan hatalar

Kompozisyon becerisi, ne zaman uygulanmayacağını bilmeyi de içerir.

• Her şeyi erkenden genelleştirmek. Yalnızca bir yerde kullanılan bileşeni onlarca seçenekle donatmak, ihtiyaç doğmadan karmaşıklık getirir. Aynı kalıp ikinci kez ortaya çıkana kadar bekleyip sonra çıkarmak daha sağlıklıdır.
• Prop drilling'den kaçarken Context'i her derde deva yapmak. Birkaç katman props geçirmek çoğu zaman sorun değildir; bileşeni children olarak aşağıya vermek de aynı yükü hafifletir.
• Kalıtımla bileşen türetmeye çalışmak. React'ın önerisi kalıtım değil kompozisyondur: özelleşmiş bileşen, genel bileşeni props ile yapılandırarak çizer.
• Props'u bileşen içinde değiştirmek ya da gelen props'u doğrudan state'e kopyalayıp senkron kaybetmek.
• Bileşen içinde başka bir bileşenin tanımını yapmak. Her çizimde yeni bir bileşen türü oluşur, alt ağaç sıfırdan kurulur ve içindeki state kaybolur.

Bir bileşeni gözden geçirirken kontrol soruları şunlardır: Tek bir işi mi yapıyor? İçeriği dışarıdan alabiliyor mu? Props'ları niyet bildiriyor mu? State en yakın doğru yerde mi?

Mindset programlarında nerede çalışılır?

Bileşen tasarımı, React ile arayüz geliştiren ön yüz geliştiricilerinin ve bu kodu inceleyen takım liderlerinin günlük konusudur. Modern Web Geliştirme, Frontend (React) eğitiminde Bileşen Mimarisi ve Props Sistemi modülü, bileşenleri ve props akışını ilk kez sistematik kuran ekipler için temel çerçeveyi sunar.

React İleri Seviye: Performans ve Durum Yönetimi eğitiminin Durum Yerleştirme ve Bileşen Kompozisyonu modülü ise büyümüş bir kod tabanında state'in nereye konacağı ve bileşenlerin nasıl sadeleştirileceği sorularına odaklanır. Kurumsal ekiplerde ortak bir bileşen kitaplığı yazan ya da kod incelemelerinde aynı tasarım kararlarını tekrar tekrar tartışan gruplar için uygundur.