React ile Özel Sayfalandırma (Pagination) Nasıl Oluşturulur?

// ProductList.js (itemsPerPage seçeneği eklenmiş)
import React, { useState, useEffect } from 'react';
// ... allItems tanımı

function ProductList() {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const itemsPerPageOptions = [5, 10, 20, 50]; // Kullanıcının seçebileceği seçenekler

  const totalPages = Math.ceil(allItems.length / itemsPerPage);

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = allItems.slice(indexOfFirstItem, indexOfLastItem);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  const handleItemsPerPageChange = (e) => {
    setItemsPerPage(Number(e.target.value));
    setCurrentPage(1); // Sayfa boyutunu değiştirince ilk sayfaya dön
  };

  return (
    

      

      

        Sayfa Başına Öğeler: 
        
          {itemsPerPageOptions.map(option => (
            
              {option}
            
          ))}
        
      

      

        {currentItems.map((item, index) => (
          
{item}
        ))}
      

      
    
  );
}

export default ProductList;

handleItemsPerPageChange fonksiyonu, itemsPerPage durumunu günceller ve aynı zamanda currentPage‘i 1’e sıfırlar. Bu, kullanıcı farklı bir sayfa boyutu seçtiğinde tutarlı bir deneyim sağlar.

URL Parametreleri ile Sayfa Durumunu Yönetme

Sayfalandırma durumunu URL’de saklamak (örneğin, ?page=2&limit=10), kullanıcıların mevcut sayfayı tarayıcı geçmişinde tutmasını, yer imi eklemesini veya bağlantıyı başkalarıyla paylaşmasını sağlar. Bu, uygulamaların daha kullanıcı dostu ve SEO uyumlu olmasına yardımcı olur. React Router kullanıyorsanız, useSearchParams hook’u bu işlem için idealdir.

// ProductList.js (URL parametreleri ile entegrasyon)
import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom'; // React Router v6+ için

// ... allItems tanımı

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();

  // URL'den sayfa ve limit değerlerini oku, yoksa varsayılanları kullan
  const initialPage = Number(searchParams.get('page')) || 1;
  const initialItemsPerPage = Number(searchParams.get('limit')) || 10;

  const [currentPage, setCurrentPage] = useState(initialPage);
  const [itemsPerPage, setItemsPerPage] = useState(initialItemsPerPage);
  const itemsPerPageOptions = [5, 10, 20, 50];

  const totalPages = Math.ceil(allItems.length / itemsPerPage);

  // URL parametreleri değiştiğinde veya bileşen yüklendiğinde durumu güncelle
  useEffect(() => {
    setCurrentPage(Number(searchParams.get('page')) || 1);
    setItemsPerPage(Number(searchParams.get('limit')) || 10);
  }, [searchParams]);

  // Sayfa veya limit değiştiğinde URL'yi güncelle
  useEffect(() => {
    const newSearchParams = new URLSearchParams();
    newSearchParams.set('page', currentPage.toString());
    newSearchParams.set('limit', itemsPerPage.toString());
    setSearchParams(newSearchParams);
  }, [currentPage, itemsPerPage, setSearchParams]);


  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = allItems.slice(indexOfFirstItem, indexOfLastItem);

  const paginate = (pageNumber) => {
    if (pageNumber < 1 || pageNumber > totalPages) return; // Geçersiz sayfa numarası kontrolü
    setCurrentPage(pageNumber);
  };

  const handleItemsPerPageChange = (e) => {
    setItemsPerPage(Number(e.target.value));
    setCurrentPage(1); // Sayfa boyutunu değiştirince ilk sayfaya dön
  };

  return (
    

      {/ ... (önceki render kısmı) /}
    
  );
}

export default ProductList;

Bu entegrasyonla:
* useSearchParams hook’u, URL sorgu parametrelerini okumak ve yazmak için kullanılır.
* initialPage ve initialItemsPerPage değerleri URL’den okunur. Eğer URL’de yoksa varsayılan değerler kullanılır.
* useEffect hook’ları, searchParams değiştiğinde React durumunu güncellemek ve currentPage veya itemsPerPage değiştiğinde URL’yi güncellemek için kullanılır. Bu, uygulamanızın URL ile senkronize kalmasını sağlar.
* paginate fonksiyonuna eklenen kontrol, geçersiz sayfa numaralarına (örneğin, 0 veya toplam sayfa sayısından büyük) gidilmesini engeller.

Bu kurulum, uygulamanızın sayfalandırma durumunu kalıcı hale getirir ve kullanıcıların daha iyi bir deneyim yaşamasını sağlar.

Performans ve Kullanıcı Deneyimi İpuçları

Özel bir sayfalandırma bileşeni oluştururken, sadece işlevselliğe değil, aynı zamanda performansa ve kullanıcı deneyimine de dikkat etmek önemlidir.

Lazy Loading / Infinite Scroll Karşılaştırması

Sayfalandırma, büyük veri kümelerini yönetmek için harika bir yöntemdir, ancak her zaman en iyi çözüm olmayabilir. Alternatif olarak, “Lazy Loading” (tembel yükleme) veya “Infinite Scroll” (sonsuz kaydırma) gibi teknikler de düşünülebilir.
* Sayfalandırma: Kullanıcıya toplam sayfa sayısını ve mevcut konumunu net bir şekilde gösterir. Belirli bir sayfaya doğrudan gitme olanağı sunar. Genellikle arama sonuçları, ürün katalogları gibi yapılandırılmış veriler için uygundur.
* Lazy Loading / Infinite Scroll: Kullanıcı sayfayı aşağı kaydırdıkça daha fazla içeriği dinamik olarak yükler. Kullanıcıların sürekli olarak yeni içerikle karşılaşmasını sağlar. Sosyal medya akışları, haber siteleri gibi sürekli akış halindeki içerikler için daha uygundur.
Seçim, uygulamanızın içeriğinin türüne ve kullanıcıların bu içerikle nasıl etkileşim kurmasını istediğinize bağlıdır.

SEO Dostu Sayfalandırma

Arama motorları, içeriğinizi keşfetmek ve dizine eklemek için sayfalandırma yapısını doğru bir şekilde anlamalıdır.
* Anlamsal HTML: Sayfalandırma bağlantılarınızın etiketleri olduğundan ve href niteliklerinin doğru URL’leri işaret ettiğinden emin olun. Örneğin, 2.
* rel="prev" ve rel="next": Her sayfanın bölümüne bu etiketleri ekleyerek arama motorlarına sayfaların birbirleriyle ilişkisini bildirin.

* Canonical URL: İlk sayfayı (veya ana sayfayı) canonical olarak belirtmek, yinelenen içerik sorunlarını önleyebilir.
* URL Parametreleri: Sayfa numarasını ve sayfa başına öğe sayısını URL parametrelerinde (örneğin, ?page=2&limit=10) tutmak, arama motorlarının her sayfayı ayrı bir kaynak olarak görmesine yardımcı olur.

Erişilebilirlik (ARIA)

Sayfalandırma bileşeninizin tüm kullanıcılar için erişilebilir olduğundan emin olun.
* Anlamsal Etiketler: nav etiketi, sayfalandırma navigasyonunu belirtmek için uygundur.
* ARIA Nitelikleri: aria-label veya aria-current="page" gibi ARIA nitelikleri, ekran okuyucularının sayfalandırma yapısını daha iyi anlamasına yardımcı olur. Örneğin:

* Klavye Navigasyonu: Kullanıcıların klavye ile sayfalar arasında gezinebildiğinden emin olun. Tab tuşu ile düğmeler arasında geçiş yapılabilmeli ve Enter tuşu ile sayfa değiştirilebilmelidir.

Stil ve Tasarım

Sayfalandırma bileşeninin tasarımı, uygulamanızın genel görünüm ve hissiyle uyumlu olmalıdır.
* Duyarlı Tasarım: Sayfalandırma bileşeninin farklı ekran boyutlarında (mobil, tablet, masaüstü) düzgün görünmesini ve çalışmasını sağlayın. Özellikle küçük ekranlarda, tüm sayfa numaralarını göstermek yerine “…” yapısını kullanmak daha önemlidir.
* Görsel Geri Bildirim: Tıklanabilir öğelerin üzerine gelindiğinde (hover) veya etkin (active) durumdayken görsel geri bildirim (renk değişimi, gölge vb.) sağlamak, kullanıcı deneyimini iyileştirir.
* Boşluk ve Hizalama: Düğmeler arasında yeterli boşluk bırakın ve hizalamayı doğru yapın, böylece düğmeler net bir şekilde ayrılır ve tıklaması kolay olur.

Sonuç

React ile özel sayfalandırma bileşenleri oluşturmak, uygulamanızın performansını artırmanın ve kullanıcı deneyimini zenginleştirmenin güçlü bir yoludur. Temel mantığı anlayarak ve useState, useEffect gibi React hook’larını kullanarak, veri kümenizi etkili bir şekilde yöneten ve kullanıcıların içeriğinizde rahatça gezinmesini sağlayan esnek ve özelleştirilebilir bir çözüm oluşturabilirsiniz.

Bu makalede, temel sayfalandırma mantığından başlayarak, “İlk”, “Önceki”, “Sonraki”, “Son” düğmeleri, sayfa aralığı yönetimi ve URL parametreleri ile entegrasyon gibi gelişmiş özelliklere kadar birçok konuyu ele aldık. Ayrıca, performans, SEO ve erişilebilirlik gibi kritik hususlara da değindik.

İleriye Dönük Adımlar

* Sunucu Tarafı Sayfalandırma: Gerçek dünya uygulamalarında, allItems dizisi genellikle sunucudan gelir. Sunucu tarafında page ve limit parametrelerine göre filtrelenmiş veriyi çekmek ve totalItems bilgisini de API yanıtında almak, daha ölçeklenebilir bir çözüm sunar.
* Test Etme: Bileşenlerinizi farklı senaryolarla (sıfır öğe, tek sayfa, çok sayıda sayfa) test ederek sağlamlığını sağlayın.
* UI Kütüphaneleri: Eğer sıfırdan stil yazmak istemiyorsanız, Chakra UI, Ant Design veya Material-UI gibi popüler UI kütüphanelerinin sayfalandırma bileşenlerini inceleyebilir ve uygulamanıza entegre edebilirsiniz. Bu kütüphaneler genellikle erişilebilirlik ve duyarlılık gibi konuları sizin için halleder.

Özel bir sayfalandırma bileşeni oluşturmak, React becerilerinizi geliştirirken aynı zamanda kullanıcılarınıza daha iyi bir deneyim sunmanızı sağlayacak değerli bir adımdır.