React'te props ve durum arasındaki fark nedir?

Props (özellikler) ve durum (state), React bileşenlerinde veri yönetimi için iki temel mekanizmadır.

Props:

• Ana bileşenden çocuk bileşene aktarılır.
• Çocuk bileşen içinde değiştirilemez (immutable).
• Bileşenler arasında etkileşimi sağlar.
• Giriş verilerine göre bileşenin görünümünü veya davranışını belirler.

Durum:

• Belirli bir bileşene ait olup, onun tarafından yönetilir.
• Bileşen içinde değiştirilebilir (mutable).
• Zamanla değişebilen ve bileşenin render edilmesini etkileyen verileri temsil eder.
• Durum değişikliği, bileşenin ve alt bileşenlerinin yeniden render edilmesine neden olur.

Başlıca farklar tablo şeklinde sunulabilir:

Özellik	Props	Durum
Kaynak	Ana bileşen	Bileşenin kendisi
Değiştirilebilirlik	Değiştirilemez (immutable)	Değiştirilebilir (mutable)
Yönetim	Dışarıdan aktarılır	Bileşenin içinde yönetilir
Amaç	Dışarıdan veri göstermek, ayar yapmak	Bileşenin iç durumunu yönetmek
Değişiklik sonucu	Ana bileşende değişiklik olursa yeniden render	Mevcut bileşende değişiklik olursa yeniden render

Props kullanımına örnek:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Merhaba ebeveyn!";
  return (
    <div>
      <ChildComponent text={message} /> {/* "text" prop'unun aktarılması */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* "text" prop'unun kullanımı */}
  );
}

export default ChildComponent;

Durum kullanımına örnek:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // "count" durumunun başlatılması

  const increment = () => {
    setCount(count + 1); // Durumun değiştirilmesi
  };

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={increment}>Arttır</button>
    </div>
  );
}

export default Counter;