Props Ne Demek?
Yayın: · Son güncelleme:
Props Ne Demek? Kısaca
Props (properties, özellikler), React ve benzeri çerçevelerde bir üst bileşenden alt bileşene aktarılan verilerdir. Bileşenin dışarıdan aldığı ayarlar gibi çalışır ve alt bileşen tarafından değiştirilmez.
Props ne demek?
Props, İngilizce properties kelimesinin kısaltmasıdır ve özellikler anlamına gelir. React'te bir bileşene dışarıdan gönderilen bilgileri ifade eder. HTML'de bir etikete nitelik verir gibi bileşene de değer verirsiniz.
Bir fonksiyona parametre göndermeye benzetebilirsiniz. Fonksiyon aldığı değere göre farklı sonuç üretir. Bileşen de aldığı props'a göre ekranda farklı içerik gösterir.
Nasıl kullanılır?
Basit bir örnekle anlatalım. "Selamlama" adında bir bileşen, ekrana kullanıcının adını yazsın. Bileşen şöyle çağrılır: <Selamlama ad="Ayşe" />. Bileşenin içinde bu değer props.ad olarak okunur ve ekranda "Merhaba, Ayşe" görünür.
Aynı bileşen ad="Mehmet" ile çağrıldığında başka bir selamlama üretir.
Gönderilen değer yalnızca metin olmak zorunda değildir. Sayı, liste, nesne ve hatta tıklanınca çalışacak bir fonksiyon da gönderilebilir. Bir düğme bileşenine onClick fonksiyonu aktarmak, düğmenin ne yapacağını üst bileşenin belirlemesini sağlar.
State ile farkı nedir?
Props dışarıdan gelir ve bileşen tarafından değiştirilmez; yalnızca okunur. State ise bileşenin kendi içinde tuttuğu ve zamanla değişen veridir. Örneğin bir sayaçtaki başlangıç değeri props olabilir, kullanıcı tıkladıkça artan sayı ise state'tir.
Sık karşılaşılan bir sorun "prop drilling" olarak adlandırılır: bir veriyi beş katman aşağıdaki bileşene ulaştırmak için aradaki her bileşenden geçirmek. Bu durum ortaya çıktığında Context ya da bir durum yönetimi çözümü kodu sadeleştirebilir.
Sıkça Sorulan Sorular
Props değiştirilebilir mi?
Alt bileşen props'u doğrudan değiştirmemelidir. Değişiklik gerekiyorsa üst bileşendeki veri güncellenir ve yeni değer props olarak tekrar aşağı gönderilir.
Props yalnızca React'te mi var?
Kavram en çok React ile bilinse de Vue, Svelte ve diğer bileşen tabanlı çerçevelerde de benzer bir mekanizma bulunur. Vue'da da aynı adla, props olarak anılır.