{"id":39086,"date":"2026-02-14T07:40:48","date_gmt":"2026-02-14T04:40:48","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39086"},"modified":"2026-02-14T07:40:48","modified_gmt":"2026-02-14T04:40:48","slug":"reactte-dizilerin-etkili-bir-sekilde-olusturulmasi-derinlemesine-bir-bakis","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-dizilerin-etkili-bir-sekilde-olusturulmasi-derinlemesine-bir-bakis\/","title":{"rendered":"React’te Dizilerin Etkili Bir \u015eekilde Olu\u015fturulmas\u0131: Derinlemesine Bir Bak\u0131\u015f"},"content":{"rendered":"

<\/p>\n

React’te Dizilerin Etkili Bir \u015eekilde Olu\u015fturulmas\u0131: Derinlemesine Bir Bak\u0131\u015f<\/h2>\n

React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biridir. Dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131n temel ta\u015flar\u0131ndan biri de dizileri (array) verimli bir \u015fekilde render etmektir. Bir e-ticaret sitesindeki \u00fcr\u00fcn listesinden bir sosyal medya ak\u0131\u015f\u0131ndaki g\u00f6nderilere, bir yap\u0131lacaklar listesindeki \u00f6\u011felerden bir tablodaki sat\u0131rlara kadar, \u00e7o\u011fu web uygulamas\u0131nda dinamik veri koleksiyonlar\u0131n\u0131 g\u00f6sterme ihtiyac\u0131 vard\u0131r. Bu makale, React’te dizileri render etmenin temellerinden en iyi uygulamalar\u0131na, performans optimizasyonlar\u0131ndan s\u0131k kar\u015f\u0131la\u015f\u0131lan hatalara kadar her y\u00f6n\u00fcn\u00fc derinlemesine inceleyecektir.<\/p>\n

React’te dizileri render etmek, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz\u00fc veriye dayal\u0131 ve dinamik hale getirmenin anahtar\u0131d\u0131r. Bu s\u00fcre\u00e7, genellikle bir JavaScript dizisindeki her bir \u00f6\u011feyi al\u0131p, bu \u00f6\u011feyi temsil eden bir React bile\u015feni veya JSX eleman\u0131 olu\u015fturmay\u0131 i\u00e7erir. Bu sayede, verileriniz de\u011fi\u015ftik\u00e7e kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz de otomatik olarak g\u00fcncellenir. Do\u011fru teknikleri kullanmak, uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131rken, kodunuzu daha okunabilir ve bak\u0131m\u0131 kolay hale getirir.<\/p>\n

Dizileri React’te Render Etmenin Temelleri<\/h3>\n

React’te bir diziyi render etmenin temel prensibi, JavaScript’in dizi metodlar\u0131n\u0131, \u00f6zellikle de map()<\/code> metodunu kullanarak, her bir dizi \u00f6\u011fesini bir JSX eleman\u0131na d\u00f6n\u00fc\u015ft\u00fcrmektir. React, JSX elemanlar\u0131ndan olu\u015fan bir diziyi do\u011frudan DOM’a render edebilir.<\/p>\n

Neden map() Metodu?<\/h4>\n

JavaScript’te bir dizinin elemanlar\u0131 \u00fczerinde d\u00f6nmek i\u00e7in for<\/code> d\u00f6ng\u00fcs\u00fc, forEach()<\/code> veya map()<\/code> gibi \u00e7e\u015fitli metodlar bulunur. Ancak React ba\u011flam\u0131nda, map()<\/code> metodu, dizileri render etmek i\u00e7in a\u00e7\u0131k ara en \u00e7ok tercih edilen ve \u00f6nerilen y\u00f6ntemdir. Bunun birka\u00e7 \u00f6nemli nedeni vard\u0131r:<\/p>\n

Yeni Bir Dizi D\u00f6nd\u00fcr\u00fcr:<\/strong> map()<\/code> metodu, orijinal diziyi de\u011fi\u015ftirmeden, callback fonksiyonunun her \u00e7a\u011fr\u0131s\u0131 i\u00e7in d\u00f6nd\u00fcr\u00fclen de\u011ferlerden olu\u015fan <\/em>yeni bir dizi* olu\u015fturur. React’in render mekanizmas\u0131 i\u00e7in bu, tam olarak ihtiya\u00e7 duyulan \u015feydir: JSX elemanlar\u0131ndan olu\u015fan bir dizi.
\n* JSX Elemanlar\u0131 \u00dcretme Yetene\u011fi:<\/strong> map()<\/code> i\u00e7inde kulland\u0131\u011f\u0131n\u0131z callback fonksiyonu, her bir dizi \u00f6\u011fesi i\u00e7in bir JSX eleman\u0131 (veya bir bile\u015fen) d\u00f6nd\u00fcrebilir. Bu elemanlar daha sonra React taraf\u0131ndan i\u015flenir ve DOM’a eklenir.
\n* Fonksiyonel Programlama Prensibi:<\/strong> map()<\/code> saf bir fonksiyonel programlama metodudur. Yan etkileri yoktur ve orijinal diziyi de\u011fi\u015ftirmez, bu da React’in bildirimsel (declarative) do\u011fas\u0131yla uyumludur.<\/p>\n

Di\u011fer metodlar neden tercih edilmez?
\n* forEach()<\/code>:<\/strong> forEach()<\/code> metodu, her bir \u00f6\u011fe \u00fczerinde bir i\u015flem yapar ancak bir de\u011fer d\u00f6nd\u00fcrmez. Dolay\u0131s\u0131yla, JSX elemanlar\u0131ndan olu\u015fan bir dizi olu\u015fturmak i\u00e7in do\u011frudan kullan\u0131lamaz.
\n* for<\/code> d\u00f6ng\u00fcs\u00fc:<\/strong> Geleneksel for<\/code> d\u00f6ng\u00fcs\u00fc kullan\u0131labilir olsa da, daha uzun ve daha az okunabilir bir kod yaz\u0131lmas\u0131na neden olur. Ayr\u0131ca, JSX elemanlar\u0131n\u0131 manuel olarak bir diziye eklemeniz gerekir, bu da map()<\/code>‘in sa\u011flad\u0131\u011f\u0131 kolayl\u0131\u011f\u0131 ortadan kald\u0131r\u0131r.<\/p>\n

Temel Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnekte, bir \u00fcr\u00fcnler<\/code> dizisindeki her bir \u00fcr\u00fcn i\u00e7in bir liste \u00f6\u011fesi ( <\/p>\n

  • <\/code> ) nas\u0131l olu\u015fturulur g\u00f6sterilmi\u015ftir:\n
    import React from 'react';\n\nfunction UrunListesi() {\n  const urunler = [\n    { id: 1, ad: 'Laptop', fiyat: 1200 },\n    { id: 2, ad: 'Mouse', fiyat: 25 },\n    { id: 3, ad: 'Klavye', fiyat: 75 },\n  ];\n\n  return (\n    
    \n      
    \u00dcr\u00fcnlerimiz<\/h2>\n      
      \n        {urunler.map(urun => (\n          
    • \n            {urun.ad} - {urun.fiyat} TL\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default UrunListesi;<\/code><\/pre>\n
      Bu \u00f6rnekte, urunler.map()<\/code> metodu, urunler<\/code> dizisindeki her urun<\/code> objesi i\u00e7in bir <\/p>\n
    • <\/code> eleman\u0131 d\u00f6nd\u00fcr\u00fcr. Bu \n
    • <\/code> elemanlar\u0131, JSX i\u00e7inde do\u011frudan \n
        <\/code> eleman\u0131n\u0131n \u00e7ocuklar\u0131 olarak yer al\u0131r.<\/p>\n
        JSX ve Eleman Dizileri<\/h4>\n
        React, JSX i\u00e7inde JavaScript ifadelerini kullanman\u0131za olanak tan\u0131r. S\u00fcsl\u00fc parantezler {}<\/code> i\u00e7ine yazd\u0131\u011f\u0131n\u0131z herhangi bir JavaScript ifadesi \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve sonucu render edilir. Bir diziyi render ederken, map()<\/code> metodunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc JSX elemanlar\u0131 dizisi, React taraf\u0131ndan otomatik olarak i\u015flenir.<\/p>\n
        React, bir bile\u015fenin render metodundan veya bir fonksiyonel bile\u015fenin d\u00f6n\u00fc\u015f de\u011ferinden bir JSX eleman\u0131 dizisi d\u00f6nd\u00fcr\u00fcld\u00fc\u011f\u00fcnde, bu elemanlar\u0131 DOM’da s\u0131rayla olu\u015fturur. Yukar\u0131daki \u00f6rnekte map()<\/code> metodunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc, asl\u0131nda \u015f\u00f6yle bir yap\u0131ya benzer:<\/p>\n
        [\n  
      • Laptop - 1200 TL<\/li>,\n  
      • Mouse - 25 TL<\/li>,\n  
      • Klavye - 75 TL<\/li>,\n]<\/code><\/pre>\n
        React bu diziyi al\u0131r ve her bir <\/p>\n
      • <\/code> eleman\u0131n\u0131 \n
          <\/code> eleman\u0131n\u0131n i\u00e7ine yerle\u015ftirir. Bu yetenek, dinamik listeler, tablolar ve di\u011fer tekrarlayan UI desenleri olu\u015fturmay\u0131 son derece basit ve g\u00fc\u00e7l\u00fc k\u0131lar.<\/p>\n
          Key Prop’unun Vazge\u00e7ilmez \u00d6nemi<\/h3>\n
          React’te dizileri render ederken kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z en kritik konulardan biri key<\/code> prop’udur. React geli\u015ftiricileri i\u00e7in neredeyse bir mantra haline gelmi\u015f olan “listelerde her eleman\u0131n benzersiz bir key<\/code>‘i olmal\u0131” kural\u0131, uygulaman\u0131z\u0131n performans\u0131 ve do\u011fru \u00e7al\u0131\u015fmas\u0131 a\u00e7\u0131s\u0131ndan hayati \u00f6nem ta\u015f\u0131r.<\/p>\n
          Key Nedir ve Neden Gereklidir?<\/h4>\n
          key<\/code> prop’u, React’e bir listedeki her eleman\u0131 benzersiz bir \u015fekilde tan\u0131mlamak i\u00e7in yard\u0131mc\u0131 olan \u00f6zel bir dizedir. Bu prop, React’in dahili olarak kulland\u0131\u011f\u0131 “reconciliation” (uzla\u015ft\u0131rma) algoritmas\u0131n\u0131n bir par\u00e7as\u0131d\u0131r.<\/p>\n
          Reconciliation Algoritmas\u0131:<\/strong>
          \nReact, state veya prop’lar de\u011fi\u015fti\u011finde bir bile\u015feni yeniden render etmesi gerekti\u011finde, yeni d\u00f6nd\u00fcr\u00fclen JSX a\u011fac\u0131n\u0131 (sanal DOM) \u00f6ncekiyle kar\u015f\u0131la\u015ft\u0131r\u0131r. Bu kar\u015f\u0131la\u015ft\u0131rma sonucunda, ger\u00e7ek DOM’da hangi de\u011fi\u015fikliklerin yap\u0131lmas\u0131 gerekti\u011fini belirler. Bu s\u00fcrece reconciliation denir.<\/p>\n
          Listeler s\u00f6z konusu oldu\u011funda, React’in hangi elemanlar\u0131n eklendi\u011fini, hangilerinin kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131, hangilerinin g\u00fcncellendi\u011fini veya hangilerinin yeniden s\u0131raland\u0131\u011f\u0131n\u0131 verimli bir \u015fekilde anlamas\u0131 gerekir. E\u011fer key<\/code> prop’u sa\u011flanmazsa veya yanl\u0131\u015f kullan\u0131l\u0131rsa, React bu kar\u015f\u0131la\u015ft\u0131rmay\u0131 yapmakta zorlan\u0131r ve bu durum \u00e7e\u015fitli sorunlara yol a\u00e7abilir:<\/p>\n
          *   Performans D\u00fc\u015f\u00fc\u015f\u00fc:<\/strong> key<\/code> olmadan, React listedeki elemanlar\u0131n s\u0131ras\u0131n\u0131 veya kimli\u011fini tahmin etmekte zorlan\u0131r. Bu durumda, her bir liste g\u00fcncellemesinde mevcut DOM elemanlar\u0131n\u0131 y\u0131k\u0131p yeniden olu\u015fturmak zorunda kalabilir, bu da performans\u0131 ciddi \u015fekilde etkiler. key<\/code>‘ler sayesinde React, ayn\u0131 key<\/code>‘e sahip elemanlar\u0131n ayn\u0131 “ger\u00e7ek” elemanlar oldu\u011funu bilir ve sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcnceller.
          \n*   Hatal\u0131 Durum (State) Y\u00f6netimi:<\/strong> E\u011fer liste elemanlar\u0131n\u0131z\u0131n kendi i\u00e7 state’leri varsa (\u00f6rne\u011fin, bir onay kutusunun i\u015faretli olup olmad\u0131\u011f\u0131), key<\/code>‘ler olmadan React, elemanlar\u0131n kimli\u011fini do\u011fru takip edemeyebilir. Bu, bir eleman silindi\u011finde veya yeniden s\u0131raland\u0131\u011f\u0131nda, yanl\u0131\u015f eleman\u0131n state’inin g\u00fcncellenmesine veya kaybolmas\u0131na neden olabilir.
          \n*   Yanl\u0131\u015f Veri G\u00f6r\u00fcnt\u00fcleme:<\/strong> \u00d6zellikle dinamik listelerde (ekleme, silme, s\u0131ralama), key<\/code>‘lerin yanl\u0131\u015f kullan\u0131m\u0131, kullan\u0131c\u0131ya yanl\u0131\u015f verilerin g\u00f6sterilmesine yol a\u00e7abilir. \u00d6rne\u011fin, bir liste eleman\u0131n\u0131n i\u00e7eri\u011fi ba\u015fka bir elemana aitmi\u015f gibi g\u00f6r\u00fcnebilir.<\/p>\n
          Benzersizlik Gereksinimi:<\/strong>
          \nBir listedeki key<\/code>‘ler, karde\u015f elemanlar aras\u0131nda<\/em> benzersiz olmal\u0131d\u0131r. Yani, ayn\u0131 ebeveyn alt\u0131nda render edilen elemanlar\u0131n farkl\u0131 key<\/code>‘leri olmal\u0131d\u0131r. Farkl\u0131 ebeveynler alt\u0131nda ayn\u0131 key<\/code>‘ler kullan\u0131labilir, ancak bu genellikle iyi bir uygulama de\u011fildir ve kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilir.<\/p>\n
          Do\u011fru Key Se\u00e7imi<\/h4>\n
          key<\/code> prop’unun ne kadar \u00f6nemli oldu\u011funu anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi do\u011fru key<\/code>‘i nas\u0131l se\u00e7ece\u011fimize bakal\u0131m.<\/p>\n
          1. Benzersiz ve Stabil ID’ler (Veritaban\u0131 ID’leri, UUID’ler): En \u0130yi Pratik<\/strong>
          \nBir listedeki her \u00f6\u011fe i\u00e7in benzersiz ve stabil bir kimlik (ID) kullanmak, key<\/code> prop’u i\u00e7in en ideal \u00e7\u00f6z\u00fcmd\u00fcr. Bu ID’ler genellikle veritaban\u0131ndan gelir veya bir k\u00fct\u00fcphane (\u00f6rne\u011fin uuid<\/code>) arac\u0131l\u0131\u011f\u0131yla olu\u015fturulur. Bu t\u00fcr ID’ler, \u00f6\u011fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca de\u011fi\u015fmez ve uygulaman\u0131n genelinde benzersizdir.<\/p>\n
          \/\/ Veritaban\u0131ndan gelen \u00fcr\u00fcnler\nconst urunler = [\n  { id: 'a1b2c3d4', ad: 'Laptop', fiyat: 1200 },\n  { id: 'e5f6g7h8', ad: 'Mouse', fiyat: 25 },\n  { id: 'i9j0k1l2', ad: 'Klavye', fiyat: 75 },\n];\n\n{urunler.map(urun => (\n  
        •  {\/ Benzersiz ve stabil ID kullan\u0131l\u0131yor <\/em>\/}\n    {urun.ad} - {urun.fiyat} TL\n  <\/li>\n))}<\/code><\/pre>\n
          Bu yakla\u015f\u0131m, React’in reconciliation algoritmas\u0131n\u0131n en verimli \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bir eleman eklendi\u011finde, silindi\u011finde veya yeniden s\u0131raland\u0131\u011f\u0131nda, React do\u011fru key<\/code>‘e sahip eleman\u0131 h\u0131zl\u0131ca bulabilir ve sadece gerekli g\u00fcncellemeleri yapabilir.<\/p>\n
          2. Index (Dizin) Kullan\u0131m\u0131: Ne Zaman Kabul Edilebilir ve Ne Zaman Sorunlu?<\/strong>
          \nmap()<\/code> metodunun ikinci arg\u00fcman\u0131 olarak eleman\u0131n dizinini (index) alabiliriz: map((item, index) => ...)<\/code> ve bu index<\/code>‘i key<\/code> olarak kullanabiliriz.<\/p>\n
          \/\/ K\u00d6T\u00dc UYGULAMA (\u00e7o\u011fu durumda)\n{urunler.map((urun, index) => (\n  
        •  {\/ Index key olarak kullan\u0131l\u0131yor <\/em>\/}\n    {urun.ad} - {urun.fiyat} TL\n  <\/li>\n))}<\/code><\/pre>\n
          Ne Zaman Kabul Edilebilir?<\/strong>
          \nIndex’i key<\/code> olarak kullanmak sadece \u015fu \u00fc\u00e7 ko\u015fulun ayn\u0131 anda sa\u011fland\u0131\u011f\u0131 durumlarda kabul edilebilir:<\/p>\n
          *   Liste ve elemanlar\u0131 statiktir:<\/strong> Liste elemanlar\u0131 asla de\u011fi\u015fmez (eklenmez, silinmez, yeniden s\u0131ralanmaz).
          \n*   Liste elemanlar\u0131n\u0131n kendi i\u00e7 state’i yoktur:<\/strong> Elemanlar\u0131n kendi i\u00e7inde y\u00f6netti\u011fi bir durum (state) yoktur.
          \n*   Liste asla filtrelenmez veya s\u0131ralanmaz:<\/strong> Elemanlar\u0131n s\u0131ras\u0131 veya varl\u0131\u011f\u0131 asla de\u011fi\u015fmez.<\/p>\n
          Bu senaryolar olduk\u00e7a nadirdir ve genellikle sadece tamamen statik, de\u011fi\u015fmez bir UI par\u00e7as\u0131n\u0131 render ederken ge\u00e7erlidir.<\/p>\n
          Ne Zaman Sorunlu? (\u00c7o\u011fu Durum)<\/strong>
          \nE\u011fer yukar\u0131daki ko\u015fullardan herhangi biri sa\u011flanm\u0131yorsa, index’i key<\/code> olarak kullanmak ciddi sorunlara yol a\u00e7ar:<\/p>\n
          *   Dinamik Listeler (Ekleme, Silme, S\u0131ralama):<\/strong>
          \n    Bir liste eleman\u0131 silindi\u011finde veya eklendi\u011finde, di\u011fer elemanlar\u0131n dizinleri de\u011fi\u015fir. React, bu de\u011fi\u015fen dizinleri yeni bir eleman olarak alg\u0131layabilir veya mevcut elemanlar\u0131n yanl\u0131\u015f key<\/code>‘lere sahip oldu\u011funu d\u00fc\u015f\u00fcnebilir. Bu da DOM’da yanl\u0131\u015f g\u00fcncellemeler yap\u0131lmas\u0131na, performans sorunlar\u0131na ve hatal\u0131 UI g\u00f6r\u00fcnt\u00fcs\u00fcne yol a\u00e7ar.<\/p>\n
              \u00d6rnek:<\/em>
          \n    ['A', 'B', 'C']<\/code> listesinde key={index}<\/code> ile render edelim:
          \n    A (key=0)<\/code>, B (key=1)<\/code>, C (key=2)<\/code><\/p>\n
              \u015eimdi ‘B’ eleman\u0131n\u0131 listeden \u00e7\u0131karal\u0131m: ['A', 'C']<\/code>
          \n    React \u015fimdi \u015fu elemanlar\u0131 g\u00f6r\u00fcr:
          \n    A (key=0)<\/code>, C (key=1)<\/code><\/p>\n
              React, key=0<\/code> olan eleman\u0131n hala A<\/code> oldu\u011funu anlar. Ancak, key=1<\/code> olan eleman\u0131n B<\/code>‘den C<\/code>‘ye de\u011fi\u015fti\u011fini d\u00fc\u015f\u00fcn\u00fcr. Ger\u00e7ekte olan ise B<\/code>‘nin silinip C<\/code>‘nin key=1<\/code> pozisyonuna kaymas\u0131d\u0131r. React, C<\/code>‘yi yeni bir eleman olarak olu\u015fturmak yerine, B<\/code>‘nin i\u00e7eri\u011fini C<\/code>‘nin i\u00e7eri\u011fiyle g\u00fcncelleyebilir ve bu da beklenmedik davran\u0131\u015flara neden olabilir. \u00d6zellikle C<\/code>‘nin kendi i\u00e7inde bir state’i varsa (\u00f6rne\u011fin bir input alan\u0131), o input alan\u0131n\u0131n state’i B<\/code>‘den miras kalm\u0131\u015f gibi g\u00f6r\u00fcnebilir.<\/p>\n
          *   Performans:<\/strong> Yeniden s\u0131ralama, ekleme ve silme i\u015flemlerinde index key<\/code> olarak kullan\u0131ld\u0131\u011f\u0131nda, React’in DOM’da \u00e7ok daha fazla de\u011fi\u015fiklik yapmas\u0131 gerekebilir, bu da performans\u0131 olumsuz etkiler.<\/p>\n
          key<\/code> ve id<\/code> Aras\u0131ndaki Fark:<\/strong>
          \nkey<\/code> prop’u, React’in dahili olarak kulland\u0131\u011f\u0131 \u00f6zel bir prop’tur ve DOM’a yans\u0131maz. Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131nda bir eleman\u0131 inceledi\u011finizde key<\/code>‘i g\u00f6remezsiniz.
          \nid<\/code> prop’u ise standart bir HTML niteli\u011fidir ve DOM’da id=\"...\"<\/code> \u015feklinde g\u00f6r\u00fcn\u00fcr. CSS, JavaScript veya eri\u015filebilirlik (accessibility) ama\u00e7lar\u0131 i\u00e7in kullan\u0131l\u0131r. Bir HTML eleman\u0131n\u0131n id<\/code>‘si, sayfa i\u00e7inde benzersiz olmal\u0131d\u0131r.
          \nKar\u0131\u015ft\u0131rmamak \u00f6nemlidir: key<\/code> React i\u00e7in, id<\/code> ise DOM ve taray\u0131c\u0131 i\u00e7in bir tan\u0131mlay\u0131c\u0131d\u0131r. Genellikle ayn\u0131 de\u011feri kullan\u0131rlar (\u00f6rne\u011fin bir veritaban\u0131 ID’si), ancak farkl\u0131 ama\u00e7lara hizmet ederler.<\/p>\n
          Geli\u015fmi\u015f Senaryolar ve En \u0130yi Uygulamalar<\/h3>\n
          Dizileri render etmenin temel prensiplerini ve key<\/code> prop’unun \u00f6nemini anlad\u0131ktan sonra, daha karma\u015f\u0131k senaryolara ve en iyi uygulamalara ge\u00e7ebiliriz.<\/p>\n
          Ko\u015fullu Render Etme<\/h4>\n
          Bir dizideki t\u00fcm \u00f6\u011feleri de\u011fil, belirli ko\u015fullar\u0131 sa\u011flayan \u00f6\u011feleri render etmek isteyebilirsiniz. Bunun iki ana yolu vard\u0131r:<\/p>\n
          1. filter()<\/code> ile \u00d6n Filtreleme:<\/strong>
          \nmap()<\/code> metodunu \u00e7a\u011f\u0131rmadan \u00f6nce filter()<\/code> metodunu kullanarak diziyi filtrelemek, yaln\u0131zca istedi\u011finiz \u00f6\u011felerin render d\u00f6ng\u00fcs\u00fcne girmesini sa\u011flar. Bu genellikle daha temiz ve okunabilir bir yakla\u015f\u0131md\u0131r.<\/p>\n
          function GorevListesi({ gorevler }) {\n  const tamamlanmisGorevler = gorevler.filter(gorev => gorev.tamamlandi);\n\n  return (\n    
          \n      
          Tamamlanm\u0131\u015f G\u00f6revler<\/h3>\n      
            \n        {tamamlanmisGorevler.map(gorev => (\n          
          • {gorev.metin}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}<\/code><\/pre>\n
            2. map()<\/code> \u0130\u00e7inde Ko\u015fullu Mant\u0131k:<\/strong>
            \nBazen, her bir \u00f6\u011fe i\u00e7in farkl\u0131 bir JSX yap\u0131s\u0131 render etmek veya belirli ko\u015fullar alt\u0131nda hi\u00e7bir \u015fey render etmemek isteyebilirsiniz. Bunu map()<\/code> callback’i i\u00e7inde ternary operat\u00f6r (? :<\/code>) veya mant\u0131ksal &&<\/code> operat\u00f6r\u00fc ile yapabilirsiniz.<\/p>\n
            function UrunListesi({ urunler }) {\n  return (\n    
              \n      {urunler.map(urun => (\n        
            • \n          {urun.ad} - {urun.fiyat} TL\n          {urun.stok > 0 ? (\n             (Stokta Var)<\/span>\n          ) : (\n             (Stokta Yok)<\/span>\n          )}\n        <\/li>\n      ))}\n    <\/ul>\n  );\n}<\/code><\/pre>\n
              E\u011fer bir \u00f6\u011feyi hi\u00e7 render etmek istemiyorsan\u0131z, callback fonksiyonundan null<\/code> d\u00f6nd\u00fcrebilirsiniz. React, null<\/code> veya false<\/code> d\u00f6nd\u00fcr\u00fclen elemanlar\u0131 render etmez.<\/p>\n
              function KullaniciListesi({ kullanicilar }) {\n  return (\n    
                \n      {kullanicilar.map(kullanici => (\n        kullanici.aktif ? ( \/\/ Sadece aktif kullan\u0131c\u0131lar\u0131 g\u00f6ster\n          
              • {kullanici.ad}<\/li>\n        ) : null\n      ))}\n    <\/ul>\n  );\n}<\/code><\/pre>\n
                \u0130\u00e7 \u0130\u00e7e Diziler ve Listeler<\/h4>\n
                Bazen verileriniz i\u00e7 i\u00e7e diziler \u015feklinde olabilir (\u00f6rne\u011fin, bir men\u00fcdeki alt men\u00fcler, bir tablodaki h\u00fccreler). Bu durumda, i\u00e7 i\u00e7e map()<\/code> \u00e7a\u011fr\u0131lar\u0131 kullanman\u0131z gerekir. Her seviyede benzersiz key<\/code>‘ler sa\u011flamak \u00f6nemlidir.<\/p>\n
                function Menu() {\n  const menuItems = [\n    {\n      id: 1,\n      ad: 'Elektronik',\n      altMenu: [\n        { id: 101, ad: 'Bilgisayarlar' },\n        { id: 102, ad: 'Telefonlar' },\n      ],\n    },\n    {\n      id: 2,\n      ad: 'Giyim',\n      altMenu: [\n        { id: 201, ad: 'Erkek Giyim' },\n        { id: 202, ad: 'Kad\u0131n Giyim' },\n      ],\n    },\n  ];\n\n  return (\n