Context API Nedir?

Adı : Context API Nedir?

Context API Nedir?

React, günümüz web geliştirme endüstrisinde en popüler kütüphanelerden biridir. React, bileşen tabanlı bir yapıya sahiptir. Bu nedenle, uygulamanızda birden çok bileşen kullanmanız gerekebilir. Ancak, bazı bileşenler uygulamanızın her bir tarafında kullanılabilir ve bu bileşenlere erişmek için veri aktarımları yapmanız gerekir. Bu, React Context API'nin neden ortaya çıktığını açıklayabilir.

Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir. Ayrıca, React bileşenlerinin veri paylaşımı için bir alternatif görevi de görür.

Context'in Kullanımı

Basit bir örnek olarak, bir uygulamanızda bir tema seçiminiz olduğunu varsayalım. Bu temanın uygulamanızın birçok bileşeni tarafından kullanılması gerekiyor. İşte burada Context API devreye giriyor. Bunu şu şekilde kullanabilirsiniz:

```javascript
const ThemeContext = React.createContext('light');

function App() {
return (

{/* ThemeProvider olduğu yerde JSX kodları */}

);
}

function Main() {
return (

{value =>

}

);
}
```

Yukarıdaki örnekte, App bileşenimizde bir `ThemeProvider` alanı yarattık ve bu alanda bir özellik değeri olan `dark`'ı belirttik. Ardından, `Main` bileşenimizde, `ThemeProvider`'ın sağladığı değeri `Consumer` ile aldık.

Context API Kullanarak Redux Yerine Geçmek

React Redux'un basit bir uygulamasında, `Provider` ve `connect` fonksiyonları, Redux verilerinin tüm ağaç boyunca geçmesini sağlar. Ancak, büyük uygulamalarda, her bir bileşen için bir özel seçici fonksiyon tanımlamak, Redux'tan veri alan ve yeniden çizmek icin birçok ekstra işlem yapmak gerekebilir.

Buna alternatif olarak, Context API, Redux'un yerine geçebilir. Mesela, şu şekilde bir kullanım söz konusu olabilir:

```javascript
const store = {
state: { counter: 0 }
};

const StoreContext = React.createContext(null);

function useStore() {
const context = React.useContext(StoreContext);
if (!context) {
throw new Error('useStore must be used within a StoreContext.Provider');
}
return context;
}

function StoreProvider(props) {
const [state, setState] = React.useState(store.state);
const value = React.useMemo(() => [state, setState], [state]);
return ;
}

function CounterDisplay() {
const [state] = useStore();
return

The current counter count is {state.counter}

;
}

function Counter() {
const [state, setState] = useStore();
const increment = () => setState(s => ({ counter: s.counter + 1}));
return (
<>

Increment Count

The current counter count is {state.counter}

);
}

function App() {
return (




);
}
```

Yukarıda görülebileceği gibi, Redux gibi, önce bir depo nesnesi oluşturulur. Ardından, `StoreProvider` adlı bir ana bileşen içinde verileri depolayan bir `useState` öğesi oluşturulur. `useStore` özelliği, veriyi alan ve depola tekrar gönderen `useState` öğelerini kullanır. Bu, `Counter` bileşenine geçirilen verilerin `CounterDisplay` bileşeninde gösterilmesine olanak tanır.

Sıkça Sorulan Sorular

Soru: Context API nedir ve ne işe yarar?
Cevap: Context API, üst düzey bileşenlerden alt düzey bileşenlere veri aktarma işlemini kolaylaştıran bir React özelliğidir.

Soru: Context API, Redux ile karşılaştırılabilir mi?
Cevap: Evet, Context API, Redux'un yerine geçebilir.

Soru: React uygulamaları, neden Context API kullanmak isteyebilir?
Cevap: React uygulamaları, bir veya daha fazla bileşenin erişebileceği bir veriye sahip olduklarında Context API kullanmak isteyebilir."