Membangun Stateful Component pada React JS
React dikenal sebagai library (bahkan beberapa menganggap sebagai framework) yang memungkinkan developer mengembangkan aplikasi berdasarkan dari susunan komponen. Setiap komponen yang dibangun, setidaknya memiliki satu atau beberapa state atau props. State dan props merupakan salah satu bagian intim dari flow React. Komponen yang tersusun dari state atau props ini yang membuat React menjadi aplikasi yang Component-based.
Apa itu Component-Based?
Jadi, berdasarkan wikipedia, component-based development (CBD) merupakan bagian dari prinsip desain separation of concerns (SoC) pada software engineering dimana setiap bagian (atau konteks disini adalah komponen) memiliki tanggung jawab fungsi tertentu. Each section has a function. Komponen pada Javascript merupakan function, dan function dapat memiliki parameter masukkan user yang disebut props. Functions atau Components pada React akan mengembalikan elemen UI yang akan ditampilkan di browser.
Untuk mempermudah pemahaman definisi ini pada frontend development, misalnya halaman login suatu aplikasi. Nah, di halaman tersebut setidaknya ada form input yang menerima masukan dari user dan melakukan request "post" ke API. Form input itu terdiri dari kolom input username dan kolom input password, serta tombol loginnya. Masing-masing kolom input memiliki fungsi yang menerima input user dan tombol login memiliki fungsi yang menjalankan aksi request ke database melalui API. Input, tombol, form merupakan komponen yang masing-masing memiliki fungsi tertentu untuk menjalankan fitur login dari suatu aplikasi.
Nah, apa untungnya menyusun component-based ini?
Setidaknya ada beberapa poin penting kelebihan membangun aplikasi secara komponen pada React :
- Developer tidak perlu menulis kode yang sama, artinya komponen yang dibuat dapat digunakan lagi (reuseable).
- UI akan terpisah secara independen pada setiap komponen.
- Data yang ditampilkan secara dinamis bergantung pada nilai state dan _props-_nya.
- Secara prinsip & praktik developer tetap "DRY".
Intinya konsep component-based ini salah satu kelebihan dari React dan akan diimplementasi pada tulisan ini.
State dan props
Sebetulnya cukup banyak tulisan atau blog yang menjelaskan secara detil tentang state & props ini. Bahkan, dokumentasi React Js pun punya bahasan yang lebih dalam tentang ini. State & props sama-sama menyimpan informasi yang akan dikembalikan bersama konten output pada render yang membedakannya hanya cara penyimpanannya. State menyimpan informasi sebagai object, atau sama seperti menyimpan informasi dengan variable pada function atau class javascript. Props menyimpan informasi pada argumen atau parameter function kemudian di-pass ke komponen lainnya.
State dan props pada komponen akan menjadi source of truth pada data flow. Sehingga perubahan atau update yang terjadi pada state maupun props, tidak mengubah keadaan awal state dan props sehingga komponen akan bersifat reaktif.
To the Point
Oke, setelah tahu konsep utama React, tulisan ini akan menjabarkan bagaimana membangun aplikasi yang terdiri dari susunan komponen dan state di dalamnya, atau stateful component. Step by step yang akan di lalui untuk membangun suatu aplikasi React, yaitu:
- Tentukan komponen dari UI
- Buat komponen static dengan props
- Menentukan state
Step by step di atas sedikit menerapkan flow dari thinking in react yang disediakan oleh React sendiri.
Menentukan Component dari UI
Untuk lebih mudah menentukan component dari UI, buat mock-up UI untuk mempermudah memilih komponen yang punya tugas tertentu. Misalnya, ada mock-up seperti ini.
Dari gambar mock-up UI di atas, aplikasi yang akan dibuat akan menerima input dari user berupa data nama & id. Kemudian data tersebut akan ditampilkan dalam tabel. Masing-masing UI dapat ditentukan menjadi komponen sehingga tersusun kumpulan komponen pada UI. Berikut gambaran dari pecahan komponen pada mock-up UI.
Sampai di sini aplikasi web akan tersusun dari komponent Input
, Label
, AddDataForm
, DataListRowTable
, dan DataListTable.
Komponen Input
akan me-render UI kolom input user yang nantinya memiliki props untuk menerima argumen*,* supaya elemen Input nantinya akan memiliki atribut yang sesuai dengan kebutuhan.
Label
akan berisi html tag label yang merupakan label keterangan dari masing-masing elemen input user.
AddDataForm
merupakan komponen yang terdiri dari child component seperti komponen Label
dan Input
. AddDataForm
nantinya akan memproses request dari input user ke API atau backend.
DataListTable
akan berisi output hasil dari form submitting AddDataForm.
DataListTable
merupakan parent component dari DataListRowTable
yang merupakan isi tabel DataListTable
.
Jadi hierarki komponen parent-child pada aplikasi ini kira-kira seperti ini :
AddDataForm
(parent)
--Input
--Label
DataListTable
(parent)
--DataListRowTable
Membuat Static Component dengan props
Oke, selanutnya mock-up UI yang tersedia bisa langsung diterjemahkan menjadi barisan kode. Tahap ini akan lebih banyak untuk menulis kode daripada memikirkan alur data di dalam komponen. Di tahap ini juga state tidak akan digunakan sebab state pada React disediakan untuk menangani data yang interaktif atau data yang akan bereaksi terhadap perubahan data baru. Maka dari itu, props digunakan sebab selain disediakan untuk membangun komponen yang reuseable, juga props dapat passing data dari parent component ke child component.
Ada dua cara untuk membangun aplikasi React, pertama membuat komponen dari hierarki terendah ke tertinggi (bottom-up) dan kedua membuat komponen dari hierarki tertinggi ke yang terendah (top-bottom). Untuk mengerjakan project yang berskala besar, disarankan untuk mengerjakannya secara bottom-up. Sedangkan untuk project skala kecil sebaliknya top-bottom.
Kode di atas komponent Input, Label, DataListRowTable dibuat dengan functional component. Sedangkan komponen AddDataForm dan DataListTable menggunakan class component. Disini alasan dibedakan sebab parent component lebih cocok menggunakan class component sebab nantinya akan memanfaatkan state sebagai data flow. Namun, untuk kasus ini, komponen App digunakan sebagai wrapper atau parent component dari komponen AddDataForm dan DataListTable. Komponen App nanti akan memiliki state sebagai data flow.
Masing-masing komponen disini memiliki props yang akan di-pass ke komponen lainnya saat merender komponen tersebut.
Cara mudah untuk membuat komponen statis adalah dengan me-render data model dan UI tanpa ada interaksi data. Bisa dilakukan dengan memanfaatkan props atau hard code langsung pada komponen JSX. Sampai disini, aplikasi sudah memiliki hierarki komponen dan akan lebih mudah untuk menentukan komponen yang akan memanfaatkan state.
Menentukan State
Setelah semua komponen statis dan props-nya dibuat, kemudian state ditentukan berdasarkan komponen yang mengolah data dinamis. Ada 3 kategori setidaknya untuk menentukan apakah suatu data bisa menjadi state atau tidak :
- State tidak di-passing dari parent melalui props
- State dimodelkan untuk data yang dinamis atau dapat berubah dengan suatu event
- State tidak bergantung pada perhitungan props atau state lainnya.
Pada kasus ini, data dinamis yang akan di-render aplikasi adalah :
- Input dari user -> kolom input 'name' dan 'id'.
- Output dari input user pada table -> tabel pada komponen
DataListRowTable.
Maka dari itu, pada Class App akan memiliki state untuk nilai dari input user dan data yang di-render oleh tabel pada komponen DataListRowTable.
Class App memiliki state name, id, dan data. Initial state dari ketiga state tersebut berupa string kosong (" ").
- State name menyimpan nilai input name
- State id menyimpan nilai id
- State data menyimpan data statis yang ada dan menerima update data setelah nilai input dimasukkan.
Kesimpulan
- React merupakan dapat membantu developer dalam membangun aplikasi component-based.
- React memiliki one-way data flow untuk menjaga seluruh komponen modular dan cepat.
- State dan props pada React digunakan untuk menangani alur data pada React
- Untuk membangun stateful component dengan React dapat dimulai dengan menentukan komponen berdasarkan UI, membangun static component, dan menentukan state.