Bu yazımızda React State Nedir? React State Kullanımı konularını öğreneceğiz. Bugünkü yazımızın konusu React’i etkili kullanmak için gerçekten çok önemli. State’ler sayesinde projelerimizdeki karmaşık ve zorlu bir çok işlemi kolaylıkla yönetebiliriz. UI üzerinde yapılan değişiklikleri anında yakalayıp yeni durumu UI kullanıcısına sunabiliriz.
REACT STATE NEDİR?
React uygulamalarında, dinamik ve değişken verileri yönetmek için “state” kullanılır. State, bir componentin içinde bulunan ve componentin durumunu temsil eden veriyi saklar. Bu sayede, componentin görselini ve davranışını dinamik olarak güncelleyebiliriz.
React state nedir sorusunun cevabına geçmeden önce, React componentlerini hatırlayalım. React componentlerini, UI’nin parçalarını oluşturan yapılar olarak düşünebiliriz. Bu componentler, kullanıcı arayüzünde görünen her şeyi temsil eder. Örneğin, bir buton, bir form veya bir liste gibi…
Dilerseniz componentler ile ilgili yazıma aşağıdaki linkten ulaşabilirsiniz.
React Component Nedir? React Component Kullanımı
Şimdi React State Nedir sorumuza dönelim. State componentlerin içindeki veriyi tutmak için kullanılan bir nesnedir. Bu veri, componentin durumunu temsil eder ve component render edildiği zaman görsel olarak yansıtılır. State, componentin özelliklerini ve davranışını değiştirmek için kullanılır.
React’te state kullanmak için iki yaklaşım vardır:
- Class componentlerde this.state
- Fonksiyon tabanlı componentlerde useState hook’u.
Component yazımızda artık React’in bile class component yerine function componentlerini önerdiğini söylemiştik. Bu nedenle class componentleri anlatmamıştık. Bu nedenle class component yapısında state kullanımını anlatmayacağım. Bizim için asıl önemli olan function componentte state kullanımı olduğundan, function componentte state kullanımı ile devam edeceğim.
FUNCTION COMPONENT’TE STATE KULLANIMI
Fonksiyon tabanlı componentlerde state kullanmak için React Hooks’tan biri olan useState hook’unu kullanırız. useState hook’u, bir değişken ve onu güncellemek için de bir fonksiyon döndürür. İlk değer, useState fonksiyonuna parametre olarak verilebilir.
BİR FUNCTION COMPONENT’TE STATE NASIL TANIMLANIR?
State’leri tanımlarken bir değişken tanımlar gibi düşünebilirsiniz. Öncelikle sabit bir değişken tanımlak için kullandığımız javaScript anahtar kelimesi olan const terimini kullanıyoruz. Daha sonra bir dizi tanımlarken kullandığımız köşeli “[ ]” parantezleri açıyoruz.
⇒ const [ ]
Sonra parantez içine state ismini yazıyoruz. Bu isimlendirmeler oldukça önemlidir. Projeler büyüdükçe 10’larca bazen 100’lerce state olacaktır. Bir state ismini belirlerken anlamlı ve işlevine uygun şekilde tanımlamak çok önemlidir. Diyelim ki sitemizde oturum açan kişinin email ini tutan bir state belirlemek istiyoruz. Buna email deyip geçmek ilerde karmaşıklığa yol açabilir.
Bunun yerine userEmail şeklinde nerede görürseniz görün, bu state’in kullanıcı emaili olduğunu anlayacak şekilde tanımlanması çok önemlidir. State isimleriniz birden fazla kelime içerebilir. Her zaman ilk kelime küçük harf ile başlar ve diğer kelimeler de büyük harf ile başlar.
⇒ const [ userEmail ]
Daha sonra dizilerde olduğu gibi state adından sonra virgül konur ve bu state’i kontrol edicek setState fonksiyonu yazılır. Bu fonksiyon ismini state’ten alır. Aynı isimle yazılır. State isminin önüne set eki getirilerek ve state’in ilk harfi de büyük yazılarak oluşturulur.
⇒ const [ userEmail, setUserEmail ]
En son bu state’e işlev kazandıracak bir React Hook’u olan useState’e eşitlenir.
⇒ const [ userEmail, setUserEmail ] = useState()
Burada useState parantezleri içinde state’in ilk değerini belirtebilirsiniz. Biz ilk değeri ‘Henüz emailinizi sisteme girmediniz’ şeklinde yazalım.
⇒ const [ userEmail, setUserEmail ] = useState(“Henüz emailinizi sisteme girmediniz”)
Unutmayin!
State kullanımına başlamadan önce react’ten import işleminin yapılması gerekiyor. Aşağıda süslü parentezler içinde yapıldığı gibi import işlemi yapılmalıdır.
|
1 2 3 |
import React, { useState } from 'react'; |
Şimdi örnekler üzerinden state kullanımını daha iyi anlamaya çalışalım.
Örnek 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React, { useState } from 'react'; function Counter() { /* Bu component için yazdığımız state */ const [count, setCount] = useState(0); /* setState kullanarak state değerimizi bir arttıran fonksiyonumuz*/ const increment = () => { setCount(count + 1); }; /* setState kullanarak state değerimizi bir azaltan fonksiyonumuz*/ const decrement = () => { setCount(count - 1); }; /* setState kullanarak state değerimizi 0 yapan fonksiyonumuz*/ const reset = () => { setCount(0); }; return ( <div> <p>Sayaç: {count}</p> <button onClick={increment}>Artır</button> <button onClick={decrement}>Azalt</button> <button onClick={reset}>Sıfırla</button> </div> ); } |
⇒ Yukarıdaki örnekte, useState hook’unu kullanarak ‘count’ adında bir state tanımlıyoruz ve başlangıç değeri olarak 0 veriyoruz.
⇒ Count bizim dinamik bir değişkenimz (state) artık. setCount ise state’i kontrol eden bir fonksiyondur. setCount fonksiyonu ile istediğimiz zaman count state’imizin değerini değiştirebiliriz.
⇒ increment fonksiyonu, butona tıklandığında setCount fonksiyonunu kullanarak count state’ini 1 artırıyor.
⇒ decrement fonksiyonu, butona tıklandığında setCount fonksiyonunu kullanarak count state’ini 1 azaltıyor.
⇒ reset fonksiyonu, butona tıklandığında setCount fonksiyonunu kullanarak count state’ini sıfırlıyor.
Bu örnekte, kullanıcı arayüzünde üç farklı buton bulunuyor. Her butona tıklandığında state güncelleniyor ve sayaç değeri dinamik olarak değişiyor.
React’te state kullanmanın avantajlarından biri, state’in değişmesiyle birlikte componentin otomatik olarak yeniden render edilmesidir. Bu sayede, kullanıcı arayüzünde yapılan değişiklikler anında görüntülenir.
Çıktı:
Örnek 2:
Şimdi kullanıcıdan girdi aldığımız bir senaryoda state kullanımına örnek verelim. Sizlerde Adım adım takip ederek aynı çıktıyı kendi tarayıcınızda alabilir ve bizzat test edebilirsiniz.
Adım 1: App Componenti Oluşturma
Öncelikle state kullanımı için baştan itibaren kullandığımız App componentimizi ilk haline getirelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from "react"; const App = () => { return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React state kullanımım.</p> </div> ); }; export default App; |
Adım 2: UserForm Componenti Oluşturma
Şimde UserForm adında yeni bir component oluşturalım. Aşağıdaki kodları bakarak da olsa tek tek yazarak kendi localinize getirmenizi öneririm. Bununla uğraşmadan denemek isterseniz kopyalayıp yapıştırabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React, { useState } from "react"; function UserForm() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const handleChangeName = (event) => { setName(event.target.value); }; const handleChangeEmail = (event) => { setEmail(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); console.log("Gönderilen veriler:", { name, email }); // Diğer işlemleri burada yapabilirsiniz. Artık bu // fonksiyon içinde kullanıcının bilgileri mevcut. // İhtiyacınıza göre işlemler yapabilirsiniz. }; return ( <div> <form onSubmit={handleSubmit}> <div> <label htmlFor="name">İsim:</label> <input type="text" id="name" value={name} onChange={handleChangeName} /> </div> <div> <label htmlFor="email">E-posta:</label> <input type="email" id="email" value={email} onChange={handleChangeEmail} /> </div> <button type="submit">Gönder</button> </form> <br /> <p>Kullanicinin Girdiği isim: {name}</p> <p>Kullanicinin Girdiği email: {email}</p> </div> ); } export default UserForm; |
Yukarıdaki örnekte, kullanıcıdan isim ve e-posta bilgisi girmesini isteyen bir form oluşturuyoruz.
⇒ name ve email adında iki ayrı state tanımlıyoruz ve başlangıç değerlerini boş bir string (”) olarak ayarlıyoruz. Bu state’ler, kullanıcının girdiği değerleri tutacak ve güncellenecektir.
⇒ handleChangeName fonksiyonu, isim inputunda herhangi bir değişiklik olduğunda tetiklenir ve kullanıcının girdiği değeri setName fonksiyonu ile name state‘ine yansıtır.
⇒ handleChangeEmail fonksiyonu, e-posta inputunda herhangi bir değişiklik olduğunda tetiklenir ve kullanıcının girdiği değeri setEmail fonksiyonu ile email state‘ine yansıtır.
⇒ handleSubmit fonksiyonu, form gönderildiğinde tetiklenir. İlk olarak, varsayılan form davranışını engellemek için event.preventDefault() çağrısı yapılır. Daha sonra, name ve email state’lerini konsola yazdırır. Diğer işlemleri yapmak üzere burada kodunuzu ekleyebilirsiniz.
Form içindeki input elemanları, value özelliğiyle ilgili state’e (name ve email) bağlıdır. Böylece, kullanıcı bir değer girdiğinde ilgili state güncellenir ve input otomatik olarak güncellenir.
⇒ Son olarak, onChange özelliği, inputa herhangi bir değer girildiğinde ilgili handleChange fonksiyonunu tetikler.
Bu örnek, kullanıcının girdiği verileri React state kullanarak yönetmeyi göstermektedir. State güncellendiğinde, inputlar otomatik olarak güncellenir ve form gönderildiğinde bu verileri işleyebilirsiniz.
Adım 3: UserForm Componentini App Componentine İmport Etme
Öncelikle UserForm componentimizi oluşturuken en alt satırda (export default UserForm) componentimizi export ettiğimizi hatırlatalım. Bu şekilde artık bu componenti istediğimiz bir component içine rahatlıkla yerleştirebiliriz.
Şimdi UserForm componentini App componentine import edelim. App componentimiz içinde HTML elementi gibi yazıp kullanalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from "react"; /*UserForm componentinin import edilmesi*/ import UserForm from "./UserForm"; const App = () => { return ( <div> <h1>Hello, World!</h1> <p>Bu benim ilk React state kullanımım.</p> <br /> /*UserForm componentimi App içinde buraya yerleştirdim.*/ <UserForm /> </div> ); }; export default App; |
Adım 4: React Projemizi Çalıştıralım
Şimdi react projemizi başlatalım ve çıktımıza bakalım.
Çıktı:
Adım 5: Bilgileri Girip Formu Submit Edelim
Şimdi son olarak kullanıcı isim ve email imizi input alanlarına girelim. Daha sonra gönder butonu ile formumuzu submit edelim ve son durumdaki çıktımıza bakalım.
Çıktı:
Örnek 3:
Bu örnekte state yardımı ile componentimizin arka plan rengini değiştireceğiz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React, { useState } from "react"; function App() { const [backgroundColor, setBackgroundColor] = useState("white"); const changeBackground = () => { const colors = ["red", "green", "blue", "yellow"]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; setBackgroundColor(randomColor); }; return ( <div style={{ backgroundColor }}> <h1>Şuanda bu alanın arka plan rengi {backgroundColor} oldu.</h1> <button onClick={changeBackground}>Renk Değiştir</button> </div> ); } export default App; |
⇒ Yukarıdaki örnekte, bir state olan backgroundColor i oluşturduk ve başlangıç değerini ‘white‘ olarak ayarladık. Bu state, arka plan rengini tutacak ve güncellenecektir.
⇒ changeBackground fonksiyonu, butona tıklandığında tetiklenir. İçerisinde bir dizi (colors) tanımlıdır ve rastgele bir renk seçmek için bu diziden bir eleman alır. Seçilen rastgele renk, setBackgroundColor fonksiyonu aracılığıyla backgroundColor state’ine yansıtılır.
⇒ Dönüş değerinde (return), backgroundColor state’iyle ilgili stil objesini kullanarak <div> elementinin arka plan rengini belirttik. Bu sayede, backgroundColor state’i güncellendiğinde arka plan rengi otomatik olarak değişecektir.
⇒ Ayrıca, bir <h1> başlık ve bir <button> düğmesi ekledik. Düğmeye tıklandığında changeBackground fonksiyonu çağrılacak ve arka plan rengi rastgele olarak değişecektir.
Çıktı:
Umarım “React State Nedir? React State Kullanımı” başlıklı yazım sizin için faydalı olmuştur. State kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
Create React App ile Hazır React Projesi Oluşturma
