Bileşenlere veri aktarmak için React Prop kullanır. React JS Props Kullanımı yazımızda detaylarını bulabilirsiniz. JavaScript ile uygulama geliştirirken değişken tip kontrolü yapılmaz. Dolayısı ile de React ile uygulama geliştirirken de değişken tipi denetlenmez. Bu nedenle de bazı durumlarda hatalar oluşabilir. Özellikle de kodu başkası kullanacağı zaman değişken türünü bilemeyebilir.
Bu gibi durumların önüne geçmek ve de en az hata ile bir bileşene veri göndermek için props-types kütüphanesini kullanabiliriz. Bu React ile gelen bir kütüphanedir ve prop kullanırken veri tipi denetimi yapılmasını sağlar.
PropTypes Nedir?
React komponentlerine girilen propların hangi veri tipinde olduğunu belirtmek için geliştirilmiş bir pakettir. Bu sayede bileşene girilen prop değeri hatalı ise bir hata mesajı ile uyarı alınır.
PropTypes özelliği sadece geliştirme aşamasında kullanılır. Uygulama build edilerek canlıya alındığında bu özellik çalışmayacaktır. Çünkü sadece geliştirici için geliştirilmiş bir pakettir.
Neden PropTypes Kullanılır?
PropTypes kullanmak için bir çok sepep sayılabilir.
- Yanlış bir değerin girilmesini engellemek.
- Bileşeni kullanacak farklı kişilere bilgi vermek.
- Hatalı sonuçların ortaya çıkmasını engellemek.
- Zorunlu kullanılacak propları belirlemek.
Şeklinde bir kaç neden sayabiliriz.
PropTypes Nasıl Kullanılır?
PropTypes kullanmak için öncelikle bir bileşen (component) tanımı yapmak gereklidir. Çünkü bileşenler ile birlikte kullanıyoruz. Bildiğiniz gibi proplar bileşenlere veri girişi için kullanılıyor. Mesela elimizde bir User bileşenimiz olsun ve bu bileşene
- name,
- age,
- city,
- hobies,
- isLogged
proplarını giriyor olalım. Bunlardan name ve email string olmalı, city bir nesne olmalı, , hobies hobileri tutan bir dizi olarak girilmelidir isLogged ise üye girişi yapılıp yapılmadığını belirtmek için kulanılacaktır yani bir boolean. Şimdi bunları kesin olarak tanımlamak için PropTypes kullanalım.
Tip tanımlamalarını bileşenimizin tanımlandığı dosya içerisinde yapıyoruz.
import React from "react";
function User(){
...
}
export default User;Konumuza dahil olmadığı için User komponentinin tanımlamasını yapmıyoruz.
İlk olarak PropTypes paketini uygulamamıza import edelim. React ile birlikte geldiği için farklı bir kütüphane kurmaya gerek bulunmuyor.
import React from "react";
import PropTypes from "prop-types";Sonrasında User komponentinden sonra tip tanımlamalarına başlıyoruz. Bunun için User.propTypes özelliğini kullanacağız.
User.propTypes = {
name: PropTypes.string,
}Prop tiplerini bir nesne olarak komponentin propTypes özelliğine geçiyoruz. Yukarıdaki tanımda User komponentinin name propunun string olduğunu belirtiyoruz. Eğer mesela
<User name={123} />şeklinde bir rakam girersek
Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `User`, expected `string`.
User@http://localhost:3000/static/js/bundle.js:234:7
App@http://localhost:3000/static/js/bundle.js:92:76şeklinde bir uyarı mesajı alacağız. Çünkü metin girilmesi gereken bir yerde rakam girmiş olduk. Uyarı mesajını tarayıcı üzerinde JavaScript Konsolunda görebilirsiniz.
Şimdi age propu için rakam tanımlaması yapalım.
User.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
}Bundan sonra artık age için bir metin girildiğinde bir hata mesajı göreceğiz.
city olarak bir nesne tanımlaması yapalım, sadece şehir ismi yerine mesela şehir kodu da girilmesi istensin. Nesnemiz
const city = {
name: "Şehir Adı",
code: "Şehir Kodu"
}şeklinde olsun. Bu şekildeki bir nesnenin prop tiplerini belirtmek için shape metodundan faydalanıyoruz. Şimdi tanımlayalım.
User.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
city: PropTypes.shape({
name: PropTypes.string,
code: PropTypes.number
}),
}city probu için shape ile bir name ve bir de code özellikleri için tip tanımlaması yaptık.
Şimdiden üyenin hobilerinin girildiği prop olan hobies için tip tanımını array yapalım.
User.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
city: PropTypes.shape({
name: PropTypes.string,
code: PropTypes.number
}),
hobies: PropTypes.array
}Artık hobies için gireceğimiz değerin bir dizi olması gerekiyor, aksi halde hata mesajı oluşacaktır.
isLogged tanımlamasını yapalım.
User.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
city: PropTypes.shape({
name: PropTypes.string,
code: PropTypes.number
}),
hobies: PropTypes.array,
isLogged: PropTypes.bool
}Tip tanımlamalarımız yaptık. Fakat bazı durumlarda bir propun ön tanımlı bir değeri olabilir veya propun kesin olarak girilmesi gerekebilir. Bunlarıda belirtebiliriz.
Bir Propu Zorunlu Tutmak – isRequire
React komponenti oluştururken bir propun zorunlu olarak girilmesini istiyorsak değeri isRequire olarak tanımlamaktır. Bunu prop tipini belirtirken yapıyoruz. Mesela kullanıcı adının zorunlu olmasını istiyorsak
User.propTypes = {
name: PropTypes.string.isRequire,
}şeklinde tanımlama yapmamız yeterli olacaktır. Eğer name propu girilmez ise JavaScript konsolunda şu hatayı görürüz.
Warning: Failed prop type: The prop `name` is marked as required in `User`, but its value is `undefined`.
User@http://localhost:3000/static/js/bundle.js:232:7
App@http://localhost:3000/static/js/bundle.js:92:76Ve bu hatayı düzeltmek için de tabii olarak name probunu girmemiz gerekecektir. Diğer alanlardan da istediğimizi zorunlu tutabiliriz.
User.propTypes = {
name: PropTypes.string.isRequire,
age: PropTypes.number.isRequire,
city: PropTypes.shape({
name: PropTypes.string,
code: PropTypes.number
}),
hobies: PropTypes.array,
isLogged: PropTypes.bool
}Default PropTypes – Ön Tanımlı Prop Değeri – defaultProps
Bazı durumlarda prop değeri girilmeyecek olabilir. Bu durumlarda ön tanımlı bir değerin bulunmasını isteyebiliriz. Bunu için komponentin defaultProps özelliğini kullanıyoruz. Mesela eğer kullanıcı giriş yapmadı ise isLogged false olmak zorundadır. O zaman biz eğer bir değer girilmedi ise bunun false olmasını isteyebiliriz.
User.defaultProps = {
isLogged: false
}Bu tanımlama ile birlikte artık eğer bir değer girilmezse isLogged false olarak ayarlanacaktır.
Sonuç
Eğer oluşturduğumuz React bileşeni (component) başkaları tarafından da kullanacaksa veya kodun daha anlaşılır olmasını istiyorsak ve ayrıca tip kontrolü istiyorsak PropTypes ile prop tiplerinin tanımlanması işimizi kolaylaştıracaktır.
Ek olarak React dökümantasyonuna bakarak farklı prop tiplerini de görebilirsiniz. React PropTypes.
React ile deneyimlerinizi bizimle paylaşır mısınız?