REACT NATIVE’DE STATE ve PROPS MANTIĞI

React Native’de component diye adlandırdığımız bir bileşeni yönetmenin iki yolu vardır: State ve Props. Gelin birlikte bunların ne olduğuna bir göz atalım.

State

State; veri üzerinde güncelleme tarzı bir değişiklik yapılacağı zaman kullanılır. State; class ve hooks yapısı olmak üzere iki şekilde kullanılır.

Class Kullanımı

Class kullanımına bir örnek verecek olursak;

Burada state; render fonksiyonu içindeki component’lerin durumu her değiştiğinde render fonksiyonunun yeniden çalışmasını sağlar.

Bu kodun bize {this.state.name} ile söylediği ise şu; sen benim state’ime git, oradaki ‘name’ isimli değişkenimi bana getir. ‘name’ değişkeninin değeri ‘Eylem’ olduğundan bu kod bize ‘Eylem’i ekrana bir text olarak basacaktır.

Hooks Kullanımı

Geldik diğer bir kullanım olan ve son zamanlarda class’ın yerini almaya başlayan hooks yapısına…

State’in hooks kullanımında ‘useState’ ve ‘useEffect’ adlı iki yapı vardır. useState; state’in değişimini kontrol edebildiğimiz bir yapıdır. useState şu şekilde kullanılır:

const [user,setUser]=useState({name:’Eylem’,surname:’Gokdemir’})

const diyip bir array oluşturduk ve bu array iki parametre alıyor. Burada; user bizim state’imizin adı, setUser ise onu güncellemek için kullanacağımız metottur. useState metodumuzun içini ise bir json objesi olacak şekilde doldurduk. Peki bunu json objesi şeklinde değil de başka bir şekilde yapamaz mıydık? Tabi ki yapardık.

Örneğin; ben bu state’i aşağıdaki şekilde tanımlayıp counter değerinin de 0’dan başlaması için useState metodumun içine 0 yazıp onu bir integer olarak da kullanabilirdim.

const [counter,setCounter]=useState(0)

Kendi örneğimizden devam edecek olursak;

Burada; biz değişkenlerimizi ve değerlerini bir json objesi olarak useState metodumuza ekledik. Onları return içinde {user.name} ve {user.surname} olarak çağırdığımızda biz useState metodumuzun içindeki name ve surname’i çağırmış olacağız. Bunları bir text component’i içinde çağırdığımızdan dolayı da kodumuz bize ‘name’ ve ‘surname’ değişkenlerinin değerlerini yani Eylem ve Gokdemir yazılarını alt alta olacak şekilde ekrana basacaktır.

Bir de set metodumuzu kullanacağımız bir örnek yapalım. Bunun için yine counter değişkenimi kullanacağım.

Yukarıdaki kodumda gördüğünüz üzere bir counter state’im ve onu güncellerken kullanacağım bir setCounter metodum var. Ben useState metodumun içine 0 yazarak counter’ımı 0’dan başlattım. Return fonksiyonunun içine de counter değerimi yazdırmak için kullandığım bir text component’i dışında bir de button component’i tanımladım. Bu button component’imin içindeki ‘title’ benim butonumun ismi, onPress diye geçen fonksiyonum ise butona tıklandığında butonun ne yapacağına karar veren bir fonksiyon. Ben butona her tıkladığımda counter değerimin 1 artmasını istediğimden bir ‘updateCounter’ metodu yazdım ve bunu onPress fonksiyonum içinde çağırdım. Sonrasında güncelleme gibi bir değişiklik yapmak istediğim için updateCounter adında bir metot oluşturdum ve burada setCounter metodumun içerisinde counter değişkenimi çağırarak ona 1 ekledim. Böylece ben bu kodu çalıştırdığım anda benim programım önce benim counter state’imi oluşturacak, sonrasında gelecek return metodu içerisine counter’ımın ilk değerini(0) yazdıracak. Ben ‘Güncelle’ butonuna tıkladığım anda onPress fonksiyonum çalışacak ve onun içine yazmış olduğum updateCounter metoduma gidecek, counter değerini 1 arttıracak ve tekrar return’e gelip bunu ekrana yazacak. Program ben butona her bastığımda counter değerini 1 arttıracak.

Peki bu işlemi illa ki bir fonksiyonda mı yazmalıyız? Hayır.

Şu şekilde de yapabiliriz:

Yukarıda yazdığımız gibi setCounter metodunu onPress fonksiyonuna göndererek aynı işi yapabiliriz.

useEffect kullanımı ise şu şekildedir:

useEffect’i kullanmak istiyorsak önce onu react kütüphanesinden çağırmalıyız. Yukarıdaki kodda da gördüğümüz üzere useEffect’i Main dosyası içinde yazıp içinde fetchData fonksiyonunu çağırıyoruz ve useEffect çalıştığı an fetchData fonksiyonunun içindeki işlemler devreye giriyor ve orada ne istendiyse o yapılıyor.

useEffect, genellikle büyük bir veri çekme işlemi gibi tek bir defa yapılmasını istediğimiz işlemlerde kullanılır. Çünkü useEffect tek bir defa çalışır. Peki bu veri çekme işlemini neden return içerisinde yapmıyoruz?

Çünkü bu işlemi return içerisinde yaparsak programımız her çalıştığında bir veri çekme işlemi olacak ve bu da programı yoracaktır. Programın yorulması ise; kötü performans, devamında ise kötü bir kullanıcı deneyimi demektir.

Bize bu verinin tek bir kere gelmesi yeterli olduğundan useEffect kullanarak hem iyi bir performans sağlayarak ürünümüzün kalitesini arttırıyoruz, hem de kullanıcının ürünümüzden memnun kalmasını sağlamış oluyoruz.

İşte State’lerde Hooks kullanımı da bu şekilde arkadaşlar. Gelin dilerseniz bir diğer konumuz olan Props’lara geçelim..

Props

Props’lardan bahsedebilmemiz için React Native’den ziyade biraz ReactJS’e girmemiz lazım.

Burada da önce component dediğimiz bileşenlerden bahsetmeliyiz.

Bileşenler; kullanıcı arayüzünde gördüğümüz, birbirinden bağımsız ve reusable component dediğimiz yeniden kullanılabilen parçalar oluşturmamızı sağlar. Böylece her bir parçayı ayrı ayrı yerlerde kodlayarak clean code dediğimiz temiz, anlaşılabilir kodlardan oluşan bir proje ortaya çıkartabiliriz.

Bileşenlerin genel yapısına baktığımız zaman onları birer fonksiyon olarak düşünebiliriz ve bu fonksiyonlar genelde ‘props’ adı verdiğimiz girdiyi alırlar ve arayüzde göreceğimiz yazı,buton.. vs. gibi elementleri bize gösterirler. Peki props’ları nasıl kullanırız?

Şu şekilde bir örnek verecek olursak;

Yukarıdaki kodumuzda Item isimli bir dosya oluşturduk. Text component’i içinde {props.name} ile almak istediğimiz veriyi belirttik. Peki bu veriyi nereden alacağız?

Props ile alacağımız veriyi işte yukarıda Main isimli dosyamızdan alacağız. Peki bunu nasıl alıyoruz?

Öncelikle Item dosyamızı Main dosyamıza yukarıdaki şekilde import ediyoruz. İşte reusable component dediğimiz kullanım ise buradan sonra devreye giriyor. Biz artık bu Item dosyasını Main dosyamıza import ettikten sonra onu bir component’miş gibi kullanabiliriz.

Burada View component’i içine Item’ı bir component’miş gibi yazdık, ona ‘name’ isimli bir değişken verdik ve bu değişkene de “Eylem” string’ini atadık. Böylece biz ilk resmimizde {props.name} diyerek şunu demiş olduk; benim import edildiğim dosyaya git ve onun ‘name’ değişkeninin değerini ekrana yaz.

İşte props yapıları bu şekilde çalışıyor arkadaşlar.

Özet: State ve Props farkını tek cümleyle özetlersek; State kullandığımız ana component içerisinde çalışır, Props ise yukarıdan kalıtım yaparak(import ederek) kullandığımız bir yapıdır.

Not: Umarım anlattıklarım faydalı olmuştur. Okuduğunuz için çok teşekkürler. Sürç-i lisan ettiysem affola. 😊