React Props Nedir?

Selamlar!

React öğrenimine devam ediyoruz. İlk React yazımızda, React denilince akla ilk gelen 3 kelimeden bahsetmiştik.

1. Component: Bir kod yapısını, bir yapı içinde tanımlayıp tekrar tekrar çağırdığımız yapılardır. Function yani 🙂
2. Props: Componentler arasında veri aktarımı için kullanılan yapılardır.
3. State Management: Çekilen verileri sayfa yenilendiğinde vs. kaybetmemek için uygulama içerisinde tutmak için kullanılan yapıdır.

Component yapısını daha önce işlemiştik ve dilerseniz buradan ulaşabilirsiniz. Bu yazımda props yapılarına giriş yapıp, nedir ne değildir anlamaya çalışacağız.

Props Nedir?

React’ta kullanılan props yapısı property(özellik) isminin kısaltılmasıdır. En kısa ve öz tanımlaması; props componentler arasında veri aktarmamıza olanak tanıyan yapılardır. Props sayesinde istediğimiz verileri bir veya birden fazla component’e aktararak rahatlıkla kullanabiliriz.

Props Kullanımı

Hemen örnekler ile bunu pekiştirelim. Aşağıda statik yapıda bir kod mevcut ve maalesef bu hali ile sadece 1 adet ürün ismi ve fiyat bilgisi görüntüleyebiliyoruz.

//App.jsx

function App() {  
   return (    
      <div>
         <h3>ÜRÜN BİLGİLERİ</h3>
         <div>
             <div>İsim: Ayakkabı</div>
             <div>Fiyat: 2500₺</div>
         </div>
    </div>
  )}

Bu örnekteki kullanım hiç efektif değil çünkü birden fazla ürün ve fiyat bilgimiz olacağı için daha kullanışlı bir yapı kullanmalıyız. Bunun için props yapısı imdadımıza koşuyor.

Örnek olarak Product isminde bir component oluşturuyoruz. Parametre olarak “props” veriyoruz. Çünkü bu App.jsx de verdiğimiz propsları yakalamak için kullandığımız bir obje.

//Product.jsx

import React from 'react'

function Product(props) {  
   return ( 
      <div>
         <h3>ÜRÜN BİLGİLERİ</h3>
         <div>
             <div>İsim: {props.productName}</div>
             <div>Fiyat: {props.price}₺</div>
         </div>
     </div>   
)}

//App.jsx

import Product from './Product'
import './App.css'

function App() {  
   return ( 
     <div>
         <Product productName="Telefon" price="20500" />
         <Product productName="Ayakkabı" price="2500" />
         <Product productName="Saat" price="7500" />
    </div>
)}

Yukarıdaki yapıda Product componenti bir fonksiyon gibi çalışıyor ve bir parametre alıyor. Bu parametre “props” isminde olan bir objedir. App ana componentinde çağırırken parametreleri productName ve price şeklinde veriyoruz. Bu isimlendirmeler tamamen bize bağlı. Dilediğiniz gibi isimlendirebilirsiniz.

Unutmamamız gereken şey; burada verilen değer isimlerini Product componentinde props objesini yakaladıktan sonra yine aynı isimlerle kullanmamız gerektiğidir.

Props bir obje olduğu için dilerseniz direk değerleri açarak parametre olarak tanımlayabiliriz.

//Product.jsx

import React from 'react'

function Product({productName, price}) {
    return (
        <div>
            <h3>ÜRÜN BİLGİLERİ</h3>
            <div>
                <div>İsim: {productName}</div>
                <div>Fiyat: {price}₺</div>
            </div>
        </div>
    )
}

export default Product

Component İçinde Component Çağırma

Bir component’in içinde başka bir componenti çağırarak kullanabiliriz. Hatta child olarak çağırılan component’e yine yukarıdaki gibi props değerleri tanımlayabiliriz.

Yeni bir Container componenti tanımlıyoruz ve içinde Product componentini çağırıyoruz. Örnekte gördüğümüz children değeri Product componentidir.

//Container.jsx

import React from 'react'

function Container({ children }) {
    return (
        <div>
            <div>Container Componenti</div>
            {children}
        </div>

    )
}

export default Container

//App.jsx

import Product from './Product'
import Container from './Container'
import './App.css'

function App() {
  return (
    <div>
      <Container>
         <Product productName="Telefon" price="20500" />
         <Product productName="Ayakkabı" price="2500" />
         <Product productName="Saat" price="7500" />
      </Container>
    </div>
  )
}

export default App

Yukarıdaki örnekte <Product productName=”Telefon” price=”20500″ /> yapısında 2 adet props mevcut ancak bu sayı daha fazla olabilir ve bu sefer yazdığımız kod karışabilir. Bunun önüne geçmek için verileri tek tek göndermek yerine toplu olarak bir obje olarak gönderin ve component içinde ona göre kullanım gerçekleştirin. Bu daha temiz bir yapıya sahip olmanızı sağlayacaktır.

//App.jsx

import Product from './Product'
import Container from './Container'
import './App.css'

function App() {
  const myProductInfos = {
     productName="Telefon",
     price="20500"
   };

  return (
    <div>
      <Container>
         <Product myObj={myProductInfos} />
      </Container>
    </div>
  )
}

export default App

//Product.jsx

import React from 'react'

function Product({myProductInfos}) {
    return (
        <div>
            <h3>ÜRÜN BİLGİLERİ</h3>
            <div>
                <div>İsim: {myProductInfos.productName}</div>
                <div>Fiyat: {myProductInfos.price}₺</div>
            </div>
        </div>
    )
}

export default Product

Bu yazımda props konusunu anladığım ve anlatabildiğim kadarıyla anlatmaya çalıştım. Umarım sizlere de yardımcı olmuştur. Katkıda bulunmak isterseniz yorum yapmaktan çekinmeyiniz.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.