React State ve Props Nedir?
Selam herkese : )
Bu yazımda React’a yeni başlayanlar veya React’ ta ilerleme kaydetmek isteyen arkadaşlar için state ve props kavramlarını örneklerle anlatacağım. State ve props lar projemizde componentleri kontrol etmemizi sağlar. Props ve state’i anlamak React’ı öğrenmek için büyük bir adımdır. Bu konseptleri size basit ve anlaşılır şekilde anlatmaya özen göstereceğim. Dilerseniz lafı fazla uzatmadan konuya girelim.
React Props Nedir ?
Props’lar , bir componentten başka bir componente veri aktarımı yapmamızı sağlar. Props’lar salt okunur (read-only) dir. Değiştirilemezler. Data; ana componentten alt componentlere geçerken alt componentler tarafından herhangi bir değişime uğramaz. Aşağıdaki görselde ana componentte tanımlanan propsun alt componentlere nasıl aktarıldığı gösterilmiştir.
React Props Kullanımı
Aşağıdaki diyagramda Students adında bi alt componentimiz var. Bu alt componente ana componentten gelen “studentName” props’ u geçilmiştir. Böylelikle students componentinde studentName props değeri “Tom” olarak atanmıştır.
React Props Oluşturma
Şimdi kodlama aşamasına geçelim:
Location adında bir child component oluşturduk içerisinde “latitude(enlem)” ve “longitude(boylam)” adında iki özelliği props olarak tanımladık.
this.props.latitude
this.props.longitude
Ardından yukarıdaki Trucker ana componentini oluşturduk ve “Location” componentini burada çağırarak props değerlerini verdik.
Bu aşamalardan sonra çıktı yukarıdaki gibi olacaktır.
Props değeri obje ise props gösterim şekli aşağıdaki şekilde kullanılacaktır:
Yolladığımız props değeri obje değilse props gösterim şekli aşağıdaki gibi olacaktır:
Props değeri function ise aşağıdaki şekilde kodlayacağız:
Bazen obje, string veya value yerine props olarak function geçmemiz gereken durumlar olabilir. Bu projenin büyüklüğü ve ihtiyaca göre belirlenir. Alt sınıfta oluşturulmuş bir function props’unu bu componenti kullandığımız ana sınıfta props olarak geçebiliriz.
Bu componentte CustomInputNumber adında bir alt component oluşturduk. Input alanının onChange() methodunu props olarak geçtik ve ana componentte bu propsu kullanıma hazırlamış olduk. Şimdi onChange() fonksiyonunu ana componentte nasıl kullanacağımıza bakalım:
Ana component olan App componentinin içersinde CustomInputNumber alt componenttini kullandık. Props olarak geçtiğimiz onChange metoduna inputChanged() fonksiyonunu ekleyerek props işlemini tamamlamış olduk.
Constructor’da super(props) Kullanımı
React’ ta state initialize etmediğiniz sürece veya bind fonksiyonu ile herhangi bir metotu bağlama işlemi yapmadığınız sürece constructor kullanımı zorunlu değildir.
Neden constructor(props) kullanıyoruz?
JavaScript’te super ana class a referans eder. Bu örnekte ana class React.Component implementasyonudur. Bu yüzden “super()“ yazmadan yani ana componenti çağırmadan constructor metodunda “this” kullanmamıza JavaScript izin vermez.
React State Nedir?
State bir componentin o anki durumunu gösteren ve farklı property’lerden oluşan bir javascript objesidir.
Her component kendi içerisinde state’lere sahip olabilir ve state’ler kullanıldığı componentler tarafından yönetilir. State’ler componentin o anki durumunu simgeler.
React State Oluşturma
Constructor içinde state’i
this.state = {marka: “Zara”}
şeklinde tanımladık. Şu şekilde de tanımlayabiliriz:
this.state.marka = ”Zara”
İkisi de aynı işlevi görecek olan farklı state tanımlama şekilleridir.
Yukarıdaki örnek gibi birden fazla state property’si de tanımlayabiliriz.
Aşağıda ise render kısmında oluşturulan state ‘ lere erişilmiştir.
Render methodunun içerisinde constructor’da tanımlamış olduğumuz state’lere “this.state” diyerek erişmiş olduk.
Bu kodun çıktısı aşağıdaki gibidir:
State ‘ leri constructor içerisinde oluştururuz. Component oluştuğunda ilk constructor çalışır ve bu constructor methodu componenti ilk kullanıma hazırlar. Bu yüzden state’ lerin initial değerleri constructor’da tutulur. State’lere sadece burda değer ataması yapılır. Constructor hariç tüm yerlerde state güncellemeleri this.setState() methodu ile sağlanır.
React setState() Kullanımı
State oluşturma ve kullanım şekli bu şekildedir. Peki statelerimizi nasıl güncelleyeceğiz? React ‘ ta state objesinin değerini değiştirmek için “this.setState()” metodu kullanılır. State objesinde tutulan değer değiştiği zaman sadece state’in ait olduğu ilgili component yeniden render edilir. Böylelikle state güncellenmiş olur. Dilerseniz örneklere geçelim:
Kodumuzda state güncellemesini şu şekilde yapacağız:
Constructor metodunda state’lerimizi oluşturduk. Ardından render ‘a bir buton ekleyip butonun onClick özelliğinde state’imizi değiştiren metodu çağırdık.Bu metotda (renkDegistir) gördüğünüz gibi state güncellemesini this.setState() metodu ile aşağıdaki şekilde gerçekleştirdik.
Bu aşamadan sonra state updatelenecek ve butona basıldığında ekranda;
renk: “Mavi”
yazacaktır.
Peki this.state.renk=”Mavi” şeklinde direk atama işlemi yaparsak ne olur?
Neden this.setState() methodunu kullanmak zorundayız?
React’ta setState() methodu render metodunu tetikler. Eğer state’ i güncellerken setState yerine state’ e direk atama yaparsak render metodu tetiklenmez ve state güncelleme işlemi başarısız olur.
Props ve State Birlikte Kullanımı
Yukarıdaki örnekte ise props değerlerini bir state’ te tuttuk ve componentin içersinde this.state ile bu değerlere erişmiş olduk. Bu tarz örnekleri projenize göre çoğaltabilirsiniz.
Yukarıdaki diyagramı state ve props’ un çalışma prensibini basit bir şekilde göstermek için hazırladım.
State ve Props Farkları
Buraya kadar state ve props’ları ayrı ayrı inceledik. Şimdi özet şeklinde state ve props’un farklarına bakalım.
React’ta önemli iki kavram olan state ve props’ları kısa açıklamalar , örnekler ve diyagramlar yardımı ile anlatmaya çalıştım. Bu konu ile alakalı anlatacaklarım şimdilik bu kadar. Okuyan herkese faydalı olmasını diliyorum.
