React Props 'un Özellikleri, Kullanımı ve Görevi

Bir önceki makalede React bileşenler konusunu işlemiştim. Merak eden arkadaşlar hesabım üzerinden bu makaleye ve bundan önce Reactjs ile ilgili yazmış diğer yazılara ulaşabilirler. Bu hafta React’ın temel saç ayaklarından biri olan React Props konusuna değineceğim. Props’lar ReactJS ’in ana gövdesini oluştursa da gayet kısa bir konudur. Eğer örneklerle desteklerseniz rahatlıkla iki üç gün içinde proje içinde kullanılabilirsiniz.

Makaleye başlamadan önce şunu da eklemem gerekiyor bu makalenin içerisinde propsların hangi veri tiplerinde kullanılabileceği, nasıl şekillendireleceği ve ne şekilde kullanılacağı konularına değinmeyeceğim, JSX ile ilgili makale yazmıştım o yazının içinde bu konuları detaylıca işledim.( JSX Nedir? )

Bileşenler arasında bazı durumlarda iletişim kurmamız gerekir. Hatta bazen değil, çoğu durumda ana bileşendeki bazı verilerimizi alt bir bileşene geçirmemiz gerekir. Örneğin: bylge.com üzerindeki ana ekranda yer alan listede ilk olarak makalelere ait bütün verileri çekiyor daha sonra almış olduğum bu verileri alt bileşene veriyorum. Yukarıdaki örnekten de anlaşılacağı üzere props’ların temel özelliği ana bileşende ve yukarıdaki bileşenlerdeki sahip olduğumuz verileri alt bileşenleri geçirmektir.

Peki aynı bileşen içinde bu veriyi alt bir bileşene props ile vermeden kullanamaz mıyız? Tabikide kullanabiliriz, bir önceki makale bu konuyu anlatmıştım ancak burada tekrar etmek yarar var. React projesinde temel amaçlarından biride projesinizde ki bileşenleri fazla büyütmeden sadece belirli görevlerden sorumlu olan bileşenler oluşturarak ileride hacmi artacak olan projesinizi daha yönetebilir kılmaktır. Görevsel ve yönetimsel olarak ayırmış olduğumuz bileşenler arasındaki veri akışını propslar sayesinde sağlamış oluyoruz.

Props olarak vereceğiniz değişkenler, apinizden çekeceğiniz veriler olmak zorunda değil ,elle veya bileşenler içinde tutmuş olduğunuz durum verilerinizi de alt bileşene props’lar yardımıyla geçirebilirsiniz. JavaScript üzerindeki bütün veri tiplerini bileşenlere props olarak geçebilirsiniz, örneğin props olarak nesne, string, boolean, fonksiyon vb. veri tiplerinin hepsi kullanılabilir.

Props’lar sadece okunabilir, yani props olarak alt bir bileşene geçirmiş olduğunuz veriyi, alt bir bileşende değiştiremezsiniz. Eğer değiştirmeye çalışırsanız react projeyi compile ederken size aşağıdaki resimde gösterdiğimi gibi hata verecektir. Bunun örneğin aşağıdaki maddede gösterdim.

Props Kullanımı?

Props’lar React bileşenlerine geçen değişkenler olduğunu yukarıda söylemiştik. Normal fonksiyonlarda değişkenler veya HTML ’de attributeler nasıl görev yapıyor ise props’larda react bileşenleri içinde aynı görevi yerine getirirler. Bir bileşene props vermek istiyorsak aynı HTML attribute syntax ’ına benzer şekilde bileşene geçeriz. Burada ayrıca değinmekte fayda var, react bileşenleri değişken olarak sadece tek bir props objesi alırlar. Örneğin; Araba adında bir tane bileşen yapalım ve bileşen marka ve renk adında iki tane prop alsın. Bu bileşenin verilen renk ve marka Araba bileşenindeki props değişkeninden ulaşılabilir.

Yukarıdaki örnekte, farklı olarak iki string şeklinde göndermiş olduğumuz props’ları aynı zamanda tek bir nesne şeklinde de geçebiliriz. Bu bize daha temiz bir kod yapısı oluşturmamızı sağlar. Genel olarak ben eğer tek bir nesnede toplayabilirsem props’ ları bu şekilde kullanmaya özen gösteriyorum. Bu şekildeki bir kullanım yazılımcının yoğurt yiyişine bağlı, ikisi arasında yazılımsal ve sonuç bakımından herhangi bir fark yok.

App bileşeninden vermiş olduğumuz marka ve renk props’larını Araba bileşeninde değiştirmeye çalışırsak nasıl bir sonuç elde ederiz? Yukarıda da değindiğim gibi props’ lar sadece okunabildiği için aşağıdaki gibi hata alırız.

Sonuç olarak:

Props’lar;

İyi çalışmalar