#100DaysofCode Gün 8: React ve TypeScript ile Form Yönetimini Anlamak

#100DaysofCode Gün 8: React ve TypeScript ile Form Yönetimini Anlamak

Merhaba kod meraklıları! #100DaysofCode serüvenimizin 8. gününde, web uygulamalarının vazgeçilmezi olan form yönetimini React ve TypeScript ikilisiyle derinlemesine inceliyoruz. Kullanıcı etkileşiminin temelini oluşturan formlar, veri toplama ve işleme süreçlerinde kritik rol oynar. Bu makalede, temel kontrollü bileşenlerden başlayarak, TypeScript ile tip güvenli form durumları oluşturmaya, doğrulama mekanizmalarına ve hatta gelişmiş kütüphanelere kadar geniş bir yelpazeyi kapsayacağız. Hazırsanız, React ve TypeScript ile formların büyüleyici dünyasına dalalım!

Giriş: Web Uygulamalarında Formların Önemi

Modern web uygulamaları, kullanıcılarla etkileşim kurmanın sayısız yolunu sunar. Bu etkileşimlerin başında ise formlar gelir. Kullanıcı kaydı, giriş yapma, ürün siparişi verme, geri bildirim gönderme veya arama sorgusu yapma gibi pek çok temel işlem, formlar aracılığıyla gerçekleşir. Formlar, kullanıcıdan veri toplamanın ve bu verileri uygulama mantığına aktarmanın anahtarıdır.

Neden Formlara İhtiyaç Duyarız?

• Veri Toplama: Kullanıcı bilgilerini, tercihlerini veya girdilerini toplamak için temel araçlardır.
• Kullanıcı Etkileşimi: Uygulamanın dinamik ve interaktif olmasını sağlarlar.
• İş Akışı Yönetimi: Belirli bir sırayla bilgi toplama ve işleme süreçlerini kolaylaştırırlar.
• Kişiselleştirme: Kullanıcı tercihlerine göre deneyimi kişiselleştirmek için veri sağlarlar.

React ve TypeScript’in Rolü

React, bileşen tabanlı yapısıyla formları yönetmeyi oldukça kolaylaştırır. Her bir form elemanını (input, select, textarea) bir React bileşeni gibi düşünebilir ve durum yönetimiyle entegre edebilirsiniz. TypeScript ise bu sürece tip güvenliği katmanı ekleyerek, geliştirme sırasında potansiyel hataları yakalamamıza ve daha okunabilir, bakımı kolay kod yazmamıza olanak tanır. Özellikle büyük ve karmaşık formlarda, TypeScript’in sağladığı avantajlar paha biçilmezdir.

React’te Temel Form Yönetimi: Kontrollü Bileşenler

React’te form elemanlarını yönetmenin en yaygın yolu “kontrollü bileşenler” kullanmaktır. Kontrollü bileşen, form elemanının değerinin React state’i tarafından kontrol edildiği bir elemandır. Bu, form verilerinin her zaman React state’inde tutulduğu ve güncellendiği anlamına gelir.

Kontrollü Bileşen Nedir?

Kontrollü bileşenlerde, bir form elemanının değeri (value prop’u) React state’i tarafından belirlenir ve bu değer yalnızca bir onChange olayı aracılığıyla güncellenebilir. Bu sayede, form elemanının değeri ile React state’i arasında tek yönlü bir veri akışı sağlanır ve formun davranışı tamamen React tarafından yönetilir.

useState ile Durum Yönetimi

Form elemanlarının değerlerini saklamak için React’in useState hook’unu kullanırız. Her bir form elemanı için ayrı bir state tanımlayabilir veya tüm form verilerini tek bir obje içinde tutabiliriz.

onChange ve onSubmit Olayları

• onChange: Bir form elemanının değeri değiştiğinde tetiklenir. Bu olay dinleyicisi içinde, elemanın yeni değerini alarak React state’ini güncelleriz.
• onSubmit: Form gönderildiğinde tetiklenir. Bu olay genellikle sunucuya veri gönderme veya başka bir işlem yapma gibi eylemleri içerir. Varsayılan sayfa yenileme davranışını engellemek için event.preventDefault() kullanmak önemlidir.

Basit Bir Form Örneği

Aşağıdaki örnek, basit bir kullanıcı adı giriş formunu kontrollü bir bileşen olarak nasıl oluşturacağımızı gösterir:

import React, { useState, ChangeEvent, FormEvent } from 'react';

const LoginForm: React.FC = () => {
  const [username, setUsername] = useState('');

  const handleUsernameChange = (event: ChangeEvent) => {
    setUsername(event.target.value);
  };

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault(); // Sayfa yenilemeyi engeller
    console.log('Gönderilen kullanıcı adı:', username);
    alert(Hoş geldiniz, ${username}!);
    setUsername(''); // Formu sıfırla
  };

  return (
    

      

        Kullanıcı Adı:
        
      
      Giriş Yap
    
  );
};

export default LoginForm;

Bu örnekte, username state'i input'un değerini kontrol eder. handleUsernameChange fonksiyonu her tuş vuruşunda state'i güncellerken, handleSubmit formu gönderir.

TypeScript ile Formlarda Tip Güvenliği

TypeScript, React formlarına tip güvenliği getirerek geliştirme sürecini daha sağlam ve hatasız hale getirir. Özellikle form verilerinin yapısını tanımlamak ve olay nesnelerini doğru bir şekilde tiplendirmek, büyük projelerde hata ayıklama süresini önemli ölçüde azaltır.

Neden TypeScript Kullanmalıyız?

• Hata Yakalama: Derleme zamanında tip uyumsuzluklarını tespit ederek çalışma zamanı hatalarını önler.
• Kod Okunabilirliği: Veri yapılarının ve fonksiyon parametrelerinin ne beklediğini açıkça belirtir.
• Geliştirici Deneyimi: Otomatik tamamlama (autocompletion) ve anında geri bildirim (instant feedback) ile geliştirme hızını artırır.
• Bakım Kolaylığı: Kod tabanının zamanla büyümesi ve değişmesi durumunda tutarlılığı sağlar.

Form Durumları İçin Arayüzler (Interfaces) Tanımlama

Birden fazla giriş alanı olan formlar için, formun tüm verilerini tutan bir obje state'i kullanmak yaygındır. Bu objenin yapısını bir TypeScript arayüzü (interface) ile tanımlamak, form verilerine erişirken ve bunları güncellerken tip güvenliği sağlar.

interface FormData {
  username: string;
  email: string;
  password: string;
  rememberMe: boolean;
}

const RegistrationForm: React.FC = () => {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    rememberMe: false,
  });

  // ... (onChange ve onSubmit fonksiyonları aşağıda gösterilecek)
};

Olay Nesneleri İçin Tip Tanımları

React'in sentetik olayları (synthetic events) için TypeScript'in sağladığı özel tipleri kullanmak, olay nesnelerine erişirken doğru özelliklere eriştiğimizden emin olmamızı sağlar.

• ChangeEvent: elemanlarının onChange olayları için.
• ChangeEvent: </code> elemanlarının <code>onChange</code> olayları için.</li> <li><code>ChangeEvent<HTMLSelectElement></code>: <code><select></code> elemanlarının <code>onChange</code> olayları için.</li> <li><code>FormEvent<HTMLFormElement></code>: <code><br /> <form></code> elemanının <code>onSubmit</code> olayları için.</li> </ul> <h3>Çoklu Giriş Alanlarını Yönetme ve Dinamik Formlar</h3> <p>Gerçek dünya uygulamalarında formlar genellikle birden fazla giriş alanına sahiptir. Her giriş alanı için ayrı bir <code>useState</code> ve <code>onChange</code> fonksiyonu yazmak yerine, daha verimli yöntemler kullanabiliriz.</p> <h4>Tek Bir <code>onChange</code> Fonksiyonu Kullanma</h4> <p>Form verilerini bir obje olarak tuttuğumuzda, tüm giriş alanları için tek bir genel <code>onChange</code> fonksiyonu yazabiliriz. Bu fonksiyon, olay nesnesinin <code>name</code> özelliğini kullanarak hangi giriş alanının güncellendiğini belirler ve ilgili state'i günceller.</p> <pre><code> import React, { useState, ChangeEvent, FormEvent } from 'react'; interface FormData { username: string; email: string; password: string; } const MultiInputForm: React.FC = () => { const [formData, setFormData] = useState<FormData>({ username: '', email: '', password: '', }); const handleChange = (event: ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; setFormData(prevData => ({ ...prevData, [name]: value, // name özelliğini kullanarak ilgili alanı günceller })); }; const handleSubmit = (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); console.log('Gönderilen veriler:', formData); alert(JSON.stringify(formData, null, 2)); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="username">Kullanıcı Adı:</label> <input type="text" id="username" name="username" value={formData.username} onChange={handleChange} /> </div> <div> <label htmlFor="email">E-posta:</label> <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} /> </div> <div> <label htmlFor="password">Şifre:</label> <input type="password" id="password" name="password" value={formData.password} onChange={handleChange} /> </div> <button type="submit">Kaydol</button> </form> ); }; export default MultiInputForm; </pre> <p></code></p> <p>Bu yaklaşım, kod tekrarını azaltır ve form büyüdükçe yönetimi kolaylaştırır.</p> <h4>Giriş Alanlarının Dinamik Olarak Oluşturulması</h4> <p>Bazen form alanları dinamik olarak eklenip çıkarılabilir (örneğin, bir anket formu veya ürün ekleme formu). Bu durumda, form alanlarını bir dizi (array) içinde tutarak ve bu diziyi <code>map</code> metoduyla render ederek dinamik formlar oluşturabiliriz.</p> <pre><code> // Örnek bir dinamik form senaryosu interface Skill { id: string; name: string; level: 'beginner' | 'intermediate' | 'advanced'; } const DynamicSkillsForm: React.FC = () => { const [skills, setSkills] = useState<Skill[]>([ { id: '1', name: 'JavaScript', level: 'intermediate' }, ]); const handleSkillChange = (id: string, field: keyof Skill, value: string) => { setSkills(prevSkills => prevSkills.map(skill => skill.id === id ? { ...skill, [field]: value } : skill ) ); }; const addSkill = () => { setSkills(prevSkills => [ ...prevSkills, { id: Date.now().toString(), name: '', level: 'beginner' }, ]); }; const removeSkill = (id: string) => { setSkills(prevSkills => prevSkills.filter(skill => skill.id !== id)); }; const handleSubmit = (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); console.log('Gönderilen yetenekler:', skills); }; return ( <form onSubmit={handleSubmit}> <h3>Yetenekleriniz</h3> {skills.map(skill => ( <div key={skill.id} style={{ marginBottom: '10px' }}> <input type="text" placeholder="Yetenek Adı" value={skill.name} onChange={e => handleSkillChange(skill.id, 'name', e.target.value)} /> <select value={skill.level} onChange={e => handleSkillChange(skill.id, 'level', e.target.value as Skill['level'])} > <option value="beginner">Başlangıç</option> <option value="intermediate">Orta</option> <option value="advanced">İleri</option> </select> <button type="button" onClick={() => removeSkill(skill.id)}>Kaldır</button> </div> ))} <button type="button" onClick={addSkill}>Yetenek Ekle</button> <button type="submit" style={{ marginLeft: '10px' }}>Kaydet</button> </form> ); }; export default DynamicSkillsForm; </pre> <p></code></p> <h3>Form Doğrulama (Validation) ve Hata Yönetimi</h3> <p>Kullanıcılardan doğru ve geçerli veri almak, her formun temel amacıdır. Form doğrulama, bu sürecin kritik bir parçasıdır. React ve TypeScript ile hem istemci tarafında (client-side) hem de sunucu tarafında (server-side) doğrulama stratejileri geliştirebiliriz.</p> <h4>Client-Side Doğrulamanın Önemi</h4> <p>İstemci tarafı doğrulama, kullanıcıya anında geri bildirim sağlayarak hataları henüz veri sunucuya ulaşmadan düzeltme fırsatı verir. Bu, kullanıcı deneyimini iyileştirir ve sunucu yükünü azaltır. Ancak, güvenlik için asla yalnızca istemci tarafı doğrulamaya güvenilmemelidir; sunucu tarafı doğrulama her zaman zorunludur.</p> <h4>Basit Doğrulama Kuralları Uygulama</h4> <p>Doğrulama mantığını form bileşenimizin içine veya ayrı bir yardımcı fonksiyona yerleştirebiliriz. Genellikle, bir <code>errors</code> state'i tutarak her alan için hata mesajlarını saklarız.</p> <pre><code> import React, { useState, ChangeEvent, FormEvent } from 'react'; interface FormData { username: string; email: string; } interface FormErrors { username?: string; email?: string; } const ValidationForm: React.FC = () => { const [formData, setFormData] = useState<FormData>({ username: '', email: '', }); const [errors, setErrors] = useState<FormErrors>({}); const validate = (): FormErrors => { const newErrors: FormErrors = {}; if (!formData.username) { newErrors.username = 'Kullanıcı adı boş bırakılamaz.'; } else if (formData.username.length < 3) { newErrors.username = 'Kullanıcı adı en az 3 karakter olmalı.'; } if (!formData.email) { newErrors.email = 'E-posta boş bırakılamaz.'; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = 'Geçerli bir e-posta adresi girin.'; } return newErrors; }; const handleChange = (event: ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; setFormData(prevData => ({ ...prevData, [name]: value })); // Kullanıcı yazarken hataları temizleyebiliriz if (errors[name as keyof FormErrors]) { setErrors(prevErrors => ({ ...prevErrors, [name]: undefined })); } }; const handleSubmit = (event: FormEvent<HTMLFormElement>) => { event.preventDefault(); const validationErrors = validate(); setErrors(validationErrors); if (Object.keys(validationErrors).length === 0) { console.log('Form geçerli, gönderiliyor:', formData); alert('Form başarıyla gönderildi!'); // API çağrısı burada yapılabilir } else { console.log('Formda hatalar var:', validationErrors); } }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="username">Kullanıcı Adı:</label> <input type="text" id="username" name="username" value={formData.username} onChange={handleChange} /> {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>} </div> <div> <label htmlFor="email">E-posta:</label> <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} /> {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>} </div> <button type="submit">Gönder</button> </form> ); }; export default ValidationForm; </pre> <p></code></p> <h4>Hata Mesajlarını Kullanıcıya Gösterme</h4> <p>Hata mesajlarını ilgili giriş alanının hemen altında, farklı bir renkte (genellikle kırmızı) göstermek, kullanıcı deneyimi açısından önemlidir. Yukarıdaki örnekte bu gösterim şekli bulunmaktadır.</p> <h4>Doğrulama Durumunu Yönetme</h4> <p>Doğrulama durumunu (<code>errors</code> state'i) yönetmek, formun genel geçerliliğini kontrol etmemizi sağlar. Formun gönderilip gönderilmeyeceğine karar verirken bu state'i kullanırız.</p> <h3>Gelişmiş Form Kütüphaneleri ve Kullanım Senaryoları</h3> <p>React'te form yönetimi, özellikle karmaşık formlar, dinamik alanlar, derinlemesine doğrulama ve performans optimizasyonu gerektiren durumlarda elle yazmak yorucu olabilir. Bu noktada, geliştirme sürecini hızlandıran ve kolaylaştıran gelişmiş form kütüphaneleri devreye girer.</p> <h4>Neden Kütüphane Kullanmalıyız?</h4> <ul> <li><strong>Karmaşıklığı Azaltma:</strong> Form state'ini, doğrulama mantığını ve hata yönetimini soyutlar.</li> <li><strong>Performans Optimizasyonu:</strong> Gereksiz yeniden render'ları azaltarak performansı artırır.</li> <li><strong>Gelişmiş Doğrulama:</strong> Schema tabanlı (yup, zod) doğrulama entegrasyonlarını kolaylaştırır.</li> <li><strong>Kod Tekrarını Önleme:</strong> Ortak form senaryoları için hazır çözümler sunar.</li> <li><strong>Topluluk Desteği:</strong> Geniş topluluklar tarafından desteklenir ve güncel kalır.</li> </ul> <h4>React Hook Form'a Kısa Bir Bakış</h4> <p><a href="https://react-hook-form.com/">React Hook Form</a>, performansa odaklanan, minimal yeniden render'lar sağlayan ve basit bir API'ye sahip popüler bir kütüphanedir. Özellikle büyük formlarda performansı nedeniyle tercih edilir. TypeScript ile sorunsuz entegrasyon sunar.</p> <pre><code> import React from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; interface IFormInput { firstName: string; lastName: string; age: number; } const MyHookForm: React.FC = () => { const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>(); const onSubmit: SubmitHandler<IFormInput> = data => { console.log(data); alert(JSON.stringify(data, null, 2)); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label>Ad:</label> <input {...register('firstName', { required: true, maxLength: 20 })} /> {errors.firstName && <p style={{ color: 'red">Ad gerekli ve max 20 karakter.</p>}} </div> <div> <label>Soyad:</label> <input {...register('lastName', { pattern: /^[A-Za-z]+$/i })} /> {errors.lastName && <p style={{ color: 'red">Soyad sadece harf içermeli.</p>}} </div> <div> <label>Yaş:</label> <input type="number" {...register('age', { min: 18, max: 99 })} /> {errors.age && <p style={{ color: 'red">Yaş 18-99 arası olmalı.</p>}} </div> <button type="submit">Gönder</button> </form> ); }; export default MyHookForm; </pre> <p></code></p> <h4>Formik'e Kısa Bir Bakış</h4> <p><a href="https://formik.org/">Formik</a>, React form yönetiminde popülerliğini koruyan başka bir kütüphanedir. Kapsamlı bir API sunar ve özellikle karmaşık form state'leri, doğrulama (Yup ile entegrasyonu güçlüdür) ve form gönderme süreçlerini yönetmek için tasarlanmıştır. Render prop veya hook tabanlı yaklaşı</p> </div> <div class="cs-entry__footer"> <div class="cs-entry__footer-left"> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><a class="cs-meta-author-link url fn n" href="https://fatihsoysal.com/blog/author/fatihsoysal/"><span class="cs-meta-author-by">by</span><span class="cs-meta-author-name">Fatih Soysal</span></a></div><div class="cs-meta-comments"><a href="https://fatihsoysal.com/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/#respond" class="comments-link" >0</a></div></div> </div> <div class="cs-entry__footer-right"> <div class="cs-share"> <a class="cs-share__link" target="_blank" href="https://www.facebook.com/sharer.php?text=%23100DaysofCode%20G%C3%BCn%208%3A%20React%20ve%20TypeScript%20ile%20Form%20Y%C3%B6netimini%20Anlamak&u=https://fatihsoysal.com/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/"> <i class="cs-icon cs-icon-facebook"></i> </a> <a class="cs-share__link" target="_blank" href="https://twitter.com/share?t=%23100DaysofCode%20G%C3%BCn%208%3A%20React%20ve%20TypeScript%20ile%20Form%20Y%C3%B6netimini%20Anlamak&url=https://fatihsoysal.com/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/"> <i class="cs-icon cs-icon-twitter-x"></i> </a> <a class="cs-share__link" target="_blank" href="https://t.me/share/url?url=%5BURL%5D&text=https://fatihsoysal.com/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/"> <i class="cs-icon cs-icon-telegram"></i> </a> <a class="cs-share__link cs-share__copy-link" target="_blank" href="https://fatihsoysal.com/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/"> <i class="cs-icon cs-icon-link"></i> </a> </div> </div> </div> <div class="cs-entry__comments" id="comments"> <div class="cs-entry__comments-header"> <div class="cs-entry__comments-left"> <div class="cs-entry__comments-heading">Yorumlar</div> <div class="cs-entry__comments-description h2">İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.</div> </div> <div class="cs-entry__comments-right"> <div class="cs-entry__comments-toggle"> <span class="cs-button" role="button" aria-label="Yorumlar"> <span>Yorum Yaz</span> </span> </div> </div> </div> <div class="cs-entry__comments-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/100daysofcode-gun-8-react-ve-typescript-ile-form-yonetimini-anlamak/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://fatihsoysal.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" aria-required="true" placeholder="Your Comment *">

  Save my name and email in this browser for the next time I comment.

  Gönder

  Δ