Event Handling dan List di React
1. Latar Belakang
Pengembangan aplikasi web modern membutuhkan antarmuka yang interaktif dan mampu merespons tindakan pengguna secara cepat. Dalam hal ini, React menyediakan mekanisme event handling yang digunakan untuk menangani berbagai interaksi pengguna seperti klik tombol, pengisian input, atau aksi lainnya. Dengan event handling, aplikasi dapat menjalankan fungsi tertentu ketika suatu peristiwa terjadi sehingga membuat aplikasi lebih dinamis.
Selain itu, React juga menyediakan konsep list rendering untuk menampilkan kumpulan data secara efisien. Data yang berbentuk array dapat ditampilkan menjadi beberapa elemen tampilan menggunakan metode seperti map(). Dengan memahami event handling dan list rendering, pengembang dapat membangun aplikasi React yang lebih responsif dan mudah dalam mengelola data yang ditampilkan kepada pengguna.
2. Alat dan Bahan
a. Perangkat Lunak
• Terminal / Command Prompt
• Text Editor (VS Code)
• Web Browser (Firefox / Chrome)
• Node.js & npm (unduh di nodejs.org)
b. Perangkat Keras
• Laptop / Komputer
3. Pembahasan
3.1 Apa itu Event Handling dan List?
Manusia membuat antarmuka web supaya pengguna bisa menekan sesuatu lalu aplikasi bereaksi. Konsep yang mengurus bagian “menekan sesuatu lalu terjadi sesuatu” di React disebut Event Handling. Event handling adalah cara React menangani peristiwa atau aksi dari pengguna, misalnya klik tombol, mengetik di input, atau mengirim formulir. Ketika sebuah event terjadi, React akan menjalankan fungsi tertentu yang sudah ditentukan oleh pengembang.
Sementara itu, List dalam React adalah cara menampilkan kumpulan data secara berulang di dalam tampilan. Biasanya data disimpan dalam bentuk array, lalu React akan menampilkannya menjadi beberapa elemen menggunakan fungsi seperti map(). Teknik ini membuat pengembang bisa menampilkan daftar data, seperti daftar pengguna, produk, atau pesan, secara lebih efisien tanpa menulis elemen satu per satu.
3.2 Event Handling di React
React menangani event menggunakan atribut khusus yang ditulis dengan format camelCase, seperti onClick, onChange, dan onSubmit. Berbeda dengan HTML biasa, di React kita mengoper sebuah fungsi sebagai handler event.
function TombolKlik() {
function handleKlik() {
alert('Tombol diklik!');
}
return <button onClick={handleKlik}>Klik Saya</button>;
}
3.3 Event pada Input Form
Untuk menangani perubahan nilai input, gunakan event onChange. Nilai input biasanya disimpan ke dalam state agar component bisa bereaksi terhadap perubahannya:
function FormNama() {
const [nama, setNama] = useState('');
return (
<input
value={nama}
onChange={(e) => setNama(e.target.value)}
placeholder="Masukkan nama"
/>
);
}
3.4 Menampilkan List di React
Untuk menampilkan array data sebagai list elemen, React menggunakan metode .map(). Setiap elemen dalam list wajib memiliki prop key yang unik agar React dapat mengidentifikasinya dengan efisien.
const buah = ['Apel', 'Mangga', 'Jeruk'];
function DaftarBuah() {
return (
<ul>
{buah.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
3.5 Pentingnya Prop Key
Prop key membantu React mengidentifikasi elemen mana yang berubah, ditambahkan, atau dihapus dari sebuah list. Gunakan nilai yang stabil dan unik sebagai key — idealnya ID dari data, bukan index array — untuk menghindari masalah performa dan bug yang tidak terduga.
4. Daftar Pustaka
Dicoding Indonesia. (2022). Belajar React: event handling pada React. https://www.dicoding.com/blog/event-handling-pada-react/
Petani Kode. (2021). Belajar ReactJS: event dan penanganannya. https://www.petanikode.com/reactjs-event/
Niagahoster. (2023). Tutorial React JS untuk pemula: memahami event handling dan rendering list. https://www.niagahoster.co.id/blog/react-js/
Codepolitan. (2020). Mengenal event handling dan list rendering di React. https://www.codepolitan.com/react-event-handling-dan-list-rendering
0 Komentar