React uygulamalarındaki state yapısı, veri yönetimi ve kullanıcı etkileşimleri için önemlidir Data State, component içinde saklanan verilerin yönetilmesi için kullanılır UI State, kullanıcının etkileşimlerini takip etmek ve UI elementlerindeki değişiklikleri kontrol etmek için kullanılır Local State, sadece belirli bir component içinde kullanılan bir state tipidir Global State ise birden fazla component tarafından kullanılan, uygulama seviyesinde veri saklayan bir state türüdür React uygulamalarında, state yönetimi için farklı tipler arasından seçim yapmak, uygulamanın performansı ve doğru verilerin kullanıcılara sunulması açısından önemlidir

React uygulamalarındaki state yapısı, uygulamanın akışı ve verileri yönetmek için önemli bir yapı taşıdır. Bu yapı içinde kullanılan state, veri, uiState ve routingState olmak üzere farklı tiplere ayrılmaktadır.

Data State, component içinde saklanan verilerin state'ini yönetmek için kullanılır. Bu yapıda, component'in state'i değiştiğinde, veriler de değişir. Bu sayede, uygulamanın verileri kontrol edilerek, doğru ve güncel bilgiler kullanıcılara sunulabilir.

UI State ise UI elementlerinde kullanıcının etkileşimleri ve değişiklikleri yakalamak için kullanılır. Bu sayede, kullanıcının uygulamayla olan etkileşimi takip edilerek, doğru tepkiler verilebilir. Örneğin, bir butona tıklandığında, ilgili elementlerin görünürlüğü gibi işlemler UI State yapısı içinde yönetilir.

Son olarak, Routing State, uygulamanın farklı sayfaları ve rotaları arasındaki geçişleri kontrol etmek için kullanılır. Bu yapı, uygulamanın bütününü kontrol ederek doğru sayfalara yönlendirir. React Router kütüphanesi de, bu yapıyı kullanarak, routing işlemlerini kolaylaştırır.

React State'i yönetebilmek için, component'ler arasında state paylaşımı yapmak mümkündür. Global State yapısı, uygulama içinde birden fazla component tarafından kullanılan state yapısını yönetirken, Local State yapısı bir component içinde kullanılan state'i kontrol eder. Ayrıca, Context API yapısı da state yönetimi için kullanılabilir.

Data State

React uygulamalarında component'lerde saklanan verilerin state'inde kullanılan data state, component'in içinde tutulan verileri takip etmek için kullanılır. data state'in özellikleri şöyledir:

• Kullanıcının etkileşimleri sonucu verilerde değişiklik yapmak mümkündür.
• data state, component'e özgüdür ve başka componentler tarafından erişilemez.
• Verinin tipi, string, number, boolean ya da array gibi herhangi bir türde olabilir.
• Componentin durumuna göre sonuçları değişebilir.

Data state, useState() hook sayesinde kullanıcılar tarafından kolaylıkla kullanılabilir. Component içinde, useState() hook'a başlangıç durumu olarak verilecek olan state'in ilk değeri verilir. useState() hook'unun döndürdüğü bir dizi, ilk değer ve bir fonksiyondur. Fonksiyon kullanılarak state değiştirilebilir.

Data state'in kullanımı, component içinde verilerin değiştirilmesi, farklı değerlere ayarlanması veya react-props aracılığıyla diğer componentler arasında paylaşılması gibi farklı durumlarda kolay ve kullanışlıdır.

UI State

React uygulamalarında kullanılan state yapısının bir diğer türü olan UI State, kullanıcı etkileşimlerini takip etmek ve UI elementlerindeki değişiklikleri kontrol etmek için kullanılır. Bu state türü, diğer state türlerinden farklı olarak sadece UI elementlerindeki değişikliği takip etmekle sınırlıdır ve sadece bir component'in içinde kullanılır.

UI State, özellikle form inputlarındaki verileri tutmak ve kullanıcının girilen verileri takip ederek uygun işlemleri yapmak için sıkça kullanılır. Kullanıcı, bu verileri girdikçe UI State değişir ve bu değişiklikler UI elementlerinde gösterilir.

Özellikler	Kullanımı
Component'e özel	Bir component'in içinde kullanılır
Sadece UI değişikliklerini takip eder	UI elementlerindeki değişiklikleri takip eder
Form inputları ve kullanıcının etkileşimleri için kullanılır	Form inputlarındaki verilerin takibi için kullanılır

UI State'in kullanımı, setState() metodunun kullanımı ile benzerdir. UI elementlerindeki değişiklikleri takip ederken setState() metodunu kullanarak UI State'i güncellemek gerekmektedir. Bu sayede, değişiklikler UI elementlerinde anlık olarak gösterilebilir ve kullanıcının etkileşimleri takip edilerek uygun işlemler yapılabilir.

Local State

Local state, React uygulamalarında sadece bir component içinde kullanılabilen ve ona özgü olan bir state tipidir. Bu state, sadece belirli bir component'te kullanılır ve diğer componentler tarafından erişilemez. Bu nedenle, local state verilerin diğer componentlerle paylaşılmayacağı koşullu rendering işlemlerinde kullanmak için ideal bir seçenektir.

Local state, genellikle bir component'in başlangıcında bir obje değeri olarak tanımlanır. Örneğin, bir butona basıldığında component'in belirli bir bölümünde gösterilen metni değiştirmek istediğinizde, bunu local state kullanarak yapabilirsiniz. Bu süreçte, button component'inin içinde bir local state oluşturursunuz ve bu state'i, başta "visible" olarak tanımlarsınız. Butona tıklandığında, "visible" state'inin değerini "hidden" olarak değiştirirsiniz ve metin görünmez hale gelir. Bu örnekte, local state kullanımı uygulamanın performansı açısından önemlidir çünkü sadece component'in içinde kullanılan bir state'tir.

Bu örnekte anlatılanlar, sadece bir component ile sınırlı olan local state kullanımının basit bir örneğidir. Fakat local state'in kullanımı oldukça geniştir ve componentler arasında paylaşılan state bilgilerinden ziyade, tek bir component içinde kullanılması gereken kısa ömürlü verilerin depolanması için ideal bir seçenektir.

Global State

React'ta kullanılan bir başka state tipi de global state'dir. Diğer state tiplerinin aksine, global state birden fazla component tarafından kullanılır ve uygulama seviyesinde veri saklar. Genellikle, birden fazla component arasında paylaşılan bir veri söz konusu olduğunda kullanılır.

Global state'in kullanımı, uygulama seviyesinde daha kapsamlı bir kontrol sağlar. State bilgisinin her component'te tekrar tekrar tanımlanmasına gerek kalmaz, bu sayede verimlilik artar ve kod tekrarı engellenir.

React'ta global state yönetimi için birkaç yöntem vardır. Context API, Redux ve MobX gibi çeşitli kütüphaneler bu amaçla kullanılabilir. Bunlar, global state yönetimini kolaylaştıran özellikleri ile dikkat çekerler.

Bir uygulama içinde birden fazla component'in global state'i kullanabileceği için, değişiklikleri takip etmek ve hataları önlemek adına, global state'i güncellemek için belirli bir disiplin gereklidir. Aksi takdirde, güncelleme işlemleri beklenmedik sonuçlara neden olabilir.

Global state'in kullanımı, uygulama tasarımı ve geliştirilmesinde önemli bir rol oynar. Gerektiği gibi kullanıldığında, uygulama performansını artıracak ve kod tekrarını önleyecektir.

Context API

React uygulamalarında, state yönetimi oldukça önemlidir. Bu nedenle, React geliştiricileri birçok çözüm sunar. Bu çözümlerden biri olan Context API, state yönetimiyle ilgili sorunları çözmek için kullanılan bir API'dir. Context API, React uygulamalarındaki state yönetiminde çok kullanışlı bir araçtır.

Bir örnek olarak, bir uygulamanın tema rengini yönetmek istediğinizi varsayalım. Bu durumda, her component'in theme rengini saklamak için state oluşturmanız gerekir. Aynı şekilde, birden fazla component tarafından paylaşılan bir veri varsa, state'in güncellenmesi de güçleşebilir. Bu gibi durumlarda Context API, uygulamanın state yönetiminde sorunları çözmek için kullanılır.

Context API, createContext() işleviyle oluşturulur ve değerleri konteynır hierarşisinde yayınlar. Provider bileşeni, alt bileşen ağacında var olan bileşenlere değeri yayınlayarak, tüm bileşenler tarafından kullanılabilen bir state sağlar. Consumer bileşeni, context bileşenine erişim sağlar ve tüm bileşenler tarafından kullanılabilen state verilerini okumanızı sağlar.

Context API Kullanımının Faydaları
1- Bileşenler arasında veri paylaşmayı sağlar
2- Props drilling sorununun önüne geçer
3- Daha temiz bir kod yapısı sağlar

Bir özelliği birden fazla bileşen arasında paylaşmak için Context API kullanmanız gerektiğinde, oluşturduğunuz context objelerini export yazan bir dosya içinde saklamalısınız. Bu da context'leri düzenli bir şekilde saklamanıza olanak tanır. Böylece, her bileşene ihtiyacınız olduğunda context'leri çağırabilirsiniz.

Sonuç olarak, Context API, state yönetimi işlemlerinde büyük kolaylık sağlayan bir araçtır. Uygulamalarda daha temiz kod yapısı sağlamak, bileşenler arasında veri paylaşımını sağlamak ve Props drilling sorununu çözmek için kullanılabilir. Context API hakkında daha fazla bilgi için, React resmi websitesini ziyaret etmenizi öneririz.

External State

Bir React uygulamasında, component'ler arasında state iletişimi oldukça önemlidir. Bazı durumlarda farklı component'lerin aynı state'i kullanması gerekebilir. İşte tam bu noktada External State devreye girer. External State, component'ler arasında paylaşılan state bilgisinin bir şekli olarak kullanılan bir yapıdır.

Örneğin, bir uygulamada kullanıcı girişi yapmak istediğinizde, giriş formunu bir component olarak oluşturursunuz. Ancak, bu giriş formunun yanı sıra profil sayfası, sepetim sayfası gibi başka component'lerde de kullanıcının oturum durumu ile ilgili state bilgisine ihtiyaç duyarsınız. Bu durumda, aynı state bilgisini tüm component'ler arasında paylaşılan bir durum olarak düşünebilirsiniz. Bu paylaşılan state bilgisine External State denir.

External State, bir çok component tarafından paylaşılabileceği için, uygulamanın performansı için oldukça önemlidir. Bu yüzden, external state yönetimi yapılırken, component'lerin gereksiz yere yeniden render edilmemesi için dikkatli olunmalıdır.

React uygulamalarında external state yönetimi için genellikle Redux, MobX, Context API gibi kütüphanelerden faydalanılır. Bu kütüphaneler, state yönetimini daha kolay hale getirerek, uygulama kod kalitesini ve performansını arttırır.

Routing State

React uygulamalarında routing işlemleri, farklı sayfalar ve rotalar için kullanılan routing state ile yapılmaktadır. Routing state, kullanıcının uygulama içinde gezinmek istediği farklı sayfalar ve rotaların bilgisini tutar. Bu sayede kullanıcının uygulama içinde istediği sayfaya rahatça erişebilmesi sağlanır.

Routing state, application veya component state'leri ile farklı bir yapıda tutulur. React Router kütüphanesi ile geliştiriciler, routing yapısını kolayca oluşturabilir ve yönetebilirler. Routing yapısında, aynı component'in farklı özellikleri kullanılarak, farklı sayfalar ve rotalar oluşturulabilir.

Routing yapısı kullanılarak koşullu rendering işlemleri de yapılabilir. Örneğin, kullanıcının güncel sayfasına göre farklı navigasyon menüleri gösterilebilir. Ayrıca, koşullu rendering kullanarak sayfalardaki bazı elementlerin veya metinlerin eklenmesi veya kaldırılması da mümkündür.

React uygulamalarında routing yapısı kullanmak, kullanıcının uygulama içindeki gezinme deneyimini arttırır. Bu sayede, kullanıcının farklı sayfalara ve rotalara rahatça erişebilmesi sağlanabilir. Ek olarak, React Router sayesinde karmaşık bir routing yapısı da kolayca yönetilebilir.

React Router

React Router, React uygulamalarında routing işlemleri için en popüler kullanılan kütüphanelerden biridir. Bu kütüphane, Single Page Application (SPA)'lerde kullanılan browser tabanlı routing işlemlerinin yanı sıra server-side rendering işlemlerini de destekler.

React Router'ın ana bileşeni olan <BrowserRouter>, uygulamanızdaki tüm rotaların dinamik olarak kontrol edilmesini sağlar. <Route> bileşenleri ile rotalar tanımlanır ve <Link> bileşenleri ile sayfalar arası geçiş yapılır. Ayrıca <Switch> bileşeni ile sadece eşleşen rotanın görüntülenmesi sağlanabilir.

Örneğin, uygulamanızda '/home', '/about' ve '/contact' adında üç farklı sayfa bulunuyor olsun. Bu sayfalar için rotalar şu şekilde tanımlanabilir:

Yol (path)	Bileşen (component)
/home	HomeComponent
/about	AboutComponent
/contact	ContactComponent

Bu rotaların React Router ile tanımlanması için ise şu şekilde bir kod yazılabilir:

<BrowserRouter>  <Switch>    <Route exact path="/home" component={HomeComponent} />    <Route exact path="/about" component={AboutComponent} />    <Route exact path="/contact" component={ContactComponent} />  </Switch></BrowserRouter>

Bu şekilde tanımlanan rotalar, <Link> bileşenleri aracılığıyla sayfalar arasında geçiş yapmak mümkün olur. Örneğin, '/home' sayfasında yer alan bir <Link> bileşeni şu şekilde olabilir:

<Link to="/about">Hakkımızda</Link>

Bu şekilde kullanılan Link bileşeni, 'Hakkımızda' yazısı ile birlikte '/about' sayfasına yönlendirir. React Router, routing işlemlerinin kolay ve hızlı bir şekilde yapılmasını sağlar ve SPA'lerin daha iyi organize edilmesine yardımcı olur.

Conditional Rendering with Routing

Routing yapısı, React uygulamalarında koşullu rendering işlemlerinin yapılmasında önemli bir rol oynar. Örneğin, belirli bir koşula göre farklı sayfalarda farklı componentlerin render edilmesi gerekiyorsa, bunu routing yapısı sayesinde gerçekleştirebiliriz.

Öncelikle, React Router kütüphanesinin kullanılması gerekir. Bu kütüphane, uygulama içindeki sayfaları yönetmek için kullanılır. Örneğin, /home ya da /about gibi URL rotaları oluşturabilirsiniz. Bu rotalar farklı componentleri render edebilir.

Örnek olarak, bir kullanıcının giriş yaptığı ve yapmadığı durumlar için farklı componentlerin render edilmesi gerektiğini düşünelim. Bu durumda, önce kullanıcının durumunu kontrol edeceğiz. Eğer kullanıcı giriş yapmışsa, Dashboard componenti render edilecek. Aksi takdirde, Login componenti render edilecektir.

Route	Component
/	{Login}
/dashboard	{Dashboard}

Burada Login ve Dashboard componentleri Route componentinin altında yer alır. Eğer kullanıcı /dashboard rotasına giderse, Dashboard componenti render edilecek. Aksi takdirde, Login componenti render edilecektir.

Bu yapı farklı koşullar için de kullanılabilir. Örneğin, belirli bir veri seti mevcut olduğunda farklı bir tablo render edebilirsiniz ya da belirli bir aralıkta farklı bir grafik gösterebilirsiniz.

Routing yapısı, React uygulamalarında koşullu rendering işlemleri için oldukça kullanışlıdır. React Router kütüphanesi sayesinde, uygulamanız içindeki componentlerin dinamik olarak render edilmesini sağlayabilirsiniz.