React Props ve State: Componentlerin Can Damarı 🫀

Merhaba sevgili geliştirici dostlarım, kahveler hazırsa bizde hazırırız.🚀 Bugün konumuz Props ve State. İyi okumalar diliyorum 👩🏻‍💻

✨ Bu yazıdaki konu başlıkları:

1)Props Nedir ?

2)Neden Props Kullanırız ?

3)Props Nasıl Kullanılır ?

4)Children Props

5)State Nedir ?

6)Neden State Kullanırız ?

7)State Nasıl Kullanılır ?

8)Props ve State’in Farkları Nelerdir ?

✨Props Nedir ?

React comoponentlerine girdi olarak verilen verilerdir ve “özellikler” anlamına gelir. Bir React uygulamasındaki parent componentten child componentlere veri aktarımı için kullanılır.

React, component (bileşen) tabanlı bir yapıya sahiptir. Bu, uygulamayı küçük, bağımsız ve yeniden kullanılabilir parçalara bölmeyi sağlar. Her bir component, kendi iç durumunu yönetebilir ve bağımsız olarak çalışabilir. Bu sayede uygulamayı daha küçük parçalara ayırıp daha yönetilir bir modüler yapı halinde kullanılır.

Props, salt okunurdur ve parent componentten aldığı verilerle dinamik ve etkileşimli componentler oluşturmayı mümkün kılar.

✨Neden Props Kullanırız ?

1. Veri Akışı: Props, React component hiyerarşisinde üstten alta doğru veri akışını sağlar. Bu, uygulamanın farklı bölümlerindeki componentler arasında veri iletişimini kolaylaştırır.
2. Yeniden Kullanılabilirlik: Props sayesinde, componentler propslara göre özelleştirilebilir ve böylece farklı durumlar için yeniden kullanılabilir hale gelir.
3. Okunabilirlik ve Bakım: Props kullanımı, componentin hangi veriyi beklediğini ve nasıl kullanılması gerektiğini açıkça belirler. Bu, kodun okunabilirliğini ve uzun vadede bakımını kolaylaştırır.
4. Componenleri Soyutlaması: Props, componentler arasındaki bağımlılıkları azaltır. Componentler, props üzerinden aldıkları verilerle işlevlerini yerine getirirler ve bu da componentlerin birbirlerinden bağımsız olarak geliştirilip test edilmesine olanak tanır.
5. Dinamik UI Oluşturma: Props, componenlerin dinamik olarak içerik ve stil değiştirmesini sağlar.

✨Props Nasıl Kullanılır ?

JavaScript ile kullanırken:

// parent component
function App() {
  return (
    <div>
      <User name="Esra" />
    </div>
  );
}

// child component
function User(props) {
  return <div>Hi, {props.name}!</div>;
}

Bu örnekte, App adında bir ebeveyn bileşeni (parent component) ve User adında bir çocuk bileşeni (child component) bulunmaktadır. App bileşeni içinde, User bileşenine name adında bir prop (özellik) gönderilir. Bu prop, User bileşenine props objesi üzerinden erişilir ve kullanıcı adını göstermek için kullanılır.

TypeScript ile kullanırken:

// parent component
function App() {
  return (
    <div>
      <User name="Esra" />
    </div>
  );
}
// child component
interface Props{
    name:string
};

const User = (props: Props) => {
  return <div>{props.name}</div>;
};

export default User;

Bu örnekte, props kullanımı tip güvenliği eklenerek gerçekleştirilir. Öncelikle Props adında bir interface tanımlanır ve name özelliğinin bir string olması gerektiği belirtilir. Daha sonra User bileşeninde, props parametresinin bu interface tipinde olacağı belirtilir.

Props objesinin içindeki elemanlara ‘{props.name}’ yerine ‘{name}’ olarak erişmek için ‘ ({props})’ kullanılır.

interface Props{
    name:string
};

const PropsTricks = ({name}: Props) => {
  return <div>{name}</div>;
};

export default PropsTricks;

✨Children Props

React’te children prop'u, bir bileşenin (component) içeriğini diğer componentlere aktarmak için kullanılan özel bir prop'tur. Bu, parent componentlerin, kendilerine ait JSX yapısını doğrudan child componentlere iletmelerini sağlar.

JavaScript ile kullanırken:

// parent component
function App() {
  return (
    <>
      <ChildrenProps >
      <h2>Children Element</h2>
      </ChildrenProps>
    </>
  );
}
// childe component
const ChildrenProps = ({ children }) => {
  return (
    <>
      <div>{children}</div>
    </>
  );
};

export default ChildrenProps;

TypeScript ile kullanırken:

// parent component
function App() {
  return (
    <>
      <ChildrenProps >
      <h2>Children Element</h2>
      </ChildrenProps>
    </>
  );
}
// child component
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}
const ChildrenProps = ({children }: Props) => {
  return (
    <>
      <div>{children}</div>
    </>
  );
};

export default ChildrenProps;

✨State Nedir ?

React’te “state” (durum), bir bileşenin hayatı boyunca izleyebileceği ve zamanla değişebilecek verileri temsil eder.

State, kullanıcı etkileşimleri, sunucudan alınan veriler, form girişleri gibi dinamik verilerin yönetilmesi için kullanılır. Bir component state’i değiştiğinde, React componenti otomatik olarak yeniden render eder, böylece kullanıcı arayüzü güncel verilerle senkronize kalır.

✨Neden State Kullanırız ?

1. Dinamik Veri Yönetimi: Kullanıcı etkileşimlerine yanıt olarak UI’ın (kullanıcı arayüzünün) otomatik olarak güncellenmesi gerektiğinde state kullanılır.
2. Component Bazlı Mimari: State, her bir bileşenin kendi iç durumunu kapsülleyebilmesini ve yalnızca gerekli olduğunda diğer componentlerle veri paylaşabilmesini sağlar. Bu, uygulamanın daha kolay yönetilmesine, anlaşılmasına ve hata ayıklamasına yardımcı olur.
3. Yeniden Renderlama Kontrolü: State değiştiğinde, React otomatik olarak ilgili componenti yeniden render eder. Bu, uygulamanın her zaman güncel verileri yansıtmasını sağlar ve manuel DOM güncellemeleri yapma ihtiyacını ortadan kaldırır.
4. Kullanıcı Deneyimini İyileştirme: State, form girişleri, animasyonlar, zamanlayıcılar ve diğer kullanıcı etkileşimlerini yönetmek için kullanılabilir. Bu, kullanıcılara daha zengin ve etkileşimli bir deneyim sunar.
5. Uygulama Durumunun Genel Yönetimi: Daha büyük ve karmaşık uygulamalarda, state yönetimi için Redux gibi kütüphanelerle birlikte kullanıldığında, uygulamanın genel durumunu merkezi bir yerden yönetmek mümkün olur.
6. Performans Optimizasyonu: State, sadece gerekli componentlerin yeniden render edilmesini sağlayarak, gereksiz güncellemeleri önler ve böylece uygulamanın performansını iyileştirir.

✨State Nasıl Kullanılır ?

JavaScript ile kullanırken:

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
    </>
  );
}

Bu örnekte, bir App fonksiyonel bileşeni içinde useState hook'u kullanılarak bir sayaç uygulaması oluşturulmuştur. useState başlangıç değeri olarak 0 alır ve iki değer döndürür: count (mevcut durum değeri) ve setCount (durumu güncellemek için bir fonksiyon). Butona her tıklandığında, setCount fonksiyonu çağrılır ve count değeri bir artırılır. Böylece buton üzerindeki metin dinamik olarak güncellenir.

TypeScript ile kullanırken:

import { useState } from "react";

const State = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
    </>
  );
};

export default State;

Bu örnekte, useState kullanımı tip belirtilerek gerçekleştirilmiştir. useState<number>(0) ifadesi ile useState'in bir number tipi döndüreceği belirtilmiştir.

✨Props ve State’in Farkları Nelerdir ?

• Props, dışarıdan verilir; state component içinde yönetilir.
• Props değiştirilemezken, state değiştirilebilir.
• Props componentler arası veri iletişimi için, state ise bileşenin kendi iç durumunu yönetmek için kullanılır.

Props ve State ile alakalı örneklere göz atabilirsiniz : props-and-state

Eğer yazıyı beğendiyseniz, diğer içeriklerime göz atmayı unutmayın. Keyifli okumalar! 📚

Bana destek olmak için kahve ısmarlayabilirsiniz 🌟

Benimle iletişime geçmek isterseniz: Esra Nur Mülkpınar