Props, PropsTypes ve Default Props

- Propslar bir komponentten başka bir komponente aktarım yapılmasını sağlayan , React’in sağladığı bir özelliktir.
- Propslar sayesinde bir komponentten başka bir komponente veri aktarımı kolaylıkla yapılabilmektedir.
- Yardımcı komponentin özellikleri , komponent başlatıldığı zaman ana komponent üzerine geçirilebilmektedir.
- Propsların kullanımı oldukça kolaydır.
Not (Ekleme) : Propslar; Javascript’in Typesafe bir dil olmaması sonucu oluşan bir gereksinimdir.
Örneklendirecek olursak ;
Navbar.js , User.js ve App.js olmak üzere üç tane komponentimiz olsun. Bunlardan App.js ‘yi ana komponentimiz, Navbar.js ve User.js’yi yardımcı komponentler olarak düşünelim.
Navbar.js içerisindeki fonksiyonun içerisine otomatik olarak “props” gönderilebilir. “props” bir obje olduğu için ; birden fazla key gönderilerek başka bir komponente geçişi sağlanabilecektir. Aşağıda görüldüğü gibi bu işlem yapılırken ; Javascript Expression kullanılmaktadır. Gönderilecek olan key hangisi ise aşağıdaki gibi gönderim gerçekleşir.

App.js de ise bunun karşılığı aşağıdaki gibidir.


Bir de User bilgilerini gönderdiğimiz .js dosyası üzerinde güncellemeler gerçekleştirelim ; App.js içerisinde gönderdiğimiz keylerin mutlaka User.js üzerinde de karşılığının olması gerekir.
App.js ‘ye baktığımızda kullanıcı bilgileri için ; “name”,“age”,“title” olmak üzere üç tane key gönderilmiştir. Bu keyleri User.js ‘de karşılamak gerekir.

User.js ‘de ise bu keylerin this.props ile aşağıdaki gibi karşılanması gerekir.

Peki bunu daha düzenli şekilde nasıl yazabiliriz ? Destructing yöntemini kullanabiliriz. Destructing kavramının tam anlamı ile oturabilmesi için iki yazıyı önerebilirim Birincisi ,İkincisi


PropsTypes Kavramı
PropTypes gönderilecek olan verinin gerekli mi gereksiz mi ve buna bağlı olarak hangi veri tipinde gönderilmesi gerektiği konusunda yardımcı olur. Bunun için öncelikle aşağıdaki kütüphanenin import edilmesi gerekmektedir.

Not: Visual Studio Code üzerinde Impt yazıp Tab’e bastığınızda otomatik olarak kütüphane eklenecektir.
Navbar başka bir yer de kullanılacak ise ; title isminde PropTypes’ı string olan ve gönderilmesi zorunlu olan bir alan gönderilmesi gerekir ise aşağıdaki gibi bir kod bloğu oluşturulur. isRequired ( Gönderilmesi zorunlu anlamına gelmektedir. )

Not: Title alanı isRequired olarak tanımlandığı için App.js ‘te“title” key’i gönderilmediği takdirde kod hata verecektir.
User.js için de bu işlemin aynısını aşağıdaki gibi gerçekleştirebiliriz.

App.js içerisinde, “name”, “age” ve “title” alanları gönderilmediği takdirde kod hata verecektir.
Default Props Kavramı
Default Props ; tanımlanan keyler içerisinde eğer gönderilen herhangi bir veri yok ise, otomatik olarak verinin doldurulmasını sağlar.
Navbar.js’yi ele alalım. Bu alanda “title” keyi içerisinde herhangi bir veri gönderilmeyebilir. Bu göz önünde tutularak aşağıdaki gibi default props tanımlanabilir. Tabiki bunun için de prop-types kütüphanesinin komponente dahil edilmesi şarttır.

Nasıl göründüğünü test edebilmek için App.js alanındaki “title” keyine veri göndermeyelim.

Görüldüğü üzere herhangi “title” olarak herhangi bir veri göndermedim. O nedenle otomatik olarak default olarak tanımladığım props devreye girer ve kodun önizlemesi aşağıdaki gibi olur.

Peki veri gönderseydim ?

Aynı işlemleri User.js içerisinde de yapalım.

“name” , “salary”, “title” alanları boş gönderilirse yukarıda tanımlı default propslar devreye girecektir.
Not: Default Propsları static olarak da gönderebilirsiniz. Seçim sizin.

Peki hemen deneyelim mi ? App.js’ de bazı alanları göndermeyelim 🙂 (Title ve Age alanlarını göndermedim. )


Peki ya gönderseydim nasıl olacaktı ?

Ben de yeni yeni React öğrenen biri olarak bu bilgiler benim için faydalı oldu diyebilirim. Umarım sizin için de faydalı olmuştur. Bir sonraki yazıda görüşmek üzere…
Kaynakça
- Mustafa Murat Coşkun- Sıfırdan React.js ve Context Api /Udemy