React’ta Context API nasıl kullanılır?

React’ta Context API Kullanımı

React’ta Context API, bir bileşen ağacında veri iletimi ve paylaşımı için kullanılır. Bu, özellikle prop drilling (özellik geçişi) sorununu ortadan kaldırır. Context API’yi kullanmak için aşağıdaki adımları izleyebilirsiniz.

1. Context Oluşturma

Öncelikle bir Context oluşturmanız gerekir. ```javascript import React, { createContext } from 'react'; const MyContext = createContext(); ```

2. Provider Kullanma

Oluşturduğunuz Context’i bir Provider aracılığıyla sararak değerleri paylaşabilirsiniz. ```javascript {/* Çocuk bileşenler */} ```

3. Tüketim (Consumer)

Context’i kullanmak isteyen bileşenlerde `useContext` hook'unu kullanarak verilere erişebilirsiniz. ```javascript import { useContext } from 'react'; const value = useContext(MyContext); ```

Örnek

Aşağıda basit bir örnek verilmiştir: ```javascript import React, { createContext, useContext, useState } from 'react'; const MyContext = createContext(); const App = () => { const [state, setState] = useState("Merhaba"); return ( ); }; const ChildComponent = () => { const value = useContext(MyContext); return ; }; export default App; ``` Bu örnekte, "Merhaba" mesajı, `ChildComponent` üzerinden tüketilmektedir. Context API ile veri akışı kolaylaşırken, daha düzenli bileşen hiyerarşileri oluşturabilirsiniz.