ReactJS - Menggunakan useContext: Panduan untuk Pemula

Hai teman-teman pengembang React yang bersemangat! Hari ini, kita akan mendalami salah satu fitur paling kuat dari React: hook useContext. Sebagai guru komputer yang ramah di lingkungan Anda, 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 tingkatnya!

Apa Itu Context dalam React?

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

Mengerti useContext

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

Signature useContext

Mari kita lihat bagaimana kita menggunakan useContext:

const value = useContext(MyContext)

Ini adalah arti dari setiap bagian:

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

Itu saja mudah! Tetapi mari kita rincikan lebih lanjut dengan contoh dunia nyata.

Penggunaan Context Melalui Hook

Mari kita buat pengalih tema sederhana untuk aplikasi kita. Kita akan menggunakan Context untuk menyimpan tema saat ini dan useContext untuk mengaksesnya dalam komponen kita.

Pertama-tama, mari kita buat kontek kita:

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

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

export default ThemeContext;

Sekarang, mari kita 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' }}>
Saya adalah tombol tema {theme}!
</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, mari kita lihat 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>Selamat datang di aplikasi tema kita!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Di sini, kita membungkus aplikasi kita 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 mengalih tema? Kita dapat melakukan ini dengan memperbarui nilai kontek. Mari kita 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>Selamat datang di aplikasi tema kita!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Beralih Tema</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

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

Kesimpulan

Dan itu dia! Kita telah meliputi dasar-dasar useContext dalam React. Mari kita rangkum titik utama:

1. Context menyediakan cara untuk menyembahkan data melalui pohon komponen tanpa prop-drilling.
2. useContext adalah hook yang memungkinkan kita mudah mengonsumsi Context dalam komponen fungsional.
3. Untuk menggunakan useContext, kita perlu membuat Context terlebih dahulu 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 props sederhana yang hanya perlu disembahkan satu atau dua tingkat, pengiriman prop biasa biasanya lebih jelas. Berpikir tentang Context seperti saus khusus di makan malam keluarga – gunakan itu saat Anda membutuhkan untuk berbagi sesuatu secara luas, tapi jangan terlalu banyak menggunakannya!

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

Credits: Image by storyset