React componentleri arası prop geçişi

Özellikle yeni başlayanlar için anlaşılması ve kullanımı güç gelebilen bir konu react’ta prop kullanımı. Türkçe kaynak bu noktada da kısıtlı olduğu için bu yazıyı yazmak istedim. Kısaca prop nedir ve niçin kullanılır konularını anlattıktan sonra üç başlık halinde propların componentler arası geçişlerini ele alacağım.

Prop nedir ve niçin kullanılır?

Property kelimesinin kısaltması olarak react dünyasına dahil edilmiş olan prop, kısaca içinde bulunduğu component’in bir özelliğini temsil eder.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Örneğin buradaki kullanımda, name prop’u Welcome component’inin name özelliğini temsil eder ve çağırıldığı yerde özelleştirilerek kullanılabilir(bu kısmın detaylarını daha sonra ele alacağız)

Prop konusunu kısaca izah ettikten sonra (bu yazının amacı bu olmadığı için kısa tutuyorum, dileyenler daha detaylı açıklamaları tr.reactjs.org adresinden okuyabilirler) propların componentler arasında nasıl geçiş sağladığını inceleyelim.

1. Parent’tan Child’a prop geçişi

Bu kısma girerken parent, child ve sibling kavramlarının tanımını yapmak gerekir, açıklamaya çalışalım… Yukarıda örnek verdiğimiz ‘Welcome’ class’ını child kabul edersek, bu Welcome class’ını import edip kullandığımız ‘App’ class’ı ise parent olarak isimlendirilir. Welcome class’ı ile aynı seviyede bir ‘Goodbye’ class’ı yarattığımızı farz edelim, aynı şekilde name prop’u olsun. Bu class’ı da import edip App class’ı içerisinde kullanalım. Şekil 2'de de görüldüğü gibi; App class’ı yine parent, Goodbye ve Welcome class’ları App’in child’ları olmuş ve kendi aralarında da sibling ilişkisi kurmuş oldu.

şekil: 2

Şimdi Parant’tan Child’a prop geçişini reelize edelim:

class App extends React.Component {
render() {
        
        return (
            <div>
                 <Welcome name = "Maradona" />
            </div>
        );    
    }
}

class Welcome extends React.Component {
render() {
        
        return (
            <div>
                Parent'tan gelen isim: {this.props.name}
               {*/ Burada Maradona yazısı görünecek \*}                   
            </div>
        );
    }
}

Bu örneğimizde; App class’ı parent ve Welcome class’ı child olarak konumlandı. Parent’ın içinde child class’ını çağırıp bir değer ataması yapabildik, çünkü child’ın “name” prop’u bulunmaktaydı…

2. Child’dan Parent’a prop geçişi

Burada, child class’ımızdan parent’a doğru bir prop aktarmamız gerektiğini düşünelim. Bunu yukarıdaki örnekteki gibi yapamayız hiyerarşik olarak. Burada bizim işimizi kolaylaştıran bir fonksiyon türü var: “callback” ve bunu detaylandıralım.

Adım 1: Parent class’ımızın içinde; ana işlemi yapacak olan bir callback fonksiyonu tanımlarız, örneğimizdeki adı “mainCallBackFunction”

Adım 2: Parent class’ımızın içinde; child’ı çağırdığımız yerde fonksiyonları birbirine eşitleriz, yani: callback={this.mainCallbackFunction}

Adım 3: Child class’ımızın içinde; “sendData” (isminin bir önemi yok) isimli bir fonksiyon yardımıyla callback prop’unu tetikleriz:

class Parent extends React.Component {
state = { callbackMessage: "" }
mainCallbackFunction = (childData) => { 
   this.setState({ callbackMessage: childData }) 
}
render() {
        return (
            <div>
              <Child callback={this.mainCallbackFunction}/>
              <p> {this.state.callbackMessage} </p> 
              {*/ Burada <p>'nin içinde MERHABA PARENT görünecek \*}
            </div>
        );}
}

class Child extends React.Component{
sendData = () => {
   this.props.callback("MERHABA PARENT");    
}
render() { 
  return 
    <div>
     {this.sendData}
    </div>
    }
};

2. Sibling’den Sibling’e prop geçişi

Siblingler arasında (yani iki tane child arası, yukarıda 1. kısımda anlatmıştık) prop geçişi sağlamak için bazı yöntemler mevcut. Örneğin, parent’ta fonksiyonları ortaklayıp aşağıdaki classlarda kullanmak gibi. Ancak ben bundan hiç bahsetmeyeceğim ve sadece sık kullanılan bir yöntemi tekrar edip yazıyı bitireceğim: global state kullanımı. Bunun için Redux/Mobx yardımcı kütüphaneleri veya Context kullanılabilir. Temel mantık, global bir merkez üzerinden verileri taşımaktır aşağıdaki resimde gösterildiği gibi:

Context: https://tr.reactjs.org/docs/context.html

Redux: https://redux.js.org/

Mobx: https://mobx.js.org/README.html

Bunları anlatmak ve detaylandırmak fazla süreceğinden sadece ilgili linkleri bırakıp yazıyı bitiriyorum. Sorularınızı ve görüşlerinizi esirgemeyiniz :)