Bugün React’in heyecan verici dünyasında yolculuğumuza devam edeceğiz ve bu sefer React Props (Özellikler) Nedir? React Props Kullanımı konusunu ele alacağız.
Props, React componentleri arasında veri taşımamıza olanak sağlayan güçlü bir araçtır. Birbiriyle iletişim kurabilen componentler oluşturarak, uygulamamızın işlevselliğini arttırabiliriz. Şimdi, bu konuyu daha ayrıntılı bir şekilde ele alalım ve örneklerle adım adım ilerleyelim.
REACT PROPS (ÖZELLİKLER) NEDİR?
Props, bir component’e dışarıdan veri geçirmek için kullanılan parametrelerdir. Bir component’e prop olarak geçirilen veriler, o component’in işlevselliğini ve görüntüsünü değiştirebilir. Props, parent component tarafından child component’e iletilir ve child component bu verilere erişebilir.
Örnek 1: Bir Component’e isim ve soyisim Props’u Geçirme
İlk örneğimizde, “App” adında bir component oluşturalım ve bu component de firstname ve lastname adında iki değişken tanımlayalım.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from "react"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> </div> ); }; export default App; |
Şimdi Hello adında bir component oluşturalım.
Hello.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; const Hello = () => { return ( <div> <h1> Merhaba </h1> </div> ); }; export default Hello; |
Hello componentimizi App componentine import edip, JSX alanında kodumuza ekleyelim.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import Hello from "./Hello"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Hello /> </div> ); }; export default App; |
Bu durumda çıktımız şu şekilde olacak:
Şimdi Hello Component’in return ettiği JSX içinde firstname ve lastname props’larını kullanarak bir selamlama mesajı oluşturacağız. Merhaba kelimesinden sonra isim ve soyisim için props’ları kullanacağım. Propslar parent componentlerden child componentlere aktarılır. Yani iki component arasında props kullanmak için, kapsayıcı olan componentte props oluşturursunuz. Daha sonra bu componentin kapsadığı child componente props’ları gönderirsiniz.
Örneğimizde parent olan App componenttir. Hello componenti de child componenttir. App componenti içindeki firstname ve lastname değişkenlerimizi Hello componentine göndermek istiyorum. Ve orada bunları kullanacağım.
Bunun için ilk olarak;
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import Hello from "./Hello"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Hello isim = ? soyisim = ? /> </div> ); }; export default App; |
App componenti içinde kullandığımız Hello componentine göndereceğim propslar için birer ad yazıyorum. Burada isim ve soyisim olarak yazdım.
Şimdi Hello componenti 2 tane props alacağını anladı. Fakat bu propsların içinde hangi bilgiler olacağını bilmiyor. isim ve soyisim adında iki paket geliyor, ama paketlerin içi şuanda boş. Bu nedenle kodumuzda isim ve soyisim props’larının eşitliğine “?” yazdım.
İkinci olarak;
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import Hello from "./Hello"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Hello isim = {firstname} soyisim = {lastname} /> </div> ); }; export default App; |
Adını koyduğumuz bu Hello componenentine gidecek paketlerin içini dolduralım. isim adlı props’umuza firstname değişkenini, soyisim adlı props’umuza da lastname adındaki değişkeni veriyoruz. Artık Hello componenti isim adındaki propsu açtığında, pakette firstname değişkeninin taşıdığı bilgilere erişmiş olacak.
Buraya kadar herşey güzel. Artık App componentinde tanımlı olan firstname ve lastname adındaki değişkenler Hello componentine gönderildi. Peki bu paketleri alıp kullanacak olan Hello componenti bunları nasıl almalı? Şimdi bunu görelim.
Üçüncü olarak;
Hello.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; const Hello = ({ isim, soyisim}) => { return ( <div> <h1> Merhaba </h1> </div> ); }; export default Hello; |
Yukarda 3. satırda olduğu gibi componentin parantezleri arasında süslü parantezler açıyoruz. Daha sonra kendisine gönderilen paketlerin (props’ların) adını yazıyoruz. Propsların arasına virgül koyuyoruz.
Şuan da App componentinde yazılan ve Hello komponentine gönderilen iki değişkenimiz Hello componentinde kullanıma hazır. Artık bu iki değişkeni istediğim yerde kullanabilirim.
Şimdi güncel kodumuza ve çıktımıza yeniden bir göz atalım.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import Hello from "./Hello"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Hello isim = {firstname} soyisim = {lastname}/> </div> ); }; export default App; |
isim propsu ile firstname bilgisini, soyisim propsu ile de lastname bilgisini Hello componentine gönderiyor.
Hello.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; const Hello = ({ isim, soyisim}) => { return ( <div> <h1> Merhaba, {isim} {soyisim} </h1> </div> ); }; export default Hello; |
Hello componenti kendisine gönderilen isim ve soyisim adlı propsları alıyor. Ve 7. satırda aldığı bilgileri mesaj olarak JSX alanında kullanıyor.
Çıktı:
Aslında React Props Nedir sorusunun cevabı bu kadar basit. Bir componentte tanımlanmış değişkenlerinizi bir alt componente göndermenin kolay ve işlevsel bir yolu. App componentinde tanımlanmış olan Ahmet Bulut bilgilerini props aracılığı ile Hello componentine gönderdik ve orada kullandık.
Umutmayalım ki sadece bir değişkeni değil, herhangi bir JavaScript nesnesini, dizisini, fonksiyonunu vs.. de aynı şekilde props yöntemi ile gönderebilirsiniz.
Önemli: Yukardaki örnekte props mantığını daha iyi anlamak için props isimlerini türkçe olarak tanımladım. Bunlar isim ve soyisim‘di.
Elbette bu şekilde kullanmak mümkün. Ama projeleriniz büyüdükçe değişkenleriniz arttıkça hangi props ismi hangi bilgiyi taşıyordu sorusu sizin için büyük bir probleme dönüşecektir. Bu nedenle props işlemlerimizce gönderdiğimiz değişkenin adını aynen kullanarak bu muhtemel karışıklığı önlemiş oluruz.
Yani elimde firstname ve lastname adında iki değişken varsa, bunları direk kendi isimlerini kullanarak gönderirim. Ve nerede görürsem bunların hangi bilgiyi taşıdığını anlarım.
Hadi şimdi kodumuzu güzelleştirelim ve props isimlerimizi değişkenlerle aynı yaparak kullanımı kolaylaştırıp, muhtemel karmaşıklıkların önüne geçelim.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import Hello from "./Hello"; const App = () => { const firstname = "Ahmet"; const lastname = "Bulut"; return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Hello firstname = {firstname} lastname = {lastname}/> </div> ); }; export default App; |
Bu durumda firstname adındaki propsum firstname bilgisini taşıyor. lastname adındaki propsum da lastname bilgisini taşıyor.
Hello.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; const Hello = ({ firstname, lastname}) => { return ( <div> <h1> Merhaba, {firstname} {lastname} </h1> </div> ); }; export default Hello; |
Gördüğünüz gibi süslü parentezler içinde daha önce isim ve soyisim olarak yazdığımız props’larımızı firstname ve lastname olarak değiştirip, aşağıda da bu şekilde kullandık.
Çıktı:
Çıktımızda aynı sonucu görmeye devam ediyoruz.
REACT STATE’LERİ PROPS İLE TAŞIMAK
Şimdi state’leri props olarak göndererek React Props Nedir sorusunu daha iyi anlayalım. Eğer state konusunu öğrenmek veya hatırlamak isterseniz aşağıdaki linkten state ile ilgili yazımı okuyabilirsiniz.
React State Nedir? React State Kullanımı
App componentimizde bir renk dizisi oluşturalım ve bunu state içinde tutalım.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { useState } from "react"; import Colors from "./Colors"; const App = () => { const [myColors, setMyColors] = useState(["white", "red", "blue"]); return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React props kullanımım.</p> <br /> <Colors myColors={myColors} /> </div> ); }; export default App; |
Şuan da App componentinde myColors isimli bir state’imiz var. Bu state 3 renk adını dizi olarak tutuyor. Bunu bir props olarak Colors componentine gönderdik.
Colors.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React from "react"; const Colors = ({ myColors}) => { return ( <div> <ul> <li>{myColors[0]}</li> <li>{myColors[1]}</li> <li>{myColors[2]}</li> </ul> </div> ); }; export default Colors; |
Colors componentine gelen propsu yakaladım ve bu props bir dizi taşıdığı için bir liste şeklinde kullandım. Şimdi son durumdaki çıktımızı inceleyelim.
Çıktı:
Gördüğünüz gibi sanki myColors dizisi bu componentte tanımlanmış gibi istediğim şekilde bu diziyi kullanabiliyorum. Bu şekilde propslar aracılığı ile bir componentten diğer componentlere veri taşımak oldukça kolay.
Umarım “React Props Nedir? React Props Kullanımı” başlıklı yazım sizin için faydalı olmuştur. Props kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
Create React App ile Hazır React Projesi Oluşturma
