React Context Api Kullanımı

React JS ile uygulama geliştirirken çok sayıda komponent ile işlem yaparız. Uygulamamız büyüdükçe daha fazla komponent ihtiyacı doğar. Bu durum bazı zorlukları da beraberinde getir. Bu nedenle de farklı eklentiler ve teknolojiler kullanmamız gerekebilir.

Konumuz olan Context Api de böyle durumlar için geliştirilmiştir. Context nedir? Nasıl kullanılır? sorularına geçmeden önce ilk olarak sorunu tespit etmek çözüm için oldukça faydalı olacaktır. React ile uygulama geliştirirken bileşen (component) sayısı artıkça bileşenler arasında veri akışını sağlamak zorlaşır. Bunun için geliştirilen çözümlerden bir tanesi Context Api teknolojisidir.

Neden Komponenetler Arası Veri Aktarmak Zorlaşır?

Komponetler yatay ve dike olarak büyürler. Bu ne demek dikey olarak büyüdüğü zaman bir komponentin içerisinde başka bir komponent ve onun içerisinde de başka bir komponet kullanmaya ihtiyacımız olabilir. Bu derinlik seviyesi ihtiyacımıza göre değişir. Bununla birlikte yatay olarak da gelişme olur, bu ne demek bir çok komponenti peş peşe kullanmamız gerekebilir.

Bu gibi durumlarda mesela elimizde bir ürün komponenti olsun ve bu komponentin içerisinde beşinci seviyede fiyat bilgisi tutan farklı bir komponent olsun. Fiyat bilgisini beşinci seviyeye nasıl ulaştıracağız? React uygulamalarında bunun için propları kullanıyoruz. En baştan en son komponente kadar problar içerisinde fiyat bilgisini taşımamız gerekecek.

Ya beşinci derecede bulunan bileşenin içeriğinde bir güncelleme yapıldı ve bu güncellemenin birinci seviye ürünler komponentine ulaştırmamız gerektiğinde ne yapacağız?

Bu gibi durumlar hem kod yazmayı zorlaştırır ve hemde hata yaptırmaya meyillidir. Bu nedenle bu işlemlerin farklı şekillerde yapılması gerekir.

Veri Aktarımında Context Api Çözümü Nedir?

Birden fazla komponent içerisinde tutulacak verilerin proplar ile aktarılması yerine global (genel) düzeyde tüm bileşenlerin ulaşabileceği bir alanda tutulması bu verileri işlemek ve kullanmak için daha kola bir yoldur. Böylece bir verileri istediğimiz yerden değiştirebilir ve bir veri değiştiği zaman bu değişimi diğer bileşenler üzerinde görmemiz de olanaklı hale gelir.

Özellikle tema bilgileri, kullanıcı bilgileri gibi uygulamanın birçok yerinde kullanılacak verileri context üzerinde tutmak geliştirici açısından oldukça faydalıdır. Çözüm oldukça basittir.

• Bir context için bir dosya oluştur ve context tanımını yap. Aslında context de bir React komponentidir.
• Context tanımını yaptıktan sonra global değişkenleri ve bu değişkenleri düzenleyecek fonksiyonları oluştur.
• Oluşturduğun context bileşenini dışarı aktar.
• Kullanılack yerde context bileşenini içe aktar.
• Context içerisinden değişken ve bu değişkeni düzenlemek için kullanacağın fonksiyonu al.
• Eğer değişkene ihtiyacın varsa kullan.
• Eğer değişkene yeni değer atayacaksan ilgili fonksiyon ile yeni değeri ata.

Bu adımları daha detaylı olarak inceleyeceğiz.

Context İle İlgili Hook Ve Nesneler

Context ile kullanmamız gereken bazı komponentler vardır.

createContext

Bir context oluşturmak için kullanılan React metodudur. React kütüphanesinde bulunur ve buradan import edilir. Kullanım şekli şu şekildedir.

import { createContext } from 'react';

export const ContextAdi = createContext();

Burada ContextAdi yerine kullanılacak isim gelmelidir, mesela tema kullanımı için themeContext şeklinde olabilir. Ve farklı bileşenlerde kullanacağımız için export etmeliyiz.

useContext

Context üzerindeki değişkenleri kullanmak için o değişkenleri kontekst üzerinden alamız gerekmektedir. Bunu da bir React metodu olan useContext ile yapıyoruz. Hem değişkenler ve hemde değişkenleri güncellemek için kullanacağımız fonksiyonları bu komponent ile alabiliriz. useContext işlem yapılacak konteksti parametre olarak alır ve geriye kontekst içerisinde tanımlı değişken ve fonksiyonları dönderir. Kullanım şekli şu şekildedir.

import {useContext} from 'react';
import {IstenenContext} from './istenen-context';

function BirKomponent() {
    const degiskenler = useContext(IstenenContext);

    return (
        <div>
            {degiskenler}
        </div>
    )
}

Provider

Context içerisinde oluşturduğumuz değişkenleri diğer komponentlerde kullanabilmemiz için Provider kullanıyoruz. Provider oluşturduğumuz contextten alınır ve kullanılacak değişkenleri value probu ile alır. Ayrıca Provider değişkenleri kullanacağımız tüm komponentleri sarmalıdır. Bu nedenle genellikle App komponentini sarmalar ve tüm uygulamada kullanılır.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserContext, data } from './userContext';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <UserContext.Provider value={data}>
        <App />
    </UserContext>
  </React.StrictMode>
);

Örnekte gördüğümüz gibi önce oluşturduğumuz konteksti ve datayı import ediyoruz. Sonra App komponentini bu kontekstin provideri ile sarmalıyoruz.

Anlatılanlar biraz havada kalmış olabilir, fakat ilk örneğimizle birlikte anlatmak istediklerimiz daha anlaşılır olacaktır.

Örnekler İle React Context Kullanımı

Gerekli bilgileri önceden verdikten sonra şimdi ilk örneğimizi yapalım.

Kullanıcı Adını Context Üzerinde Saklamak

İlk örneğimizde kullanıcı adını kontekst üzerinde oluşturacağız ve sonra bunu hoşgeldin bölümünde kullanacağız. Giriş seviyesi bir context kullanımı olacak. Bu örnekle daha önce öğrendiklerimiz daha anlaşılır olacaktır. Şimdi create-react-app ile bir React projesi başlatalım.

İlk olarak context bileşenini oluşturalım. Bunun için src klasörü içerisinde UserContext.js adında bir dosya oluşturalım ve içeriğini aşağıdaki gibi yapalım.

import { createContext} from 'react';

export const UserContext = createContext();

export const data = 'Ahmet';

Şimdi oluşturduğumuz bu kontekst ile index.js içerisinde App bileşenini aşağıdaki örnekte olduğu gibi sarmalayalım.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserContext, data } from './UserContext';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <UserContext.Provider value={data}>
        <App />
    </UserContext>
  </React.StrictMode>
);

Şimdi Welcome komponentini oluşturalım. Bu komponent kullanıcıya ismi ile hoşgeldin diyecek.

import { useContext } from 'react';
import { UserContext } from './userContext';

function Welcome() {
    const data = useContext(UserContext);

    return (
        <div>Hoşgeldin {data}</div>
    );
}

export defaul Welcome;

Bu komponetni src dizinine Welcome.js olarak kayıt ediyoruz. Artık Welcome komponentini çalıştırmak için App komponentine ekleyelim.

import 'Welcome' from 'Welcome';

function App() {
    return (
        <div>
            <h1>Context İlk Örnek</h1>
            <Welcome />
        </div>
    );
}

export default App;

Artık işlemimiz tamam. npm start ile oluşturduğumuz uygulamayı ayağa kaldırdığımızda verilen kullanıcı adına bir hoşgeldin mesajı ile karşılaşacağız.

Sonuç

Contex Api ile global olarak istediğimiz verileri daha rahat bir şekilde tutabilir ve sonrasında onlari gerektiğinde kullanır veya içeriğini değiştirebiliriz. Konteks üzerindeki bir değişkenin değeri değiştiğinde uygulama içerisinde nerede kullanıldı ise oradaki değerler de değişecektir. Böylece istenile komponent üzerinde bu değişkenin değerini değiştirme ve kullanma esnekliği kazanılmış olacaktır.

React JS ile ilgili sormak istediklerinizi yorumlardan bize iletebilirsiniz.