Apa Itu React dan Cara Kerjanya
1. Latar Belakang
React merupakan pustaka JavaScript yang digunakan untuk membangun antarmuka pengguna (user interface) pada aplikasi web, khususnya aplikasi yang bersifat dinamis dan interaktif. Perkembangan teknologi web menuntut aplikasi yang mampu menampilkan data secara cepat tanpa harus memuat ulang seluruh halaman. Oleh karena itu, React dikembangkan untuk mempermudah proses pembuatan tampilan dengan pendekatan berbasis komponen, sehingga setiap bagian antarmuka dapat dibuat, dikelola, dan digunakan kembali secara lebih terstruktur dan efisien.
Cara kerja React didasarkan pada konsep Virtual DOM dan component-based architecture. Ketika terjadi perubahan data pada aplikasi, React tidak langsung mengubah tampilan halaman web secara keseluruhan. Sebaliknya, React terlebih dahulu memperbarui Virtual DOM, yaitu representasi virtual dari struktur halaman. Setelah itu, React membandingkan perubahan tersebut dengan DOM asli menggunakan proses yang disebut diffing, lalu hanya memperbarui bagian halaman yang benar-benar berubah. Pendekatan ini membuat proses rendering menjadi lebih cepat, efisien, dan memudahkan pengembang dalam mengelola aplikasi web yang kompleks.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
3.1 Apa Itu React?
React adalah library JavaScript open-source yang dikembangkan oleh Facebook (kini Meta) pada tahun 2013. React digunakan untuk membangun antarmuka pengguna (User Interface / UI) yang interaktif dan dinamis, khususnya untuk aplikasi web berbasis komponen.
React bukan framework lengkap seperti Angular, melainkan sebuah library yang fokus pada satu hal: rendering tampilan (View) dalam arsitektur MVC (Model-View-Controller). Ini membuat React sangat fleksibel dan dapat dikombinasikan dengan berbagai teknologi lain.
3.2 Mengapa Menggunakan React?
React menjadi salah satu library frontend yang paling populer di dunia. Berikut alasan utama banyak developer dan perusahaan memilih React:
• Deklaratif — Cukup deskripsikan tampilan yang Anda inginkan, React akan mengurus perubahannya secara efisien
• Berbasis Komponen — UI dibagi menjadi komponen-komponen kecil yang dapat digunakan kembali (reusable)
• Virtual DOM — React menggunakan representasi virtual dari DOM untuk performa optimal
• Ekosistem Besar — Library, tools, dan komunitas yang sangat luas
• React Native — Kode yang sama bisa digunakan untuk aplikasi mobile iOS dan Android
• Didukung Meta — Pemeliharaan aktif dari perusahaan teknologi besar
• Permintaan Pasar Tinggi — Salah satu skill paling dicari di industri tech
3.3 Cara Kerja React
1. Virtual DOM
Salah satu konsep terpenting dalam React adalah Virtual DOM (Document Object Model Virtual). Untuk memahaminya, kita perlu tahu terlebih dahulu apa itu DOM dan masalah apa yang dipecahkan React.
DOM Tradisional vs Virtual DOM
Pada aplikasi web tradisional, setiap kali data berubah, browser harus memanipulasi DOM secara langsung. Manipulasi DOM ini sangat mahal secara komputasi karena menyebabkan browser melakukan:
• Reflow — Penghitungan ulang layout elemen
• Repaint — Menggambar ulang piksel di layar
• Recalculate Style — Menghitung ulang semua CSS
React mengatasi masalah ini dengan Virtual DOM — sebuah representasi JavaScript ringan dari DOM asli yang disimpan di memori.
Proses Kerja Virtual DOM
1. React membuat salinan Virtual DOM dari UI saat ini
2. Ketika state atau props berubah, React membuat Virtual DOM baru
3. React membandingkan Virtual DOM baru dengan yang lama (Diffing Algorithm)
4. React hanya memperbarui bagian DOM asli yang benar-benar berubah (Reconciliation)
5. Browser hanya merender perubahan minimal yang diperlukan
Analogi Virtual DOM
Bayangkan Virtual DOM seperti draft dokumen. Daripada langsung mengedit dokumen asli (yang mahal), Anda membuat draft baru, membandingkan perbedaannya, lalu hanya menerapkan perubahan yang diperlukan ke dokumen asli.
2. Reconciliation & Diffing Algorithm
Reconciliation adalah proses dimana React menentukan perubahan apa yang perlu dilakukan pada DOM asli. React menggunakan algoritma diffing yang sangat efisien dengan kompleksitas O(n), jauh lebih baik dari algoritma tree comparison tradisional O(n³).
Aturan utama dalam algoritma diffing React:
• Elemen dengan tipe berbeda akan menghasilkan tree yang berbeda (dihapus & dibuat ulang)
• Developer dapat memberikan key untuk membantu React mengidentifikasi elemen dalam list
• React membandingkan elemen pada level yang sama (breadth-first)
// Contoh bagaimana React melakukan Diffing
// State sebelumnya:
<ul>
<li key='a'>Item A</li>
<li key='b'>Item B</li>
</ul>// State baru:
<ul>
<li key='a'>Item A</li>
<li key='b'>Item B</li>
<li key='c'>Item C</li> *Hanya ini yang ditambahkan*
</ul>
3. React Fiber
React Fiber adalah rekonstruksi ulang algoritma inti React yang dirilis pada versi 16 (2017). Fiber memungkinkan React untuk:
• Membagi pekerjaan rendering menjadi unit-unit kecil
• Menghentikan, melanjutkan, atau membatalkan pekerjaan rendering
• Memprioritaskan update yang berbeda (animasi lebih prioritas dari update data)
• Mendukung Concurrent Mode untuk rendering yang lebih mulus
4. Daftar Pustaka
Setiawan, R. (2022). Apa itu React? Dicoding Indonesia. https://www.dicoding.com/blog/apa-itu-react/ (dicoding.com)Dicoding Indonesia. (2023). Dengan React Query, data fetching tidak lagi pusing. https://www.dicoding.com/blog/dengan-react-query-data-fetching-tidak-lagi-pusing/ (dicoding.com)
Dicoding Indonesia. (n.d.). Belajar fundamental aplikasi web dengan React. https://www.dicoding.com/academies/413-belajar-fundamental-aplikasi-web-dengan-react (dicoding.com)
Niagahoster. (2023). Apa itu React JS? Pengertian, fungsi, dan cara kerjanya. https://www.niagahoster.co.id/blog/react-js/
0 Komentar