Tek Sayfa Uygulamaları (SPA) içinde formlarla nasıl…

SPA'da formlarla çalışırken, kontrollü veya kontrolsüz bileşenler kullanıyorum.

Kontrollü bileşenler: Form alanının değeri bileşenin durumunda saklanır ve setState ile güncellenir.

// React'te kontrollü bir bileşen örneği
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Gönderildi:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        İsim:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

Kontrollü bileşenlerin avantajları:

Girişin kontrolü ve doğrulaması daha kolaydır.
Koşullu alan gösterim mantığını daha kolay uygular.
Redux, Vuex gibi durum yönetim kütüphaneleriyle entegrasyon kolaydır.

Kontrolsüz bileşenler: Form alanının değeri doğrudan DOM elementinde saklanır ve ref aracılığıyla erişilir.

// React'te kontrolsüz bileşen örneği
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Gönderildi:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        İsim:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

Kontrolsüz bileşenlerin avantajları:

Basit formlar için daha uygundur.
Daha az kodla temel uygulama yapılabilir.

SPA'da formlarla çalışma yaklaşımları:

Doğrulama:
- Müşteri tarafında (JavaScript) anında geri bildirim için.
- Sunucu tarafında veri bütünlüğünü sağlamak için.
- Yup, Zod, VeeValidate, Vuelidate gibi kütüphaneler kullanılır.
Gönderme işlemi:
- Varsayılan davranışı engellemek (event.preventDefault()).
- Veriyi sunucuya göndermek (Fetch API, Axios, XHR).
- Gönderim durumu göstermek (yükleniyor, başarı, hata).
Durum yönetimi:
- Bileşenin yerel durumu kullanılır.
- Daha karmaşık formlar veya uygulamanın diğer bölümlerinde kullanılan formlar için Redux, Vuex, Pinia gibi durum yöneticileri kullanılır.
Kullanıcı geri bildirimi:
- Yükleniyor göstergeleri.
- Doğrulama hatası mesajları.
- Gönderim başarı/hata mesajları.
Erişilebilirlik (A11y):
- Semantik HTML öğeleri kullanılır (<form>, <label>, <input>, <button>).
- <label> ile giriş alanları uygun şekilde ilişkilendirilir (for attribute veya iç içe yerleştirme).
- Gerekirse WAI-ARIA öznitelikleri kullanılır.
Performans:
- Sık değişen alanlar için onChange olaylarının debounce veya throttle edilmesi.
- Form durumundaki değişikliklere göre render optimizasyonu.
Testler:
- Form mantığı ve doğrulama için birim testleri.
- API ile etkileşimleri test eden entegrasyon testleri.

Kontrollü ve kontrolsüz bileşenler arasındaki seçim, formun karmaşıklığına ve durum yönetimi ile doğrulama gereksinimlerine bağlıdır. Çoğu form, özellikle karmaşık olanlar, kontrollü bileşenler daha fazla esneklik ve kontrol sağlar.

Tek Sayfa Uygulamaları (SPA) içinde formlarla nasıl çalışıyorsunuz?