Adı : React State ve Props Kavramları

React'ta state ve props, bir bileşenin verilerini tutmak ve bu verileri yönetmek için kullanılan iki temel kavramdır. Bu yazıda, React'ta state ve props kullanımını detaylı bir şekilde inceleyeceğiz.

React'ta State Nedir?
State, bir bileşene ait durum bilgisini tutan bir nesnedir. Bileşenin bu durumu, bileşene ait verilerin değiştiği veya güncellendiği zaman güncellenir ve bileşenin yeniden render edilmesini sağlar. State'in kullanımı, dinamik verileri yönetmek için oldukça önemlidir.

React bileşeninin state'i oluşturulurken önce bir constructor kullanılır. Constructor, React bileşenine ait başlangıç durumunu belirlemek için kullanılır. State, constructor içerisinde bir obje olarak tanımlanır ve başlangıç değeri atanır. Örnek olarak;

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

render() {
return (

);
}
}
```

Yukarıdaki örnekte, Counter bileşeninin başlangıç durumu count isimli bir state içeriyor ve değeri 0. Bileşenin render() metodu içerisinde state'e erişmek için this.state.count şeklinde kullanılıyor. Ayrıca, arttırma işlemi için bir buton ve onClick event'i tanımlanmış. Butona her tıklandığında state güncellenip bileşen yeniden render edilecektir.

React'ta Props Nedir?
Props, bileşenler arasında veri iletmek için kullanılan bir mekanizmadır. Props, parent bileşeninden child bileşene veri iletmek için kullanılır ve genellikle değişmezdir (immutable). Parent bileşen props'ları child bileşene geçirirken onları değiştiremez. Props kullanımı, bileşenler arasında veri akışını sağlayarak bileşenlerin tekrar kullanılabilirliğini artırır.

Props, parent bileşende bir özellik olarak tanımlanır ve child bileşene aktarılır. Örnek olarak;

```
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}

class App extends React.Component {
render() {
return ;
}
}
```

Yukarıdaki örnekte, Welcome bileşeni name isimli bir prop alıyor ve ekrana \"Hello, John\" şeklinde yazdırılıyor. Welcome bileşeni, App bileşeninde kullanıldığı için name prop'u App bileşeninden geçiriliyor.

State ve Props Karşılaştırması
State ve props, React bileşenleri arasında veri iletişimini sağlamak için kullanılan iki farklı mekanizmadır. State, bileşenin kendi içinde kullanılan ve bileşenin durumunu tutan bir mekanizma iken, props dışarıdan gelen ve bileşene aktarılan verileri içerir. State genellikle değişebilir (mutable) iken, props genellikle değişmez (immutable) olarak kabul edilir.

State, bir bileşende güncellenebilir veriler olduğu zaman kullanılırken, props daha çok parent bileşenden child bileşene veri iletmek için kullanılır. State ile bileşenin kendi içinde veri yönetimi yapılırken, props ile bileşenler arasında veri akışı sağlanır.

Örnekler
State ve props kullanımını daha iyi anlamak için birkaç örnek yapalım.

1. State Kullanım Örneği:
```
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { time: new Date() };
}

componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({ time: new Date() });
}

render() {
return (

Current Time: {this.state.time.toLocaleTimeString()}

);
}
}
```

Yukarıdaki örnekte, Timer bileşeni başlangıçta bir state içeriyor ve bu state her saniyede bir güncelleniyor. Bileşenin componentDidMount() metodu içerisinde setInterval() fonksiyonu kullanılarak her saniyede bir state güncelleniyor. componentWillUnmount() metodu içerisinde ise setInterval() fonksiyonu temizleniyor.

2. Props Kullanım Örneği:
```
class Book extends React.Component {
render() {
return (

{this.props.title}

Author: {this.props.author}

Published: {this.props.publishedYear}

);
}
}

class Bookshelf extends React.Component {
render() {
return (

);
}
}
```

Yukarıdaki örnekte, Book bileşeni title, author ve publishedYear adlı props'ları alıyor ve ekrana yazdırıyor. Bookshelf bileşeni içerisinde iki farklı book bileşeni kullanılıyor ve her bir bileşene farklı prop'lar geçiriliyor.

Sık Sorulan Sorular
1. State ve props arasındaki fark nedir?
State, bir bileşenin kendi içinde kullanılan ve bileşenin durumunu tutan bir mekanizmadır. Props ise bileşenler arasında veri iletişimini sağlayan bir yapıdır.

2. State'i nasıl kullanabilirim?
State'i kullanabilmek için önce bir constructor kullanarak bileşenin başlangıç durumunu belirlemeniz gerekmektedir. Daha sonra state'e erişebilmek için this.state.stateAdi şekline kullanabilirsiniz.

3. Props nasıl kullanılır?
Props'u kullanabilmek için, bileşenin içerisinde bu props'u this.props.propertyAdi şeklinde kullanabilirsiniz. Örneğin: this.props.name şeklinde name prop'una erişilebilirsiniz.

4. Props değiştirilebilir mi?
Props, genellikle değişmez (immutable) olarak kabul edilir. Parent bileşen bu props'u değiştiremez, sadece child bileşen tarafından okunabilir.

5. State nasıl güncellenir?
State güncellemek için this.setState() metodu kullanılır. Bu metoda bir obje geçilir ve state'in güncellenmesi istenen değerleri bu obje içerisinde belirtilir.

6. State mi yoksa props mu kullanmalıyım?
State, bileşenin içindeki durumu ve değişkenleri yönetmek için kullanılırken, props bileşenler arasında veri iletimi için kullanılır. İhtiyaca bağlı olarak hangi mekanizmayı kullanacağınıza karar vermelisiniz.

Bu yazıda, React'ta state ve props kavramlarını detaylı bir şekilde inceledik ve örneklerle kullanımını anlattık. State ve props'u anlamak, React bileşenlerinin gücünü keşfetmek ve verileri yönetmek için önemlidir. Umarım bu yazı size yardımcı olmuştur."