Listeler ve Anahtarlar
React’te listeler ve anahtarlar (Lists and Keys), modern web uygulamaları ve SPA’larda dinamik ve performanslı arayüzler oluşturmak için temel yapı taşlarıdır. Listeler, bir veri dizisinden birden çok öğeyi render etmek için kullanılır; örneğin görevler, ürünler veya kullanıcı yorumları. Anahtarlar (keys) ise her bir liste öğesinin benzersiz bir şekilde tanımlanmasını sağlar ve React’in hangi öğelerin değiştiğini, eklendiğini veya silindiğini izlemesine olanak tanır. Bu sayede gereksiz yeniden render’lar engellenir ve uygulamanın performansı artar.
Listeler ve anahtarlar, React’in temel kavramlarıyla yakından ilişkilidir: bileşenler, state yönetimi, veri akışı ve bileşen yaşam döngüsü. Bileşenler arayüz ve mantığı kapsüller, state ve props verilerin iletimini sağlar, anahtarlar ise sadece gerekli öğelerin güncellenmesini garanti eder. Bu eğitimde, listelerin etkin render edilmesini, benzersiz anahtarların atanmasını, yeniden kullanılabilir bileşenlerin oluşturulmasını ve performans optimizasyonunu öğreneceksiniz. Tüm bu bilgiler modern web uygulamalarında ve SPA projelerinde doğrudan uygulanabilir.
Temel Örnek
jsximport React, { useState } from 'react';
function GorevListesi() {
const [gorevler, setGorevler] = useState([
{ id: 1, baslik: 'Market alışverişi' },
{ id: 2, baslik: 'React öğren' },
{ id: 3, baslik: 'Makale yaz' },
]);
return ( <div> <h2>Görevlerim</h2> <ul>
{gorevler.map((gorev) => ( <li key={gorev.id}>{gorev.baslik}</li>
))} </ul> </div>
);
}
export default GorevListesi;Bu temel örnekte useState kullanılarak gorevler adında bir state oluşturulmuştur; her öğe benzersiz bir id ve baslik içerir. map metodu, dizi öğelerini iteratif olarak <li> elementleri şeklinde render eder. key={gorev.id} ile her öğeye benzersiz bir anahtar atanır ve React hangi öğelerin değiştiğini doğru bir şekilde takip eder.
Anahtarlar kullanılmazsa React, hangi öğelerin değiştiğini veya silindiğini belirleyemez ve gereksiz render’lara sebep olur. Bu yapı, temiz ve yeniden kullanılabilir bileşenlerin oluşturulmasını ve prop drilling gibi hataların önlenmesini sağlar.
Pratik Örnek
jsximport React, { useState } from 'react';
function GorevYoneticisi() {
const [gorevler, setGorevler] = useState([
{ id: 1, baslik: 'Market alışverişi' },
{ id: 2, baslik: 'React öğren' },
{ id: 3, baslik: 'Makale yaz' },
]);
const [yeniGorev, setYeniGorev] = useState('');
const gorevEkle = () => {
if (yeniGorev.trim() === '') return;
const yeniId = gorevler.length > 0 ? gorevler[gorevler.length - 1].id + 1 : 1;
setGorevler([...gorevler, { id: yeniId, baslik: yeniGorev }]);
setYeniGorev('');
};
const gorevSil = (id) => {
setGorevler(gorevler.filter((gorev) => gorev.id !== id));
};
return ( <div> <h2>Görev Yöneticisi</h2>
<input
type="text"
value={yeniGorev}
onChange={(e) => setYeniGorev(e.target.value)}
placeholder="Yeni görev"
/> <button onClick={gorevEkle}>Ekle</button> <ul>
{gorevler.map((gorev) => ( <li key={gorev.id}>
{gorev.baslik}{' '}
<button onClick={() => gorevSil(gorev.id)}>Sil</button> </li>
))} </ul> </div>
);
}
export default GorevYoneticisi;Bu pratik örnekte, görev ekleme ve silme fonksiyonları eklenmiştir. State, spread operatörü ile immutably güncellenir; böylece React değişiklikleri doğru şekilde takip eder. key={gorev.id} kullanımı ile her öğe benzersiz olarak tanımlanır ve gereksiz render’lar engellenir.
Fonksiyonlar gorevEkle ve gorevSil, state yönetimi ve veri akışı uygulamalarını gerçek projelere taşır. Kullanıcı girişi doğrulama ile hatalı verilerin eklenmesi önlenir, anahtarlar ve bileşen yapısı performanslı ve sürdürülebilir bir arayüz sağlar.
Listeler ve anahtarlarla çalışırken en iyi uygulamalar: her zaman benzersiz ve değişmeyen anahtarlar kullanmak, array indexlerinden kaçınmak, state’i immutably güncellemek ve prop drilling’i azaltmak için Context API veya üçüncü taraf state yönetim kütüphanelerinden faydalanmaktır.
Performansı optimize etmek için React.memo, useCallback ve useMemo kullanılabilir. Hata ve giriş doğrulama mekanizmaları güvenli etkileşim sağlar. React DevTools, key hatalarını ve gereksiz render’ları tespit etmek için kullanışlıdır ve proje kodunun sürdürülebilirliğini artırır.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useState | Yerel state yönetimi | const [state, setState] = useState(initialValue); |
| map | Dizi öğelerini iteratif render etme | array.map(item => <li key={item.id}>{item.baslik}</li>); |
| key | Liste öğesi için benzersiz kimlik | <li key={item.id}>{item.baslik}</li> |
| Event Handler | Kullanıcı etkileşimi ile state güncelleme | <button onClick={() => gorevSil(id)}>Sil</button> |
| Spread Operator | Yeni array veya obje oluşturma | setGorevler([...gorevler, yeniGorev]); |
Listeler ve anahtarlar, React’te dinamik, performanslı ve yeniden kullanılabilir arayüzler oluşturmanın temelini oluşturur. Bu kavramların öğrenilmesi, uygulamaların sürdürülebilirliğini ve ölçeklenebilirliğini artırır.
Sonraki adımlar, Context API, yaşam döngüsü hook’ları (useEffect), component kütüphaneleri ile entegrasyon ve ileri düzey tasarım desenlerini öğrenmek olmalıdır. Bu bilgiler, SPA projelerinde listeler ve anahtarların etkili kullanımını sağlar ve performans optimizasyonunu güçlendirir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek