Design Pattern Khusus Pada React.js
Pada projek aplikasi berbasis website yang kami buat untuk PPL menggunakan teknologi Reactjs. Saat mengerjakan proyek tersebut, saya menemukan beberapa pola (Design Pattern) yang ingin saya bagikan di postingan ini.
1. HOC Pattern (Higher Order Component)
Dalam aplikasi kita, kita sering ingin menggunakan logika yang sama di beberapa komponen. Logika ini dapat mencakup penerapan gaya tertentu ke komponen, memerlukan otorisasi, atau menambahkan state global.
Salah satu cara untuk dapat menggunakan kembali logika yang sama di beberapa komponen, adalah dengan menggunakan pola Higher Order Component. Pola ini memungkinkan kita untuk menggunakan kembali logika komponen di seluruh aplikasi kita.
salah satu kasus pada projek kami yang pernah kami selesaikan menggunakan pattern ini adalah untuk melakukan redirect untuk setiap halaman yang membutuhkan autentikasi.
Solusi dari kami adalah ketika pengguna belum melakukan login kemudian mencoba untuk mengunjungi halaman yang membutuhkan autentikasi maka pengguna tersebut akan otomatis ter-redirect ke halaman login untuk melakukan login. berikut ini contoh komponen HOC withAuth yang kami buat.
kemudian kami membungkus setiap halaman yang membuthkan autentikasi dengan komponen withAuth diatas.
dengan begitu setiap pengguna mengunjungi halaman Paten atau HKI, logic pada file withAuth.tsx akan dieksekusi terlebih dahulu sebelum menampilkan halaman kepada user. Manfat dari design pattern ini adalah kita bisa menggunakan logic yang sama pada withAuth pada semau halaman yang kita ingin lindungi.
2. Provider Pattern
Dalam beberapa kasus, kami ingin menyediakan data untuk banyak (jika tidak semua) komponen dalam aplikasi. Meskipun kita dapat meneruskan data ke komponen menggunakan props, ini bisa sulit dilakukan jika hampir semua komponen dalam aplikasi Anda memerlukan akses ke nilai props.
Kami sering mendengar istilah yang disebut props drilling, yang merupakan kasus ketika kami mengirim data melalui props hingga ke komponen yang paling bawah dalam component tree.
Katakanlah kita memiliki satu komponen Aplikasi yang berisi data tertentu. di akar pada pohon komponen, kami memiliki komponen ListItem, Header dan Teks yang semuanya membutuhkan data ini. Untuk mendapatkan data ini ke komponen ini, kita harus melewatinya melalui beberapa lapisan komponen
Di sinilah Provider Pattern dapat membantu menyederhanakan masalah kita! kita bisa membungkus semua komponen dalam Provider. Provider adalah komponen tingkat tinggi yang dibuat oleh objek Context. Kita bisa membuat objek Context, menggunakan metode createContext yang disediakan React untuk kita. jadi solusi akhir dengan menggunakan Provider pattern seperti berikut.
3. Hooks Pattern
React Hooks adalah fungsi yang dapat digunakan untuk mengelola state komponen dan metode siklus hidup. React Hooks memungkinkan untuk:
- tambahkan state ke komponen fungsional
- mengelola siklus hidup komponen tanpa harus menggunakan metode siklus hidup seperti componentDidMount dan componentWillUnmount
- menggunakan kembali logika stateful yang sama di antara beberapa komponen di seluruh aplikasi
Pertama, mari kita lihat bagaimana kita bisa menambahkan state ke komponen fungsional, menggunakan React Hooks.
Kami memiliki komponen kelas yang disebut Input, yang hanya membuat input field. Nilai input dalam state diperbarui, setiap kali pengguna mengetik apa pun di input field.
Kita sekarang dapat melakukan refactor komponen kelas Input menjadi komponen fungsional stateful.
Nilai input field sama dengan nilai state input saat ini, seperti pada contoh komponen kelas. Saat pengguna mengetik di input field, nilai state input diperbarui sesuai dengan itu, menggunakan metode setInput.
Sekian artikel kali ini, semoga bermanfaat.
Sumber:
