{"id":18470,"date":"2025-04-18T06:00:17","date_gmt":"2025-04-18T03:00:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-tasarim-desenleri-ozyinelemeli-kismi-ve-bilesim\/"},"modified":"2025-04-18T06:00:17","modified_gmt":"2025-04-18T03:00:17","slug":"react-tasarim-desenleri-ozyinelemeli-kismi-ve-bilesim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-tasarim-desenleri-ozyinelemeli-kismi-ve-bilesim\/","title":{"rendered":"React Tasar\u0131m Desenleri: \u00d6zyinelemeli, K\u0131smi ve Bile\u015fim"},"content":{"rendered":"

<\/p>\n

React Tasar\u0131m Desenleri: \u00d6zyinelemeli, K\u0131smi ve Bile\u015fim<\/p>\n

Merhaba! Ben Fatih Soysal ve bu yaz\u0131da React geli\u015ftirme s\u00fcrecinizde kar\u015f\u0131la\u015fabilece\u011finiz karma\u015f\u0131k yap\u0131lar\u0131 y\u00f6netmenize yard\u0131mc\u0131 olacak \u00fc\u00e7 \u00f6nemli tasar\u0131m deseni olan \u00f6zyinelemeli, k\u0131smi ve bile\u015fim desenlerini inceleyece\u011fiz. Bu desenleri anlamak, daha temiz, daha okunabilir ve daha kolay bak\u0131m yap\u0131labilir kod yazman\u0131za olanak tan\u0131yacak. Ayr\u0131ca, uygulamalar\u0131n\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini de art\u0131racakt\u0131r.<\/p>\n

\u00d6zyinelemeli Bile\u015fenler<\/h2>\n

\u00d6zyinelemeli bile\u015fenler, kendilerini tekrar tekrar \u00e7a\u011f\u0131rarak hiyerar\u015fik verileri veya a\u011fa\u00e7 yap\u0131lar\u0131n\u0131 render etmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir dosya sistemini veya bir a\u011fa\u00e7 yap\u0131s\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in idealdirler. Bu desen, temiz ve \u00f6zl\u00fc bir \u015fekilde karma\u015f\u0131k veri yap\u0131lar\u0131yla ba\u015fa \u00e7\u0131kman\u0131za yard\u0131mc\u0131 olur.<\/p>\n

\nfunction Tree({ nodes }) {\n  return (\n    <ul>\n      {nodes.map(node => (\n        <li key={node.id}>\n          {node.name}\n          {node.children && <Tree nodes={node.children} \/>}\n        <\/li>\n      ))}\n    <\/ul>\n  );\n}\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, Tree<\/code> bile\u015feni, kendi i\u00e7inde tekrar \u00e7a\u011fr\u0131larak bir a\u011fa\u00e7 yap\u0131s\u0131n\u0131 olu\u015fturmaktad\u0131r.  Her bir d\u00fc\u011f\u00fcm i\u00e7in, \u00e7ocuk d\u00fc\u011f\u00fcmleri varsa, Tree<\/code> bile\u015feni tekrar render edilir.  Bu, olduk\u00e7a temiz ve okunabilir bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
K\u0131smi Uygulama (Higher-Order Components – HOC)<\/h2>\n
K\u0131smi uygulama, bir bile\u015feni sarmalayarak (wrapper) onun i\u015flevselli\u011fini geni\u015fleten bir fonksiyondur.  Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r. \u00d6rne\u011fin, bir bile\u015fene veri getirme, yetkilendirme veya g\u00fcncelleme gibi i\u015flemler eklemek i\u00e7in kullan\u0131labilir.  HOC’ler, \u00f6zellikle kodun tekrar kullan\u0131m\u0131 a\u00e7\u0131s\u0131ndan son derece faydal\u0131d\u0131r.  Bununla birlikte, karma\u015f\u0131kla\u015ft\u0131k\u00e7a kodun okunabilirli\u011fini azaltabildikleri de unutulmamal\u0131d\u0131r.<\/p>\n
\nconst withAuth = (WrappedComponent) => {\n  return (props) => {\n    const isAuthenticated = checkAuthentication(); \/\/Yetkilendirme kontrol\u00fc\n    return isAuthenticated ? <WrappedComponent {...props} \/> : <Redirect to=\"\/login\" \/>;\n  };\n};\n<\/code><\/pre>\n
Bu \u00f6rnekte, withAuth<\/code> HOC’si, sarmalad\u0131\u011f\u0131 bile\u015fenin yetkilendirilmi\u015f kullan\u0131c\u0131lar taraf\u0131ndan eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.  Yetkilendirme ba\u015far\u0131s\u0131z olursa, kullan\u0131c\u0131 giri\u015f sayfas\u0131na y\u00f6nlendirilir.<\/p>\n
Bile\u015fim (Composition)<\/h2>\n
Bile\u015fim, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini daha k\u00fc\u00e7\u00fck, daha y\u00f6netilebilir bile\u015fenlerden olu\u015fturma yakla\u015f\u0131m\u0131d\u0131r. Bu, kodun tekrar kullan\u0131labilirli\u011fini art\u0131r\u0131r, bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve daha temiz bir mimari sa\u011flar.  B\u00fcy\u00fck ve karma\u015f\u0131k bir aray\u00fcz\u00fc daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lerek, her bir par\u00e7an\u0131n test edilmesi ve y\u00f6netilmesi \u00e7ok daha kolay hale gelir.  Ayr\u0131ca, yeni \u00f6zellikler eklemek i\u00e7in daha az \u00e7aba harcan\u0131r.<\/p>\n
\u00d6rne\u011fin, bir e-ticaret sitesindeki \u00fcr\u00fcn listesi bile\u015feni, \u00fcr\u00fcn kart\u0131 bile\u015fenleri ve filtreleme bile\u015fenlerinin bir bile\u015fimi olabilir.  Bu sayede, her bir bile\u015fen ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilir ve test edilebilir.<\/p>\n
\u00d6zetle, \u00f6zyineleme, k\u0131smi uygulama ve bile\u015fim, React uygulamalar\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r.  Bu desenleri etkili bir \u015fekilde kullanarak, daha temiz, daha \u00f6l\u00e7eklenebilir ve daha kolay bak\u0131m yap\u0131labilir uygulamalar geli\u015ftirebilirsiniz.  Bu konuda daha fazla bilgi edinmek i\u00e7in web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n
Ayr\u0131ca, bu konuda daha derinlemesine bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz:<\/p>\n