REACT HOOK SERIES
React Hooks — useState Nedir ?
Hook konusunda seriye devam ediyoruz. Bu yazıda React içerisinde gelen useState Hook üzerinde duracağız.
Bu konuya başlamadan önce serinin ilk iki yazısı olan React Hooks Nedir ? ve React Hooks Neden Çıktı ? yazılarını okumanızı öneririm..
React Hook bileşenler için ortak bir takım davranışların kanca atılarak sağlanması olduğunu anlatmıştım. Aynı aşağıdaki resimde olduğu gibi.
Bileşenlerin en önemli gereksinimlerinden bir tanesi kendi internal state (iç durumlarını) bir yerde tutmak ve kullanmak şeklindedir. React Class Component yazarken zaten extends React.Component derken içerisinde state mekanizması hazır olan bir yapıdan bileşenimizi türetiyoruz Fakat Fonksiyonel Bileşen yaparken bunu useState Hook ile sağlayabiliyoruz.
Aşağıdaki resimdeki 2 kodda aynı işi yapıyor. Bileşen içerisinde yaş(age) değeri tutuyor ve bu düğmeye basıldıkça but değer arttırılıyor.
Functional Bileşende useState ile bunu nasıl yapıyoruz ? Gelin koda biraz daha yakından bakalım.
- useState(0) : Bileşeni globaldeki state yönetmemizi sağlayan utility bağlayan araç. useState react kütüphanesi içerisinden geliyor. 0 ise tutacağımız state default değeri…
- [age,setAge]: Burada tutulan değeri erişimi örneğin age üzerinden okuma(read) yapıyoruz . Ve setAge üzerinden yazma(write) yapıyoruz
Ve kullanacağınız her bir ayrı state bu şekilde alt alta bileşende tanımlamanız gerekiyor. Bu sayede bileşen render edilmesi aşamasında state persist ederek kullanabilme ve state değişiklik olduğunda ilgili bileşenin tekrardan render edilmesini sağlarsınız.
Bir kaç örnekle konuyu biraz daha detaylı anlatalım… Aşağıdaki örnekte Theme state tutmak ve buna göre arka planı Dark veya Light Mode göre render etmek istiyoruz Bu durumda tutmamız gereken state theme state
const [theme, setTheme] = React.useState('light')
Veya bir başka örneği incelersek basit bir ToDO app yapmak istiyoruz. Bu sefer bileşenimiz birden fazla değer tutma ihtiyacı var. Bu durumda bu değişkenlerimiz todos todo elemanlar listesi, o Anda Kullanıcının Input yazı yazdığı değeri tutan input ve her input todos eklenmeden önce bir id üretmemizi sağlayan yapı bu sayede remove işlemini bu id üzerinden yapabiliriz.
const [todos, setTodos] = React.useState([])
const [input, setInput] = React.useState('')
const [id, setId] = React.useState(0);
Veya Ekranda bir yazı listesi bulunuyor Ve bu listedeki elemanların birisinin detayını okumak istediğimizde bu openIndex tutmak istiyoruz..
Bu ve benzeri bir çok örnek düşünebilirsiniz. Özetle state tutmak bileşenlerin en temel ihtiyacı olduğu için ve Bileşen Rendering etkilediği için React kütüphanesinden geliyor.
Source Kod
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
