React'te Props ve State: Uygulamaların Temel Taşları

React, diğer kütüphanelerden farklı olarak bileşen bazlı bir kütüphane olup, kullanıcı arayüzlerini dinamik ve modüler bir şekilde oluşturmamızı sağlar. Bu süreçte, props ve state kavramları bolca kullanıp, bileşenlerin davranışlarını ve görünümünü yönetmek için react'ın en temel yapı taşlarını inceleyeceğiz. Bu yazıda, props ve state kavramlarını detaylı bir şekilde inceleyip, nasıl kullanıldıklarını örneklerle açıklayacağız.

Props Nedir?

Props (properties), bileşenlere dışarıdan aktarılan ve değiştirilemeyen verilerdir. Başka bir deyişle, props bileşenlerin yeniden kullanılabilirliğini sağlayan ve onları dış dünya ile iletişim kurabilen parçalara dönüştüren verilerdir. Bileşenler arası veri aktarımını sağlarlar ve bu veriler bileşen tarafından salt okunur olarak kullanılır. Bileşenler arasında veri aktarımı parent bileşenden yani ana bileşenden child bileşene doğru aktarılır.

Props Kullanımı Örneği (functional component):

function Greeting(props) {
	return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (

    <div>

      <Greeting name="Alice" />

      <Greeting name="Bob" />

    </div>

  );
}

Yukarıdaki örnekte, Greeting bileşeni bir name prop'u alır ve bu prop'u kullanarak bir selamlama mesajı oluşturur. App bileşeni, Greeting bileşenine farklı name prop'ları geçirerek farklı selamlama mesajları oluşturur.

Props'un Temel Özellikleri

1. Salt Okunur:

• Props değerleri bileşen içinde değiştirilemez. Bu, bileşenlerin yan etkisiz (pure) ve öngörülebilir olmasını sağlar.

1. Bileşenler Arası Veri Aktarımı:

• Props, bileşenler arası veri aktarımını sağlar. Üst bileşenden alt bileşene veri aktararak bileşenler arasında iletişim kurulmasına olanak tanır.

1. Yeniden Kullanılabilirlik:

• Props, bileşenlerin yeniden kullanılabilirliğini artırır. Farklı prop değerleri ile aynı bileşen farklı durumlarda kullanılabilir.

Props ile State arasında da pek çok kafa karışıklığı bulunuyor.

Props:

• Dışarıdan bileşene aktarılır.

• Salt okunur ve bileşen içinde değiştirilemez.

• Bileşenler arası veri aktarımı sağlar.

• Bileşenlerin yeniden kullanılabilirliğini artırır.

State:

• Bileşen içinde tanımlanır.

• Değiştirilebilir ve bileşen içinde yönetilir.

• Bileşenin kendi iç durumunu temsil eder.

• Dinamik güncellemelerle bileşenin yeniden render edilmesini sağlar.

Ekstra olarak güncel bir örnek oluşturalım.

Component yazımızda da belirtiğimiz gibi bir Header.js diye bir component oluşturalım.

const Header = (props) => {
    console.log(props);
    return (
        <>
           <nav className="navbar navbar-expand-lg bg-body-tertiary">
            <div className="container-fluid">
                <a className="navbar-brand" href="#!">{props.title}</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                    <li className="nav-item">
                    <a className="nav-link active" aria-current="page" href="#!">{props.homeLinkText}</a>
                    </li>
                    <li className="nav-item">
                    <a className="nav-link" href="#!">{props.linkText}</a>
                    </li>
                    <li className="nav-item dropdown">
                    <a className="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {props.dropdownText}
                    </a>
                    <ul className="dropdown-menu">
                        <li><a className="dropdown-item" href="#!">{props.dropdownItem1}</a></li>
                        <li><a className="dropdown-item" href="#!">{props.dropdownItem2}</a></li>
                        <li><hr className="dropdown-divider"/></li>
                        <li><a className="dropdown-item" href="#!">{props.dropdownItem3}</a></li>
                    </ul>
                    </li>
                    <li className="nav-item">
                    <a className="nav-link disabled" aria-disabled="true" href="#!">{props.disabledLinkText}</a>
                    </li>
                </ul>
                <form className="d-flex" role="search">
                    <input className="form-control me-2" type="search" placeholder={props.searchPlaceholder} aria-label="Search"/>
                    <button className="btn btn-outline-success" type="submit">{props.searchButtonText}</button>
                </form>
                </div>
            </div>
            </nav>
        </>
    );
}


export default Header;

Bootstrap ile hızlıca bir header componenti oluşturduk. Component üzerindeki ilgili yerlerde belirttiğimiz gibi {props.searchButtonText} gibi alanlarımız mevcut. Componentin üst kısımdaki const Header = (props) => { ... alanında ise bu propsları yakalamamızı sağlıyor ve hemen altındaki console.log(props); değerinin aldığı veriler ise ana (parent) componentimizden geliyor gelin şimdi parent componentimize göz atalım .

 <div className="App">
      <Header 
                title="Emirhan Ekin" 
                homeLinkText="Anasayfa"
                linkText="Link"
                dropdownText="Açılır Menü"
                dropdownItem1="Veri seti 1"
                dropdownItem2="Veri seti 2"
                dropdownItem3="Veri seti 3"
                disabledLinkText="Devre dışı"
                searchPlaceholder="Arama yap..."
                searchButtonText="Arama"
            />

Parent componentimiz gördüğümüz gibi bir çok değer taşıyor. Bu değerler child componentimizdeki {props.searchButtonText} .. gibi alanların değerlerinin alındığı yerler. Peki bu veriler consolumuzda nasıl gözüküyor ?

Özetle;

Props, React bileşenlerinde veri aktarımını ve iletişimini sağlamak için temel bir yapı taşıdır. Bileşenler arasında veri paylaşımı ve fonksiyonların geçişi için kullanılır. Props'un salt okunur doğası, bileşenlerin öngörülebilir ve yan etkisiz olmasını sağlar. Props kullanarak bileşenlerinizi daha esnek, yeniden kullanılabilir ve dinamik hale getirebilirsiniz. React'te props kavramını anlamak, modern web geliştirme süreçlerinde etkili bileşen tabanlı uygulamalar oluşturmanın anahtarıdır.