Reusable component merupakan komponen pada React yang dapat digunakan berulang kali. Komponen yang dibuat akan digunakan berkali-kali pada tampilan yang berbeda, contoh beberapa reusable component yang sering digunakan adalah seperti button, navbar, footer, dan lainnya. Dengan menggunakan reusable component proses pengembangan website menjadi lebih efisien karena developer tidak perlu membuat sebuah komponen yang sama berulang kali.
Apa itu Reusable Component pada ReactJS
Salah satu manfaat menggunakan konsep reusable component pada React adalah efisiensi waktu dalam proses pengembangan website. Reusable component dirancang untuk membuat kode yang dibuat lebih terstruktur dan lebih mudah dikelola. Hal ini dapat mempercepat proses pengembangan, mengurangi waktu, dan biaya.
Beberapa Prinsip dalam Reusable Component
- Single Responsibility Principle Setiap komponen yang dibuat menggunakan React sebaiknya memiliki satu fungsi atau tanggung jawab. Hal ini membuat komponen tersebut dapat digunakan berkali-kali.
- Don’t Repeat Yourself Dalam membuat sebuah komponen sebaiknya hindari menuliskan kode yang sama beulang kali, sebagai gantinya kamu bisa menggunakan reusable component agar kamu tidak menduplikasi kode yang sama dan membuat kode menjadi lebih efisien
- Props dan State Reusable component erat kaitannya dengan Props dan State. Props dan State digunakan untuk mengirimkan data antar komponen untuk membuat sebuah komponen menjadi lebih fleksibel. Dengan menggunakan Props dan State komponen yang dibuat dapat menjadi lebih fleksibel dan dapat digunakan berulang kali.
Contoh Penggunaan Reusable Component
Agar lebih jelas tentang penggunaan reusable component, dalam kesempatan ini kita akan membuat sebuah tampilan form sederhana dan akan mengimplementasikan prisnip resuable component di dalamnya.
Pada kode diatas merupakan kode untuk membuat sebuah form dalam React. Dapat dilihat bahwa kita bisa menerapkan prinsip dari reusable component pada kode tersebut. Pada kode tersebut terdapat element input dibuat secara berulang dan kita akan merubah kedua element input tersebut menjadi satu komponen agar dapat digunakan berulang kali
Karena element input sebelumnya dibuat secara berulang, maka kita perlu membuat sebuah child component yang berisikan kode untuk element input. Pada komponen tersebut memiliki beberapa props seperti label, type, dan placeholder data dari props tersebut akan dikirimkan dari parent component.
Karena sebelumnya kita telah membuat sebuah komponen untuk element input maka kita tinggal memanggil komponen input tersebut ke dalam parent component dan memberikan properti pada child component input. Bisa dilihat kode menjadi lebih singkat dan lebih rapi karena kita telah menerapkan prinsip reusable component.
Kesimpulan
Mungkin pada kasus sederhana ini tidak memberikan efek yang signifikan dalam menggunakan reusable component, namun jika kamu membuat sebuah projek yang lebih kompleks lagi penggunaan reusable component ini sangat membantu kamu dalam mengembangkan projek tersebut. Untuk lebih memahami penggunaan reusable component kamu bisa mempelajari penggunaan props pada React dan kamu juga perlu mengetahui alur belajar React atau kamu bisa mempelajari fundamental dari React
.png)
