Web uygulamalar\u0131nda b\u00fcy\u00fck veri k\u00fcmelerini kullan\u0131c\u0131ya sunarken, t\u00fcm veriyi tek seferde y\u00fcklemek ve g\u00f6stermek hem performans hem de kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan ciddi sorunlara yol a\u00e7abilir. \u0130\u015fte bu noktada sayfaland\u0131rma (pagination) devreye girer. Sayfaland\u0131rma, b\u00fcy\u00fck bir veri setini daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara b\u00f6lerek kullan\u0131c\u0131lar\u0131n bu veriler aras\u0131nda kolayca gezinmesini sa\u011flayan temel bir UI\/UX \u00e7\u00f6z\u00fcm\u00fcd\u00fcr. React gibi modern bir JavaScript k\u00fct\u00fcphanesi ile \u00f6zel sayfaland\u0131rma bile\u015fenleri olu\u015fturmak, uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na tam olarak uyum sa\u011flayan esnek ve g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunar.<\/p>\n
Bir web sayfas\u0131nda binlerce \u00f6\u011fenin ayn\u0131 anda listelendi\u011fini hayal edin. Bu durum, kullan\u0131c\u0131n\u0131n arad\u0131\u011f\u0131 bilgiyi bulmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r, sayfay\u0131 kayd\u0131rma (scrolling) i\u015flemini yorucu hale getirir ve genel kullan\u0131c\u0131 deneyimini olumsuz etkiler. Sayfaland\u0131rma, i\u00e7eri\u011fi mant\u0131ksal sayfalara b\u00f6lerek kullan\u0131c\u0131lar\u0131n daha odakl\u0131 bir \u015fekilde gezinmesine olanak tan\u0131r. Kullan\u0131c\u0131lar hangi sayfada olduklar\u0131n\u0131 bilir, toplam ka\u00e7 sayfa oldu\u011funu g\u00f6r\u00fcr ve belirli bir sayfaya do\u011frudan atlayabilirler. Bu, \u00f6zellikle e-ticaret siteleri, bloglar, forumlar ve veri tablolar\u0131 gibi yo\u011fun i\u00e7erikli uygulamalar i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Sayfaland\u0131rman\u0131n en b\u00fcy\u00fck faydalar\u0131ndan biri performans optimizasyonudur. T\u00fcm veriyi veritaban\u0131ndan \u00e7ekip istemciye g\u00f6ndermek ve ard\u0131ndan taray\u0131c\u0131da render etmek, \u00f6zellikle y\u00fcksek boyutlu veri setleri i\u00e7in uzun y\u00fckleme s\u00fcrelerine ve bellek sorunlar\u0131na neden olabilir. Sayfaland\u0131rma sayesinde, sunucudan yaln\u0131zca mevcut sayfa i\u00e7in gerekli olan veri par\u00e7as\u0131 istenir ve render edilir. Bu, hem sunucu y\u00fck\u00fcn\u00fc azalt\u0131r hem de istemci taraf\u0131ndaki sayfa y\u00fckleme s\u00fcresini ve taray\u0131c\u0131 performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Uygulaman\u0131z\u0131n daha h\u0131zl\u0131 ve daha duyarl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
Sayfaland\u0131rma, veri y\u00f6netimini daha d\u00fczenli hale getirir. Geli\u015ftiriciler, sunucu taraf\u0131nda veri taban\u0131ndan belirli bir aral\u0131ktaki veriyi (\u00f6rne\u011fin, LIMIT ve OFFSET kullanarak) \u00e7ekerek istemciye g\u00f6nderir. Bu, hem sunucu taraf\u0131nda daha verimli sorgular yaz\u0131lmas\u0131na olanak tan\u0131r hem de istemci taraf\u0131nda gelen verinin boyutunu kontrol alt\u0131nda tutar. Ayr\u0131ca, sayfaland\u0131rma, kullan\u0131c\u0131lar\u0131n belirli filtreler veya s\u0131ralama se\u00e7enekleri uygulad\u0131\u011f\u0131nda da bu se\u00e7eneklerin yaln\u0131zca ilgili sayfa verilerine uygulanmas\u0131n\u0131 sa\u011flayarak veri manip\u00fclasyonunu kolayla\u015ft\u0131r\u0131r.<\/p>\n
\u00d6zel bir sayfaland\u0131rma bile\u015feni olu\u015fturmadan \u00f6nce, temel kavramlar\u0131 ve arkas\u0131ndaki mant\u0131\u011f\u0131 anlamak \u00f6nemlidir. Bu kavramlar, sayfaland\u0131rma i\u015flemini do\u011fru bir \u015fekilde uygulamak i\u00e7in birer yap\u0131 ta\u015f\u0131 g\u00f6revi g\u00f6r\u00fcr.<\/p>\n
currentPage<\/code> (Mevcut Sayfa)<\/h4>\ncurrentPage<\/code>, kullan\u0131c\u0131n\u0131n o an g\u00f6r\u00fcnt\u00fcledi\u011fi sayfan\u0131n numaras\u0131d\u0131r. Genellikle 1’den ba\u015flar. Bu de\u011fer, kullan\u0131c\u0131n\u0131n hangi veri blo\u011funu g\u00f6rmesi gerekti\u011fini belirlemede merkezi bir rol oynar. Sayfaland\u0131rma bile\u015fenindeki d\u00fc\u011fmelere t\u0131kland\u0131\u011f\u0131nda bu de\u011fer g\u00fcncellenir.<\/p>\nitemsPerPage<\/code> (Sayfa Ba\u015f\u0131na \u00d6\u011fe Say\u0131s\u0131)<\/h4>\nitemsPerPage<\/code>, her bir sayfada ka\u00e7 adet \u00f6\u011fe (veri kayd\u0131) g\u00f6sterilece\u011fini belirleyen sabit bir de\u011ferdir. Bu de\u011fer, uygulaman\u0131n tasar\u0131m\u0131na ve kullan\u0131c\u0131n\u0131n tercihine g\u00f6re ayarlanabilir. \u00d6rne\u011fin, bir blog sayfas\u0131nda 10 yaz\u0131, bir e-ticaret sitesinde 20 \u00fcr\u00fcn g\u00f6sterilebilir. Bu de\u011fer, toplam veri k\u00fcmesinin ka\u00e7 sayfaya b\u00f6l\u00fcnece\u011fini hesaplamak i\u00e7in kullan\u0131l\u0131r.<\/p>\ntotalItems<\/code> (Toplam \u00d6\u011fe Say\u0131s\u0131)<\/h4>\ntotalItems<\/code>, veri k\u00fcmesindeki toplam \u00f6\u011fe say\u0131s\u0131d\u0131r. Bu bilgi genellikle sunucu taraf\u0131ndan sa\u011flan\u0131r ve sayfaland\u0131rma bile\u015feninin ka\u00e7 adet sayfa numaras\u0131 g\u00f6stermesi gerekti\u011fini hesaplamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\ntotalPages<\/code> (Toplam Sayfa Say\u0131s\u0131)<\/h4>\ntotalPages<\/code>, totalItems<\/code> ve itemsPerPage<\/code> kullan\u0131larak hesaplanan toplam sayfa say\u0131s\u0131d\u0131r. Bu de\u011fer, sayfaland\u0131rma bile\u015feninin ka\u00e7 adet sayfa numaras\u0131 d\u00fc\u011fmesi olu\u015fturaca\u011f\u0131n\u0131 belirler. Genellikle Math.ceil(totalItems \/ itemsPerPage)<\/code> form\u00fcl\u00fc ile hesaplan\u0131r, \u00e7\u00fcnk\u00fc kalan \u00f6\u011feler i\u00e7in de yeni bir sayfa a\u00e7\u0131lmas\u0131 gerekir.<\/p>\nVeri Dilimleme Mant\u0131\u011f\u0131<\/h4>\n
Sayfaland\u0131rman\u0131n temelinde, b\u00fcy\u00fck veri k\u00fcmesini mevcut sayfa numaras\u0131na ve sayfa ba\u015f\u0131na \u00f6\u011fe say\u0131s\u0131na g\u00f6re dilimleme (slicing) mant\u0131\u011f\u0131 yatar. Bu, genellikle JavaScript’teki slice()<\/code> dizin metodunu kullanarak yap\u0131l\u0131r.
\n indexOfLastItem<\/code>: Mevcut sayfadaki son \u00f6\u011fenin dizinini (index) belirler. Form\u00fcl\u00fc: currentPage <\/em> itemsPerPage<\/code>.
\n* indexOfFirstItem<\/code>: Mevcut sayfadaki ilk \u00f6\u011fenin dizinini belirler. Form\u00fcl\u00fc: indexOfLastItem - itemsPerPage<\/code>.
\n* currentItems<\/code>: indexOfFirstItem<\/code> ile indexOfLastItem<\/code> aras\u0131ndaki \u00f6\u011feleri i\u00e7eren veri dilimidir. Bu dilim, kullan\u0131c\u0131n\u0131n o an g\u00f6rd\u00fc\u011f\u00fc veriyi temsil eder.<\/p>\nBu temel kavramlar\u0131 anlad\u0131ktan sonra, React’ta bir sayfaland\u0131rma bile\u015feni olu\u015fturmaya ba\u015flayabiliriz.<\/p>\n
React’ta Temel Bir Sayfaland\u0131rma Bile\u015feni Olu\u015fturma<\/h3>\n
React’ta \u00f6zel bir sayfaland\u0131rma bile\u015feni olu\u015fturmak, genellikle bir ana bile\u015fen (\u00f6rne\u011fin, ProductList<\/code> veya BlogPosts<\/code>) ve bir alt bile\u015fen (Pagination<\/code>) kullanarak yap\u0131l\u0131r. Ana bile\u015fen, veriyi y\u00f6netirken, alt bile\u015fen sayfaland\u0131rma kontrollerini render eder ve sayfa de\u011fi\u015fikliklerini ana bile\u015fene bildirir.<\/p>\nVeri Durumu ve Sayfaland\u0131rma Parametreleri<\/h4>\n
\u00d6ncelikle, uygulaman\u0131z\u0131n ana bile\u015feninde (\u00f6rne\u011fin, App.js<\/code> veya ProductList.js<\/code>) sayfaland\u0131rma i\u00e7in gerekli durumlar\u0131 y\u00f6netmemiz gerekir. useState<\/code> hook’u bu durumlar\u0131 y\u00f6netmek i\u00e7in idealdir.<\/p>\nimport React, { useState, useEffect } from 'react';\n\n\/\/ \u00d6rnek bir veri k\u00fcmesi\nconst allItems = Array.from({ length: 100 }, (_, i) => \u00d6\u011fe ${i + 1}<\/code>);\n\nfunction ProductList() {\n const [currentPage, setCurrentPage] = useState(1);\n const [itemsPerPage, setItemsPerPage] = useState(10); \/\/ Her sayfada 10 \u00f6\u011fe g\u00f6ster\n\n \/\/ Toplam sayfa say\u0131s\u0131n\u0131 hesapla\n const totalPages = Math.ceil(allItems.length \/ itemsPerPage);\n\n \/\/ Mevcut sayfada g\u00f6sterilecek \u00f6\u011feleri hesapla\n const indexOfLastItem = currentPage * itemsPerPage;\n const indexOfFirstItem = indexOfLastItem - itemsPerPage;\n const currentItems = allItems.slice(indexOfFirstItem, indexOfLastItem);\n\n \/\/ Sayfa de\u011fi\u015ftirme fonksiyonu\n const paginate = (pageNumber) => setCurrentPage(pageNumber);\n\n return (\n \n \n \n {currentItems.map((item, index) => (\n - {item}<\/li>\n ))}\n <\/ul>\n\n {\/ Sayfaland\u0131rma bile\u015feni buraya gelecek <\/em>\/}\n
Yukar\u0131daki \u00f6rnekte:
\n* allItems<\/code>: Uygulaman\u0131n t\u00fcm veri k\u00fcmesini temsil eden basit bir dizi. Ger\u00e7ek bir uygulamada bu veri genellikle bir API’den \u00e7ekilir.
\n* currentPage<\/code>: Mevcut sayfa numaras\u0131n\u0131 tutar. Ba\u015flang\u0131\u00e7ta 1 olarak ayarlanm\u0131\u015ft\u0131r.
\n* itemsPerPage<\/code>: Her sayfada ka\u00e7 \u00f6\u011fe g\u00f6sterilece\u011fini belirler.
\n* totalPages<\/code>: Toplam sayfa say\u0131s\u0131d\u0131r, allItems.length<\/code> ve itemsPerPage<\/code> kullan\u0131larak hesaplan\u0131r.
\n* indexOfFirstItem<\/code>, indexOfLastItem<\/code>, currentItems<\/code>: Mevcut sayfada g\u00f6sterilecek \u00f6\u011feleri dilimlemek i\u00e7in kullan\u0131lan de\u011fi\u015fkenlerdir.
\n* paginate<\/code>: currentPage<\/code> durumunu g\u00fcncelleyen bir fonksiyondur.<\/p>\nSayfaland\u0131rma Mant\u0131\u011f\u0131n\u0131n Uygulanmas\u0131<\/h4>\n
Pagination<\/code> bile\u015fenimiz, ProductList<\/code> bile\u015feninden gerekli prop’lar\u0131 alacak ve sayfa numaras\u0131 d\u00fc\u011fmelerini render edecektir.<\/p>\n\/\/ Pagination.js\nimport React from 'react';\n\nconst Pagination = ({ itemsPerPage, totalItems, paginate, currentPage, totalPages }) => {\n const pageNumbers = [];\n\n for (let i = 1; i <= totalPages; i++) {\n pageNumbers.push(i);\n }\n\n return (\n