Memahami Props dan State di React
1. Latar Belakang
Pengembangan aplikasi web modern menuntut antarmuka yang dinamis, interaktif, dan mampu merespons perubahan data secara cepat. Dalam proses tersebut, penggunaan pustaka JavaScript seperti React menjadi populer karena menawarkan pendekatan berbasis komponen yang memudahkan pengembang dalam membangun dan mengelola tampilan aplikasi.
Setiap komponen dalam React dapat berkomunikasi dan berbagi data satu sama lain, sehingga aplikasi dapat berjalan secara terstruktur dan efisien. Untuk mendukung mekanisme tersebut, React menyediakan konsep penting yaitu props dan state yang berperan dalam mengatur aliran serta pengelolaan data di dalam komponen.
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 Props?
Props (properties) adalah cara mengirim data dari component induk ke component anak. Props bersifat read-only — component yang menerima props tidak boleh mengubah nilainya. Props memungkinkan component bersifat reusable dengan data yang berbeda-beda.
// Component induk mengirim data via props
function App() {
return <ProfilUser nama="Budi" umur={25} />;
}// Component anak menerima dan menampilkan props
function ProfilUser({ nama, umur }) {
return <p>{nama} berumur {umur} tahun.</p>;
}
3.2 Apa Itu State?
State adalah data internal yang dimiliki oleh sebuah component. Berbeda dengan props, state bisa berubah dari dalam component itu sendiri. Ketika state berubah, React secara otomatis akan me-render ulang component untuk menampilkan data terbaru.
State dikelola menggunakan Hook useState yang disediakan oleh React:
import { useState } from 'react';
function Penghitung() {
const [jumlah, setJumlah] = useState(0);
return (
<div>
<p>Jumlah: {jumlah}</p>
<button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
</div>
);
}
3.3 Perbedaan Props dan State
• Props — dikirim dari luar (component induk), bersifat read-only, tidak bisa diubah oleh component penerima.
• State — dimiliki dan dikelola dari dalam component itu sendiri, bisa berubah, memicu re-render saat berubah.
3.4 Kapan Menggunakan Props vs State?
Gunakan props ketika data berasal dari component induk dan tidak perlu diubah oleh component tersebut. Gunakan state ketika component perlu melacak data yang berubah akibat interaksi pengguna atau kejadian lainnya.
4. Daftar Pustaka
Dicoding Indonesia. (2022). Memahami props dan state pada React. https://www.dicoding.com/blog/memahami-props-dan-state-pada-react/
Petani Kode. (2021). Belajar ReactJS: Memahami props dan state. https://www.petanikode.com/reactjs-props-dan-state/
Niagahoster. (2023). Tutorial React JS untuk pemula: memahami props dan state. https://www.niagahoster.co.id/blog/react-js/
Dewaweb. (2022). Mengenal konsep props dan state pada React JS. https://www.dewaweb.com/blog/react-js/
0 Komentar