React’te Callback Props: Ayr\u0131nt\u0131l\u0131 Bir Bak\u0131\u015f<\/p>\n
Merhaba! Fatih Soysal olarak, React geli\u015ftirmelerinde s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z ve g\u00fc\u00e7l\u00fc bir ileti\u015fim mekanizmas\u0131 sa\u011flayan Callback Props konusunu detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Bu makalede, Callback Props’lar\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve avantajlar\u0131n\u0131 \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z. Ayr\u0131ca, ba\u015fka bir geli\u015ftiricinin payla\u015ft\u0131\u011f\u0131 bilgilerden de yararlanarak, daha kapsaml\u0131 bir bak\u0131\u015f a\u00e7\u0131s\u0131 sunaca\u011f\u0131z. Bu konuda derinlemesine bilgi edinmek i\u00e7in yaz\u0131m\u0131z\u0131 dikkatlice okuyun. <\/p>\n
React’te, bile\u015fenler aras\u0131nda veri ak\u0131\u015f\u0131n\u0131 sa\u011flamak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler kullan\u0131l\u0131r. Bunlardan biri de, \u00fcst bile\u015fenden alt bile\u015fene fonksiyonlar (props olarak) g\u00f6ndermektir. Bu fonksiyonlar, alt bile\u015fende bir olay ger\u00e7ekle\u015fti\u011finde \u00fcst bile\u015fene bilgi iletmek ve orada baz\u0131 i\u015flemleri tetiklemek i\u00e7in kullan\u0131l\u0131r. \u0130\u015fte bu fonksiyonlara Callback Props<\/strong> denir. Basit\u00e7e anlatmak gerekirse, alt bile\u015fen, \u00fcst bile\u015fenin belirledi\u011fi bir fonksiyonu \u00e7a\u011f\u0131r\u0131r ve bu sayede ileti\u015fim kurulur. <\/p>\n \u00d6rne\u011fin, bir form bile\u015feniniz oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn. Bu formdaki bir butona t\u0131kland\u0131\u011f\u0131nda, form verilerini i\u015fleyen bir fonksiyonun \u00fcst bile\u015fende \u00e7al\u0131\u015fmas\u0131n\u0131 istersiniz. \u0130\u015fte bu noktada Callback Props devreye girer. Form bile\u015feni, bu i\u015fleme fonksiyonunu prop olarak al\u0131r ve butona t\u0131kland\u0131\u011f\u0131nda bunu \u00e7a\u011f\u0131r\u0131r. Bu sayede, form verileri \u00fcst bile\u015fene iletilmi\u015f olur. Bu y\u00f6ntem, \u00f6zellikle veri y\u00f6netimini ve bile\u015fenler aras\u0131 ileti\u015fimi d\u00fczenli tutmak a\u00e7\u0131s\u0131ndan \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n Callback Props kullan\u0131m\u0131n\u0131 basit bir \u00f6rnek ile a\u00e7\u0131klayal\u0131m. \u00d6ncelikle, \u00fcst bile\u015feni olu\u015ftural\u0131m: <\/p>\n javascript const handleClick = () => { return (<\/p>\n Sayac: {count}<\/p>\n ); \u015eimdi de alt bile\u015feni olu\u015ftural\u0131m:<\/p>\n javascriptCallback Props Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n
\nfunction ParentComponent() {
\n const [count, setCount] = useState(0);<\/p>\n
\n setCount(count + 1);
\n };<\/p>\n
\n}<\/p>\n
\nfunction ChildComponent({ handleClick }) {
\n return (
\n