ReactJS - Menggunakan useContext: Panduan untuk Pemula

Halo sana, para pengembang React yang ambisius! Hari ini, kita akan mendalami salah satu fitur paling kuat di React: hook useContext. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda melalui konsep ini secara langkah demi langkah. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mulai dari dasar dan naik tingkat!

Apa Itu Context di React?

Sebelum kita melompat ke useContext, mari pahami apa itu Context di React. Bayangkan Anda mengatur sebuah makan malam besar untuk keluarga. Anda punya saus khusus yang perlu disemburkan ke meja. Daripada mengirimkannya dari orang ke orang (yang mirip dengan drilling prop di React), tidakkah lebih mudah jika Anda menempatkannya di tengah meja tempat semua orang dapat mencapainya? Itu sebenarnya apa yang Context lakukan di React – itu menyediakan cara untuk mengirimkan data melalui pohon komponen tanpa harus mengirim prop secara manual di setiap tingkat.

Mengerti useContext

Sekarang, useContext adalah hook yang memungkinkan kita mudah mengkonsumsi Context ini di komponen fungsional kita. Itu seperti memberikan setiap orang di meja makan jalan langsung untuk mengakses saus khusus tanpa meminta orang lain untuk mengirimkannya.

Tanda Tangan useContext

Marilah lihat bagaimana kita menggunakan useContext:

const value = useContext(MyContext)

Ini artinya setiap bagian:

• value: Ini adalah nilai kontek saat ini
• MyContext: Ini adalah objek kontek (dibuat dengan React.createContext)

Itu sungguh mudah! Tetapi mari kita rinci lebih lanjut dengan contoh dunia nyata.

Penggunaan Context Melalui Hook

Marilah buat pengubah tema sederhana untuk aplikasi kita. Kita akan menggunakan Context untuk menyimpan tema saat ini dan useContext untuk mengaksesnya di komponen kita.

Pertama, buat kontek kita:

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

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

export default ThemeContext;

Sekarang, buat komponen yang menggunakan kontek ini:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
I'm a {theme} themed button!
</button>
);
}

export default ThemedButton;

Dalam contoh ini, useContext(ThemeContext) memberikan kita nilai tema saat ini. Kita kemudian menggunakan nilai ini untuk gayakan tombol kita.

Sekarang, lihatlah bagaimana kita dapat menyediakan kontek ini dalam aplikasi kita:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Di sini, kita membungkus aplikasi kita di dalam ThemeContext.Provider dan mengatur nilai ke "dark". Ini berarti setiap komponen dalam provider ini dapat mengakses nilai tema ini menggunakan useContext.

Memperbarui Context

Apa jika kita ingin memungkinkan pengguna untuk mengubah tema? Kita dapat melakukan ini dengan memperbarui nilai kontek kita. Marilah modifikasi komponen App kita:

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

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

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Sekarang kita menggunakan state untuk mengelola tema, dan kita menambahkan tombol untuk mengubahnya. Saat tema berubah, semua komponen yang menggunakan useContext(ThemeContext) akan secara otomatis dirender ulang dengan nilai baru.

Kesimpulan

Dan itulah! Kita telah menutupi dasar-dasar useContext di React. Mari rangkumkan titik utama:

1. Context menyediakan cara untuk mengirimkan data melalui pohon komponen tanpa prop-drilling.
2. useContext adalah hook yang memungkinkan kita mudah mengkonsumsi Context di komponen fungsional.
3. Untuk menggunakan useContext, kita perlu membuat Context pertama kali menggunakan React.createContext.
4. Kita dapat memperbarui Context dengan mengubah prop value dari komponen Provider.

Ingat, meskipun Context sangat kuat, itu tidak selalu solusi terbaik. Untuk prop sederhana yang hanya perlu diberikan satu atau dua tingkat, pengiriman prop biasa seringkali lebih jelas. Berpikirkan Context seperti saus khusus di makan malam keluarga – gunakanlah itu saat Anda memerlukan untuk berbagi sesuatu secara luas, tapi jangan terlalu sering gunakan!

Saya harap panduan ini telah membantu Anda untuk memahami useContext. Terus latihan, dan segera Anda akan menjadi ahli Context di React! Selamat coding!

Metode	Deskripsi
React.createContext	Membuat objek Context
useContext	Hook untuk mengkonsumsi nilai Context
<Context.Provider>	Komponen untuk menyediakan nilai Context ke anak-anaknya

Credits: Image by storyset