React Native'de State Yönetimi Nasıl Yapılır?

React Native'de state yönetimi, uygulamanızın durumunu takip etmek ve bu durumu bileşenler arasında iletmek için kullanılan bir temel kavramdır. React Native, React'in state yönetimini temel alır ve React Hooks ile daha da gelişmiş state yönetimi imkanları sunar. İşte React Native'de state yönetimini nasıl yapacağınıza dair temel adımlar:

1. State Kavramı ve Tanımlama:
State, uygulamanızın durumunu ve verilerini tutmak için kullanılan bir JavaScript nesnesidir. State, uygulamanızın belirli bir zamandaki durumunu temsil eder ve değiştirilebilir (mutable) yapısı sayesinde uygulamanızdaki dinamik değişikliklere izin verir.

State'i tanımlamak için React Native'de sınıf tabanlı bileşenler kullanabilir veya daha yeni React Hooks API'si ile fonksiyon tabanlı bileşenlerde state kullanabilirsiniz.

2. Sınıf Tabanlı Bileşenlerde State Yönetimi:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.incrementCount} />
      </View>
    );
  }
}

export default Counter;
 

Yukarıdaki örnek, sınıf tabanlı bir bileşen olan `Counter`'ı gösterir. Bileşenin state'inde `count` adında bir değişken tutulur ve `incrementCount` metodu ile state güncellenir.

3. Fonksiyon Tabanlı Bileşenlerde State Yönetimi (Hooks):

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={incrementCount} />
    </View>
  );
};

export default Counter;
 

Fonksiyon tabanlı bileşenlerde, `useState` hook'u ile state tanımlayabilir ve `setCount` metodu ile state'i güncelleyebilirsiniz. Hooks, state yönetimini daha basit ve sade bir şekilde yapmanızı sağlar.

4. State'i Bileşenler Arasında İletme (Props Kullanımı):
Eğer state'i bir bileşenden diğerine iletmek istiyorsanız, Props kullanabilirsiniz. State'i tanımlayıp, diğer bileşenlere props olarak geçirerek state'i paylaşabilirsiniz.

Örnek:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;
 

Yukarıdaki örnekte, `ParentComponent` içindeki `count` state'i `ChildComponent`'e `count` prop'u olarak geçirilmiştir. Böylece, `ChildComponent` da state'i kullanabilir ve `incrementCount` metodunu çağırabilir.

Sonuç olarak, React Native'de state yönetimi, state'in tanımlanması, güncellenmesi ve diğer bileşenlere iletilmesi üzerine odaklanır. Sınıf tabanlı bileşenler ve fonksiyon tabanlı bileşenlerde state yönetimi için farklı yöntemler vardır ve Hooks API'siyle daha basit bir yapıda kullanım sunulur. State yönetimi, uygulamanızın durumunu düzenli ve etkili bir şekilde kontrol etmenizi sağlar ve veri akışınızı sağlıklı bir şekilde yönetmenize yardımcı olur.