Şimdi efendim, Vue.js’ten C#’a geçiş yaparken en çok zorlandığım şeylerden biri de bu component’ler arası iletişim meselesiydi. Vue’da her şey daha bir akışkan geliyordu bana, sanki bir nehir gibi akıp gidiyordu her şey. Ama React’e girince işler biraz daha… nasıl desem, daha ‘yapboz’ gibi oldu. Hani elinize bir sürü parça alırsınız ya, onları bir araya getirip büyük resmi oluşturmaya çalışırsınız, işte öyle bir şey. Özellikle de bu ‘Props’ olayı var ya, tam olarak o yapbozun bir parçası gibi. İlk başlarda biraz kafa karıştırıcı gelebilir, hatta kendi programım sınıfta kaldı diyebilirim 🙂
Ama aslında olayın özü çok basit, hani derler ya ‘basit ama etkili’ diye, tam da öyle. Props dediğimiz şey, aslında bir nevi veri taşıma mekanizması. Düşünün ki elinizde bir ana babanız var (parent component) ve bir de çocuğunuz (child component). Ana baba, çocuğuna bir şeyler anlatmak, ona bilgi vermek istiyor. İşte o bilgi paketleri, o ‘props’lar oluyor.
Mesela, bir kullanıcının adını ana component’ten alıp, alt component’te göstermek istediğinizi varsayalım. İşte tam burada props devreye giriyor. Ana component, kendi içindeki veriyi bir paketleyip, ‘al kardeşim bunu kullan’ diyerek çocuğuna gönderiyor. Bu kadar basit.
Peki, bu nasıl oluyor, teknik detaya girelim biraz. Ana component’te, çocuğa göndermek istediğiniz veriyi bir değişkenin içine atarsınız. Sonra çocuğunuzu çağırdığınız yerde, bu değişkeni bir ‘attribute’ gibi çocuğunuza atarsınız. Bu attığınız şey işte ‘prop’ oluyor.
Şimdi gelelim kod örneğine. Diyelim ki bir `UserProfile` component’imiz var ve bu component’in adını ve yaşını başka bir yerden almasını istiyoruz. Hani bazen bir siteye üye olursunuz ya, adınızı soyadınızı girersiniz, sonra o bilgiler başka yerlerde görünür. İşte bu da öyle bir şey.
Önce ana component’imizi oluşturalım. Bu ana component, kullanıcının bilgilerini tutacak:
// AnaComponent.js import React from 'react'; import UserProfile from './UserProfile'; // UserProfile component'ini import ediyoruzfunction App() { const userName = "Ali Veli"; const userAge = 30;
return (
Hoş Geldiniz!
{/* UserProfile component'ini çağırırken props olarak veri gönderiyoruz */} export default App;
Bu `App` component'inde `userName` ve `userAge` adında iki değişkenimiz var. Bunları `UserProfile` component'ini çağırırken `name` ve `age` adıyla gönderiyoruz. Hani derler ya 'anahtar-değer' çifti, işte tam olarak öyle. `name` anahtarına `userName` değerini, `age` anahtarına da `userAge` değerini atıyoruz.
Şimdi de bu `UserProfile` component'inin bu gelen veriyi nasıl kullanacağına bakalım:
// UserProfile.js import React from 'react';function UserProfile(props) { // Gelen props'ları alıyoruz // props objesi içinden istediğimiz veriyi çekebiliyoruz const { name, age } = props;
return (
Kullanıcı Profili
Adı: {name}
Yaşı: {age}
); }export default UserProfile;
Gördüğünüz gibi, `UserProfile` component'i `props` diye bir obje alıyor. Bu objenin içinden `name` ve `age` özelliklerini çekip kullanabiliyoruz. Ne güzel değil mi? Yani ana component'ten gelen veri, alt component'te doğrudan kullanılabiliyor. Bu, component'ler arası iletişimin en temel yolu.
Şimdi gelelim benim en sevdiğim kısma: Yanlış yapınca ne oluyor? 🙂 Diyelim ki `UserProfile` component'inde `props` objesinden `name`'i çekmeyi unuttuk. Ya da yanlış anahtarla çağırdık. Mesela `UserProfile` component'ine `userName` diye göndereceğimize `isim` diye gönderdik:
// Yanlış Kullanım Örneği (App.js'te) // ... Bu durumda ne olur biliyor musunuz? `UserProfile` component'i `name` diye bir prop beklediği için, gelen `isim` prop'unu görmezden gelir. Sonuç olarak, ekranda 'Adı: ' yazısı çıkar ama yanında hiçbir şey görünmez. Çünkü istediği `name` prop'u gelmemiştir. Hani bazen bir yere bir şey yetiştirmeye çalışırsınız ama bir detayı unutursunuz, sonra 'aa niye olmadı?' dersiniz ya, işte tam olarak öyle bir durum. Bu da benim ilk başlarda yaşadığım bir şeydi açıkçası.
Neticede, props'lar veri akışını sağlamak için harika bir yol. Parent'tan child'a doğru tek yönlü bir akış var. Yani çocuğunuz parent'ına doğrudan veri gönderemiyor. Eğer böyle bir şeye ihtiyacınız olursa, callback fonksiyonları gibi başka yöntemlere başvurmanız gerekiyor ama o da başka bir konunun konusu tabii.
Bu arada, bu props meselesi React'in temel taşlarından biri. Bunu iyi anladığınızda, component'lerinizi daha dinamik ve yeniden kullanılabilir hale getirebilirsiniz. Hani bazen bir kod parçacığını farklı yerlerde kullanmak istersiniz ya, işte props bu noktada devreye giriyor. Mesela bir buton component'i yaparsınız, içine `text` prop'u gönderirsiniz, o butonun üzerindeki yazı değişir. Veya bir `Card` component'i yaparsınız, içine `title` ve `description` prop'ları gönderirsiniz, her kart farklı bir içerikle dolabilir. Bu da benim gibi 40 yaşını devirmiş bir geliştiricinin bile hala heyecanlandığı bir şey 🙂
Sonuç olarak, props'lar bir parent component'ten child component'e veri aktarmanın en temel ve en yaygın yolu. Basit bir mantığı var ama doğru kullanıldığında component'lerinizi çok daha esnek hale getiriyor. Hani bir yapbozun parçalarını birleştirmek gibi, her parça kendi görevini yerine getiriyor ve ortaya harika bir bütün çıkıyor. Tabi, ilk başlarda biraz pratik yapmak gerekebilir, ama inanın ki zamanla eliniz alışacaktır.
Geçenlerde bir kamp gezisine çıkmıştık eşimle ve çocuğumla. Akşamları ateş başında otururken aklıma geldi bu props olayı. Dedim ki, bu hayat da bir nevi props gibi değil mi? Anne-baba olarak biz çocuğumuza kendi deneyimlerimizi, bilgilerimizi aktarıyoruz. Tabi bizimki kodlama kadar kesin kurallara bağlı değil, daha çok sevgi, değerler falan filan. Ama sonuçta bir aktarım söz konusu. Bizim çocuklarımız da kendi hayatlarında bu bilgileri kullanarak kendi 'component'lerini oluşturacaklar. Ne güzel değil mi? İşte böyle, bazen en karmaşık teknik konular bile günlük hayattan bir örnekle daha anlaşılır hale geliyor sanırım. Neyse efendim, şimdilik bu kadar. Bir sonraki yazıda görüşmek üzere!