ReactJS - Konteks: Panduan untuk Pemula

Hai teman-teman pengembang berbakat! Hari ini, kita akan melihat dunia yang menakjubkan dari ReactJS Context. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda melalui konsep ini dengan kegembiraan yang saya miliki saat pertama kali belajarinya. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Konteks di React?

Bayangkan Anda di sebuah reuni keluarga, dan Anda ingin berkongsi cerita lucu kepada semua orang. Bukankah lebih baik kalau Anda bisa mengumumkannya sekali saja, dan semua orang bisa mendengarnya? Itu tepatnya apa yang dilakukan Konteks di React!

Konteks menyediakan cara untuk memindahkan data melalui pohon komponen tanpa harus mengirimkan props secara manual di setiap tingkat. Itu dirancang untuk berbagi data yang dapat dianggap "global" untuk sebuah pohon komponen React.

Kapan Harus Menggunakan Konteks

Sebelum kita mendalamkan, mari kita pahami kapan harus menggunakan Konteks:

1. Ketika Anda memiliki data yang perlu diakses oleh banyak komponen di berbagai tingkat penempatan.
2. Ketika Anda ingin menghindari "prop drilling" (mengirimkan props melalui komponen intermediat yang tidak memerlukan data).

Membuat dan Menggunakan Konteks

Mari kita pergi melalui proses membuat dan menggunakan Konteks dengan beberapa contoh kode.

Langkah 1: Membuat Konteks

Pertama, kita perlu membuat Konteks. Kita akan menggunakan metode React.createContext() untuk ini.

import React from 'react';

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

export default ThemeContext;

Dalam contoh ini, kita membuat ThemeContext dengan nilai default 'light'. Nilai default ini digunakan ketika komponen tidak memiliki Provider yang cocok di atasnya dalam pohon.

Langkah 2: Menyediakan Konteks

Sekarang kita memiliki Konteks, kita perlu menyediakannya ke pohon komponen kita. Kita melakukan ini menggunakan komponen Context.Provider.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

Dalam contoh ini, kita membungkus komponen Toolbar (dan semua anaknya) dengan ThemeContext.Provider. Kita mengatur nilai ke "dark", yang akan tersedia bagi semua komponen dalam Provider ini.

Langkah 3: Menggunakan Konteks

Sekarang datang bagian yang menyenangkan - menggunakan Konteks! Ada dua cara untuk mengonsumsi Konteks:

1. Class.contextType
2. Context.Consumer

Mari kita lihat keduanya:

Menggunakan Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Saya adalah tombol tema!</button>;
}
}

Dalam contoh ini, ThemedButton adalah komponen kelas. Kita telah mengatur contextType nya ke ThemeContext. Sekarang, this.context akan memberikan kita akses ke nilai konteks saat ini.

Menggunakan Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Saya adalah tombol tema!</button>}
</ThemeContext.Consumer>
);
}

Di sini, kita menggunakan komponen Context.Consumer. Itu menggunakan render prop untuk memberikan nilai konteks saat ini ke fungsi.

Konteks Ganda

kadang-kadang, Anda mungkin perlu menggunakan beberapa konteks. React mengijinkan Anda menimbun beberapa Context Providers:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

Dan Anda bisa mengonsumsi beberapa konteks seperti ini:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} menggunakan tema {theme}
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Memperbarui Konteks

Konteks juga bisa dinamis. Mari kita lihat contoh di mana kita memperbarui tema kita:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</ThemeContext.Provider>
);
}

Dalam contoh ini, kita menggunakan hook useState untuk mengelola state tema kita. Kita mengirimkan nilai tema saat ini dan fungsi setTheme dalam nilai konteks.

Metode Konteks

Berikut adalah tabel yang menggabungkan metode Konteks utama yang kita bahas:

Metode	Deskripsi
React.createContext()	Membuat objek Konteks
Context.Provider	Menyediakan nilai konteks ke komponen
Class.contextType	Memungkinkan komponen kelas untuk mengonsumsi konteks tunggal
Context.Consumer	Memungkinkan komponen fungsi untuk berlangganan ke konteks

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Kita telah melakukan perjalanan melalui negeri React Context, dari penciptaannya ke penggunaannya dan bahkan pembaruan nya. Konteks adalah alat yang kuat di React, memungkinkan Anda untuk menghindari prop drilling dan mengelola state global secara efektif.

Ingat, seperti semua alat, Konteks tidak selalu solusi yang tepat. Untuk kasus yang sederhana, props mungkin masih menjadi pilihan terbaik Anda. Tetapi saat Anda perlu membagikan data ke banyak komponen di tingkat yang berbeda, Konteks bisa menjadi teman baru Anda.

Terus latih, terus kode, dan terutama, terus bersenang-senang! Sampaijumpa lagi, selamat ber-Reacting!

Credits: Image by storyset