React Native ~ state ve props nedir? #2

Önceki yazıda geliştirme aşamasında tüm yapının componentler üzerine kurulu olduğunu söylemiştik. Peki componentler ile veriyi nasıl işliyoruz?

React ile veriyi props ve state yolu ile component içinde kullanabiliyoruz.

State nedir?

State mevcut component içinde kullanılacak ve değiştirilme durumu olan veriler için kullanılır.

Basit bir component oluşturup onun üzerinden inceleyelim.

import React, { Component } from 'react';

export default class User extends Component {
  constructor (props) {

    super(props)
    this.state = {
      name: "Ahmet",
      surname: "Şimşek"
    }
  }

  upper(text){
    return text.toUpperCase()
  }

  render() {

    return (

      <View>

        <Text>

          {this.upper(this.state.name)} {this.upper(this.state.surname)}

        </Text>

      </View>

    );

  }

}

export default ile oluşturduğumuz User classının başka bir javascript dosyasında direkt olarak çağırılmasını sağlıyoruz.

constructor class için tanımlamaların yapılacağı fonksiyon. react modülü üzerinden export edilen Component  classını oluşturduğumuz User classına extends ediyoruz. Yani Component üzerinde tanımlanan fonksiyonların User için kullanılabilir olmasını sağlıyoruz.

this.state üzerinden sınıfımız için state tanımlamasını yapıyoruz. Tanımladığımız stateleri render fonksiyonunda kullanacağız.

render fonksiyonu ile arayüz kısmını return ediyoruz.

Tanımladığımız bir state i jsx kodları içerisinde kullanmak için süslü paranterler içerisinde yazmamız yeterli.

{this.state.name}

Süslü parantezler içerisinde bir fonksiyonu çağırabilir ve geri dönüş değerinin kullanılmasını sağlayabiliriz.

{this.upper(this.state.name)}

Classın mevcut değişken ve fonksiyonlarına this ile erişiyoruz.

Peki constructor kısmında tanımladığımız state i değiştirmek için ne yapmalıyız?

State değişikliğini this.setState fonksiyonu ile yapıyoruz.

export default class User extends Component {
  constructor (props) {

    super(props)
    this.state = {
      date: new Date(),
    }

    setInterval(() => {
      this.setState({
        date: new Date(),
      })
    }, 1000)
  }

  render() {

    return (

      <View>

        <Text>

          {this.state.date}

        </Text>

      </View>

    );

  }

}

Döngü 1 saniyede tekrar ederek this.state.date in değişmesini sağlayacak ve render kısmında this.state.date değişimi yansıyacak.

State mevcut component içerisinde veriyi işlememizi sağlar. Peki <View> yada <Text> gibi tanımladığımız bir component içine bir veri yada fonksiyonu nasıl göndereceğiz? Componentler arası iletişimi nasıl kuracağız?

Props nedir?

Props componentlere yine farklı component içerisinde veri gönderilebilmesini sağlayan kısacası componentler arası iletişimi gerçekleştiren yapıdır.

Aşağıdaki User ve Home classlarını User.js ve Home.js adıyla kaydedin.

// User.js
export default class User extends Component {
  constructor (props) {

    super(props)
    this.state = {

    }
  }

  render() {

    return (

      <View>

        <Text>

          {this.upper(this.props.name)} {this.upper(this.props.surname)}

        </Text>

      </View>

    );

  }

}

// Home.js

import User from './User';

export default class User extends Component {
  constructor (props) {
    super(props)
    this.state = {

    }
  }

  render() {

    return (

      <User name={"Ahmet"} surname={"Şimşek"}/>

    );

  }

}

Tıpkı html elementlerindeki attribute gibi bir componente props yardımı ile veri aktarabiliriz.

Oluşturduğumuz componenti çağırmak için tek yapmak gereken import ettiğimiz isimle çağırmak;

<User/>

Component içerisine componentler dahil edebiliriz;

<User>
  <Text>user..</Text>
</User>

Props stateden farklı olarak componente dışarıdan dahil edilir ve belirli tanımlamalar için kullanılır. Component içerisinde değişime uğrayacak yani işlenecek olan veri state ile kontrol edilir.

Kapsamlı bir uygulamada sadece setState ile state yönetimini sağlamak iyi bir çözüm olmayacağından state yönetimi için farklı kütüphaneler var. Redux ve Mobx bu kütüphanelerden en yaygın kullanılanları. İlerleyen yazılarda Redux un ne olduğundan ve nasıl kullanılacağından bahsedeceğim.

Bir api ile bağlantı içerisinde olacak bir uygulamada apiden istenilen veriyi çağırmak ve sonra bu veriyi işlemek bu kütüphaneleri kullanmadan ilk başta iyi bir yol gibi gözüksede kısa sürede karmaşıklığın çok fazla artmasına neden olur. Bu kütüphanelerin etkili şekilde dahil edildiği bir uygulamada hem veriyi işlemek daha kolay hale gelir hemde uygulamaya yeni bir component eklemek yada mevcut componentleri düzenlemek daha kolay olur.

Örnek vermek gerekirse bir ajax isteği gerçekleştirildiğinde aşağıdaki 3 durum gerçekleşebilir;

1. pending
İstek gönderildikten sonra yanıt beklenilen aşama.

2. success
İstek gönderildi ve başarılı şekilde ulaştığında bu aşamaya geçilir.

3. error
İstek apiye ulaşmadı yada 401 gibi bir hata kodu geri döndüğünde bu aşama işlenir.

Redux bu aşamaların componentden soyutlanarak aksiyonlar üzerinden yönetilmesini sağlıyor. Aksiyon tetiklendiği anda component içerisinde props render aşamasında istenilen şekilde kullanılabiliyor.

Sonraki yazıda görüşmek üzere.