React frameworkünde context API nasıl kullanılır?

Adı : React frameworkünde context API nasıl kullanılır?

React, component tabanlı bir yapıya sahiptir ve bir component'ten diğerine veri aktarılmak istendiğinde, bu işlem bilgi akışının yönünü belirlemek konusunda karmaşıklıklara neden olabilir. İşte, React Context API'nin önemi burada ortaya çıkar. Context API, React uygulamalarında verilerin hiyerarşik şekilde paylaşılmasını sağlayan bir API'dir. Bu sayede, component'ler arasında veri transferi daha kolay hale gelir. Bu yazıda, React Context API'nin nasıl kullanılabileceği ve ne şekillerde örnekler verilebileceği üzerinde durulacaktır.
1) Context API Kullanımı
Context API, provider ve consumer olarak ikiye ayrılır. Provider, tüm alt bileşenleri saran bir componenttir ve alt bileşenlere veri sağlar. Tüm alt bileşenler, provider'ın sağladığı verilere erişebilir. Aksine, consumer, verilere ihtiyaç duyan bileşendir. Bu yüzden, bir parent component bir alt component'e veri gönderecekse, parent component bir provider bileşenine sahip olmalıdır. Alt component ise, consumer bileşeni kullanarak verilere erişebilir.\n \nContext API için bir örnek yapalım. Diyelim ki bir şirketin çalışanları var ve bu çalışanların bir listesi mevcut. Bu liste, hem içerideki component'lere sağlanan veri kaynağının kontrolü için kullanılacak hem de bileşenler arasındaki veri akışını sağlamak için kullanılacaktır.\nProvider bileşeni oluşturmak için createContext fonksiyonunu kullanacağız. createContext parametre olarak herhangi bir varsayılan değer alabilir.\n```javascript\nimport React, { createContext, useState } from react;
export const EmployessContext = createContext();
const EmployessProvider = (props) => {\n const [employees, setEmployees] = useState([\n { name: John, age: 30, position: developer },\n { name: Jane, age: 25, position: designer },\n { name: Mike, age: 32, position: manager },\n ]);
return (\n \n {props.children}\n \n );\n};
export default EmployessProvider;\n```\nBurada createContext fonksiyonu kullanarak EmployessContext adında bir değişken oluşturduk. EmployessProvider adındaki bileşenimiz, bu veriyi tüm alt bileşenlerle paylaşacak.\n \n2) Consumer Kullanımı\n \nConsumer, sadece değerleri almanın yanı sıra onları görüntülemek veya manipüle etmek için de kullanılabilir. Burada component'in içinde Consumer bileşeninde yer alan fonksiyon içinde istenilen kod yazılabilir. Aşağıdaki örnekte employees adında bir bileşen oluşturduk ve içinde EmployeeList adında bir component var. Bu bileşen, Employee component'lerinin listesini gösterir.\n```javascript\nimport React, { useContext } from react;\nimport { EmployessContext } from ../context/EmployessContext;\nimport Employee from ./Employee;
const EmployeeList = () => {\n const [employees, setEmployees] = useContext(EmployessContext);
return (\n

\n );\n};
export default EmployeeList;\n```\nYukarıdaki kodda EmployeesContext'in içindeki [employees, setEmployess] değişkenlerine erişmek için useContext fonksiyonunu kullandık. Bu sayede, tüm çalışanların listesi aldık. Sonrasında ise, map fonksiyonunu kullanarak her bir Employee component'ini EmployeeList içinde gösterdik.\n \n3) Context API ile Veri Güncelleme\n \nVerilerin güncellemesi için kullanılacak fonksiyonlar setEmployees gibi oluşturulur. Bu fonksiyon, EmployeesProvider bileşeninin içinde tanımlanır ve tüm alt bileşenlerin kullanımına açık hale getirilir. Örneğin, EmployeesList için açıklanan map fonksiyonu, her bir Employee için ayrı bir bileşenin oluşturulmasını sağlar. Buna ek olarak, bir Düzenle butonu ekleyeceğiz. Bu butona tıklandığında, seçili çalışanın adı güncelleştirilecektir. Bu işlemi gerçekleştirmek için, Employee bileşeninin içinde bir handleClick fonksiyonu oluşturacağız.\n```javascript\nimport React, { useState } from react;
const Employee = ({ employee }) => {\n const [name, setName] = useState(employee.name);
const handleClick = () => {\n setName(New Name);\n };
return (\n