React.js'te Props Kullanımı

React.js'in en önemli özelliklerden birisi komponent yapısı. Tekrar kullanabilir komponentler oluşturmamız için bileşenlerin konfigüre edilebilir olması gerekiyor. İşte bu konfigürasyon işlemini propertyler ile yapıyoruz.

Örnek vermek gerekirse, bir üretim bandını düşünelim. Bu üretim bandında farklı renklerde ama şekil olarak birbirinin aynısı kutular imal ediliyor olsun. İmal sırası gelen kutunun rengini de fabrika işçisi seçiyor olsun. İşte bu renk seçim butonu bizim propertylerimiz oluyor.

Aşağıdaki kod ile propsların nasıl çalıştığını anlamaya çalışalım.

// FancyButton.js
import '../FancyButton.css';

const FancyButton = (props) => {

    const buttonStyle = { 
        animation: `rotation ${props.second} infinite linear `,
        backgroundColor: props.color
    };

    return(
        <button style={buttonStyle}>
            Fancy!!
        </button>
    )
}

// App.js
import './App.css';
import FancyButton from './components/FancyButton';

function App() {
  return (
    <div className="App">
      <FancyButton color='aqua' second='3s' />
    </div>
  );
}

export default App;

FancyButton isimli bir komponentim var. Bu komponenti sayfaya import ettiğimde color ve second isimli iki property değeri giriyorum. Girdiğim bu property değerlerini FancyButton içerisinde handle etmenin iki farklı tarzı var. Birincisi yukarıdaki örnekteki gibi bütün propertyleri tek bir 'props' objesi içerisine gönderip o obje içerisinden kullanmak.

İkinci tarz ise gönderilen propertyleri aşağıdaki örnekteki gibi FancyButton fonksiyonunun parametre aldığı yere açık bir obje olarak yazmak.

// FancyButton.js
import '../FancyButton.css';

const FancyButton = ({color, second}) => {

    const buttonStyle = { 
        animation: `rotation ${second} infinite linear `,
        backgroundColor: color
    };

    return(
        <button style={buttonStyle}>
            Fancy!!
        </button>
    )
}

export default FancyButton;

// App.js
import './App.css';
import FancyButton from './components/FancyButton';

function App() {
  return (
    <div className="App">
      <FancyButton color='aqua' second='3s' />
    </div>
  );
}

export default App;

İki kullanımda temelde aynı amaca hizmet ediyor ve aynı işlevi görüyorlar. Syntax değişmesi dışında bir farkları yok. İkinci kullanımı tercih ederseniz her props kullanımında doğal olarak props yazmak zorunda kalmazsınız. Eğer propslarınız çoksa belki ilk kullanım karmaşayı önlemek adına avantajlı olabilir.

Default Props

Eğer komponentinizin props'larına default değer atamak istiyorsanız defaultProps'a atama yaparak bu işlemi gerçekleşitrebilirsiniz.

export default function App() {
  return (
    <Car />
  );
}

function Car(props) {
  return<div>{props.brand}</div> // Output: BMW
}

Car.defaultProps = {
  brand: 'BMW',
};