— Teknis — 1 min read
React adalah sebuah library yang digunakan untuk membangun antarmuka pengguna atau User Interface (UI). Salah satu konsep yang ada pada React adalah Component-Based, dengan konsep ini pengembang atau developer dapat mengembangkan tampilan antarmuka berdasarkan dari susunan komponen.
Pada sebuah aplikasi yang dibangun menggunakan React, umumnya data di-passing dari atas ke bawah (top-down) atau dari komponen induk ke komponen anak (parent to child) dengan menggunakan props. Namun pada beberapa kasus akan menjadi rumit ketika menggunakan props seperti ketika passing data yang bersifat global seperti preferensi bahasa, authenticated user data, dan UI theme (Dark or Light Mode).
Kemudian hadirlah Context, sebuah API di dalam React yang menyediakan cara untuk passing dan consuming data ke komponen apapun yang diperlukan pada aplikasi React yang sedang dibangun tanpa menggunakan props. Data yang akan di passing menggunakan Context adalah data yang tidak terlalu sering diupdate.
Jika ditanya kenapa, maka jawabannya adalah Context dibuat bukan untuk dijadikan sebagai state management untuk aplikasi melainkan untuk membuat consuming data menjadi lebih mudah lagi. Jika dipikir-pikir, konsepnya hampir sama dengan global variable.
Context adalah sebuah API yang dibangun di dalam React, ini berarti kita dapat langsung membuat dan menggunakan Context dengan meng-import React pada project.
Terdapat beberapa langkah untuk menggunakan Context, yaitu:
Di bawah ini adalah contoh implementasi React Context.
1import React from 'react';2
3export const ThemeContext = createContext();4
5export default function App() {6 return (7 <ThemeContext.Provider value="dark-theme">8 <HomePage />9 </ThemeContext.Provider>10 )11}12
13function User() {14 return (15 <ThemeContext.Consumer>16 <div className={value}></div>17 </ThemeContext.Consumer>18 )19}
Jadi disini casenya adalah untuk mengirimkan props tema yang digunakan yaitu light atau dark. Sesuai dengan langkah-langkah yang sudah ditulis diatas, pertama-tama adalah membuat contextnya dengan menggunakan createContext. Setelah itu membuat provider dengan context yang sudah dibuat yaitu ThemeContext.Provider dan membuat sebuah props untuk menampung nilai yang akan dipass ke komponen lain.
Selanjutnya adalah memanggil komponen yang akan menerima nilai dari context di dalam provider. Langkah terakhir adalah membuat consumer di dalam komponen target dan consume value yang berada di dalam context.
Itu tadi sedikit tentang React Context, jika memang masih ada yang mengganjal bisa langsung dm aja ke sini. Makasih udah baca sampe selesai, have a nice day!