Cara Menampilkan Banyak Data Sekaligus di React JS
1. Latar Belakang
Dalam pengembangan aplikasi web modern, sering kali sebuah halaman perlu menampilkan data dalam jumlah besar sekaligus, seperti daftar pengguna, produk, transaksi, atau log aktivitas sistem. Jika data tersebut tidak dikelola dengan baik, tampilan halaman bisa menjadi tidak efisien, sulit dibaca, dan bahkan memengaruhi performa aplikasi. Oleh karena itu, diperlukan teknik yang tepat untuk menampilkan banyak data secara terstruktur dan tetap nyaman dilihat oleh pengguna.
Dalam pengembangan menggunakan React, pengelolaan dan penampilan data dalam jumlah banyak dapat dilakukan dengan memanfaatkan konsep komponen dan rendering dinamis. React memungkinkan data ditampilkan secara efisien melalui proses pemetaan data ke dalam elemen antarmuka, sehingga daftar informasi dapat dibuat secara otomatis tanpa perlu menulis kode berulang. Dengan pendekatan ini, aplikasi menjadi lebih mudah dikembangkan, lebih terorganisir, dan mampu menangani jumlah data yang lebih besar secara lebih optimal.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
3.1 Apa itu Array?
Secara sederhana, Array adalah sebuah variabel khusus yang dapat menyimpan lebih dari satu nilai (data) pada satu waktu. Jika variabel biasa ibarat sebuah kotak yang hanya bisa diisi satu barang, array ibarat sebuah rak yang memiliki banyak laci, di mana setiap laci bisa diisi dengan barang yang berbeda.
Dalam JavaScript dan React, array ditandai dengan kurung siku []. Array sangat sering digunakan untuk menyimpan sekumpulan data dengan format yang seragam, misalnya daftar nama pengguna, daftar produk, atau daftar status server.
Contoh bentuk Array yang berisi sekumpulan objek data:
const dataSiswa = [
{ id: 1, nama: "Syifa", kelas: "XII RPL" },
{ id: 2, nama: "Aisyah", kelas: "XII RPL" }
];
3.2 Konsep Dasar map()?
map() adalah fungsi bawaan (metode) dari JavaScript yang khusus digunakan untuk memanipulasi Array. Fungsi ini bekerja dengan cara "berkeliling" (melakukan iterasi/perulangan) ke setiap isi dari sebuah array, memproses isi tersebut sesuai instruksi kita, lalu mengembalikan hasilnya menjadi array baru.
Di dalam React JS, map() adalah alat utama yang digunakan untuk mengubah data mentah (seperti array di atas) menjadi elemen-elemen HTML (seperti baris tabel <tr> atau daftar <li>), sehingga data tersebut bisa tampil di layar web tanpa perlu kita tulis satu per satu secara manual.
3.3 Langkah langkah implementasi
Berikut langkah-langkah implementasi fungsi map():
1. Membuat Proyek React Baru
Buka Terminal / Command Prompt Anda, lalu jalankan perintah berikut secara berurutan:
npm create vite@latest monitoring-app -- --template react
cd monitoring-app
npm install
2. Menulis Kode (Membuat Tabel)
Kita akan membuat struktur folder yang rapi. Buatlah folder baru bernama pages di dalam folder src, lalu buat file Dashboard.jsx.
lokasi -> src/pages/Dashboard.jsx
import React from 'react';
function Dashboard() {
const dataServer = [
{ id: 1, nama: "Server Web Utama", status: "Online", ping: "12ms" },
{ id: 2, nama: "Database Node 1", status: "Online", ping: "8ms" },
];
return (
<div>
<h2>Dashboard Monitoring</h2>
<table border="1" cellPadding="12" style={{ width: "100%", borderCollapse: "collapse" }}>
<thead>
<tr style={{ backgroundColor: "#f2f2f2", textAlign: "left" }}>
<th>ID</th><th>Nama Server</th><th>Status</th><th>Ping</th>
</tr>
</thead>
<tbody>
{dataServer.map((server) => (
<tr key={server.id}>
<td>{server.id}</td>
<td>{server.nama}</td>
<td>{server.status}</td>
<td>{server.ping}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default Dashboard;
3. Buat route
Agar aplikasi bisa berpindah halaman tanpa reload, kita menggunakan react-router-dom.
A. Instal Library
npm install react-router-dom
B. Konfigurasi di App.jsx
Buka file src/App.jsx, lalu atur navigasi dan jalurnya.
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Dashboard from './pages/dashboard'
function App() {
return (
<Router>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Router>
);
}
export default App;
4. Menjalankan Proyek
Jalankan perintah ini di terminal VS Code Anda:
npm run dev
Buka tautan localhost
http://localhost:5173/dashboard
Anda akan melihat data array tadi telah sukses dicetak menjadi tabel.
3.4 Kesimpulan
Data dalam jumlah banyak di JavaScript paling efisien disimpan dalam bentuk Array. Untuk menampilkannya ke antarmuka React JS, kita tidak perlu repot menyalin baris kode HTML (seperti <tr> dan <td>) berulang kali. Dengan memanfaatkan fungsi map(), React dapat melakukan perulangan pada setiap elemen dalam array dan mencetaknya secara otomatis ke dalam struktur tabel. Hal ini membuat struktur kode kita tetap ringkas, bersih, dan sangat mudah untuk dimodifikasi secara kolaboratif.
4. Daftar Pustaka
Petani Kode. (2020). Belajar ReactJS untuk Pemula. https://www.petanikode.com/reactjs/
SantriKoding. (2021). Belajar React JS Dasar untuk Pemula. https://santrikoding.com/tutorial-reactjs
Malas Ngoding. (2021). Tutorial ReactJS Lengkap untuk Pemula. https://www.malasngoding.com/category/reactjs/
Duniailkom. (2022). Tutorial Belajar ReactJS untuk Pemula. https://www.duniailkom.com/tutorial-belajar-reactjs-untuk-pemula/
0 Komentar