{"id":19037,"date":"2025-04-24T03:45:14","date_gmt":"2025-04-24T00:45:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-props-bilesenler-arasi-veri-gecisi\/"},"modified":"2025-04-24T03:45:14","modified_gmt":"2025-04-24T00:45:14","slug":"reactte-props-bilesenler-arasi-veri-gecisi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-props-bilesenler-arasi-veri-gecisi\/","title":{"rendered":"React’te Props: Bile\u015fenler Aras\u0131 Veri Ge\u00e7isi"},"content":{"rendered":"

React’te Props: Bile\u015fenler Aras\u0131 Veri Ge\u00e7isi<\/p>\n

Merhaba, Fatih Soysal burada! Bu makalede, React’te bile\u015fenler aras\u0131nda veri iletimini sa\u011flayan temel bir kavram olan “props”lar\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Props, React uygulamalar\u0131n\u0131zda veriyi \u00fcst bile\u015fenlerden alt bile\u015fenlere iletmek i\u00e7in olmazsa olmaz bir mekanizmad\u0131r. Anla\u015f\u0131lmas\u0131 kolay bir kavram olmas\u0131na ra\u011fmen, do\u011fru kullan\u0131m\u0131 uygulaman\u0131z\u0131n mimarisini ve okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. Bu yaz\u0131da, props’lar\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, farkl\u0131 kullan\u0131m senaryolar\u0131n\u0131 ve potansiyel tuzaklar\u0131n\u0131 inceleyece\u011fiz. <\/p>\n

Props Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

Props (properties – \u00f6zellikler), React bile\u015fenlerine veri aktarmak i\u00e7in kullan\u0131lan JavaScript nesneleridir. Bir \u00fcst bile\u015fen, alt bile\u015fenini olu\u015ftururken props olarak veri ge\u00e7irir. Alt bile\u015fen bu verileri kendi i\u00e7eri\u011fini olu\u015fturmak i\u00e7in kullan\u0131r. Bu tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131, React uygulamalar\u0131n\u0131n y\u00f6netilebilir ve tahmin edilebilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131 ad\u0131n\u0131 g\u00f6steren bir bile\u015fene, bu kullan\u0131c\u0131 ad\u0131n\u0131 props ile g\u00f6nderebilirsiniz.<\/p>\n

\n\/\/ \u00dcst bile\u015fen\nfunction App() {\n  return (\n    <div>\n      <Greeting name=\"Fatih\" \/> \n    <\/div>\n  );\n}\n\n\/\/ Alt bile\u015fen\nfunction Greeting(props) {\n  return <h1>Merhaba, {props.name}!<\/h1>;\n}\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, App<\/code> bile\u015feni, Greeting<\/code> bile\u015fenine  name<\/code>  ad\u0131nda bir prop olarak “Fatih” de\u011ferini ge\u00e7irir.  Greeting<\/code> bile\u015feni bu de\u011feri al\u0131r ve ekrana basar.  Bu basit \u00f6rnek, props’lar\u0131n \u00f6z\u00fcn\u00fc g\u00f6stermektedir;  verileri \u00fcstten alta do\u011fru iletme.<\/p>\n
Props’lar\u0131n Farkl\u0131 Kullan\u0131m Senaryolar\u0131<\/h2>\n
Props’lar, yaln\u0131zca basit veri t\u00fcrlerini de\u011fil, fonksiyonlar\u0131 ve daha karma\u015f\u0131k nesneleri de iletebilir.  Bu, bile\u015fenler aras\u0131nda etkile\u015fim kurmay\u0131 ve dinamik davran\u0131\u015flar olu\u015fturmay\u0131 sa\u011flar.  \u00d6rne\u011fin, bir butona t\u0131klama olay\u0131n\u0131 \u00fcst bile\u015fene iletmek i\u00e7in bir fonksiyon prop’u kullanabilirsiniz.<\/p>\n
\n\/\/ \u00dcst bile\u015fen\nfunction App() {\n  const handleClick = () => { console.log('Butona t\u0131kland\u0131!'); };\n  return (\n    <Button onClick={handleClick} text=\"T\u0131kla\" \/>\n  );\n}\n\n\/\/ Alt bile\u015fen\nfunction Button(props) {\n  return <button onClick={props.onClick}>{props.text}<\/button>;\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte, App<\/code> bile\u015feni handleClick<\/code> fonksiyonunu onClick<\/code> prop’u olarak Button<\/code> bile\u015fenine ge\u00e7irir. Butona t\u0131kland\u0131\u011f\u0131nda, handleClick<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r.  Bu sayede, alt bile\u015fenin olaylar\u0131n\u0131 \u00fcst bile\u015fene iletmi\u015f oluruz.<\/p>\n
Props’larda Dikkat Edilmesi Gerekenler<\/h2>\n
Props’lar\u0131 kullan\u0131rken dikkat etmeniz gereken baz\u0131 noktalar vard\u0131r.  \u00d6ncelikle, props’lar sadece okunabilirdir;  alt bile\u015fenler props’lar\u0131 de\u011fi\u015ftiremez.  Bu kural, uygulaman\u0131z\u0131n durumunun tutarl\u0131l\u0131\u011f\u0131n\u0131 ve \u00f6ng\u00f6r\u00fclebilirli\u011fini sa\u011flar. Ayr\u0131ca, props’lar gereksiz yere karma\u015f\u0131k olmamal\u0131d\u0131r;  her bile\u015fenin a\u00e7\u0131k ve net bir sorumlulu\u011fu olmal\u0131d\u0131r. Gereksiz prop kullan\u0131m\u0131, bile\u015fenlerin okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.  Do\u011fru veri y\u00f6netimi ve bile\u015fen tasar\u0131m\u0131, temiz ve anla\u015f\u0131l\u0131r bir kod yap\u0131s\u0131 sa\u011flar.  <\/p>\n
Bu makalede React’te props’lar\u0131n nas\u0131l kullan\u0131laca\u011f\u0131 detayl\u0131 olarak a\u00e7\u0131klanm\u0131\u015ft\u0131r. Umar\u0131m faydal\u0131 olmu\u015ftur.  Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> adresindeki di\u011fer makalelerime g\u00f6z atabilirsiniz.  Ayr\u0131ca, React dok\u00fcmantasyonunu inceleyerek daha derinlemesine bilgi edinebilirsiniz. React Dok\u00fcmantasyonu<\/a><\/p>\n
Faydal\u0131 Kaynaklar:<\/strong><\/p>\n