Komunikasi Data antar Component React





 Ada 2 hal penting dan tidak bisa dipisahkan dalam component react yaitu data & UI. Data di representasikan dalam format javascript object

Cara kerjanya sederhana, ketika data berubah maka UI otomatis berubah. Tapi apakah jika UI di rubah data juga otomatis berubah? Tidak.Berikut Inilah yang di sebut dengan One-Way Data Flow.

One-Way Data Flow vs Two-Way Data Binding

 Cara kerjanya, ketika data berubah maka UI berubah, begitu juga sebaliknya. Framework seperti angular dan ember menggunakan turut mempopulerkan konsep ini.

Tapi ternyata banyak developer merasa performance dari konsep ini kurang baik ketika aplikasi semakin besar, akhirnya facebook memperkenalkan react dengan konsep one-way data flow yang di dasari oleh functional programming.

Berbeda dengan two-way data binding, merubah UI tidak otomatis mengubah data. Aliran datanya akan tetap satu arah itu sebabnya disebut one-way data flow. Cara untuk merubahnya menggunakan teknik callback.

Kedua konsep ini mirip seperti analogi jalan satu arah dan dua arah, keduanya memiliki kelebihan dan kelemahan masing-masing. React memilih one-way data flow untuk alasan performance, scalability, dan single source of truth.

Component Hierarcy

Komunikasi data antar component lebih mudah dipahami dengan hierachy component. Setiap aplikasi react wajib memiliki satu root component. Root component ini nanti nya akan memiliki sub-component.

React Component Hierachy

Dari struktur component diatas ada beberapa kemungkinan komunikasi data :

  • Parent to Child
  • Child to Parent
  • Sibling

Contohnya sebagaiberikut;

Parent to Child — Props

Untuk mengirim data dari parent → child component gunakan props.

  1. Dari contoh aplikasi di atas, Parent Component <App/> mengirim data ke child component <TodoItems todos={data}/> dengan props. Selanjutnya data tersebut bisa dibaca di component TodoItems dengan perintah this.props.todos
  2. Data dalam props bisa berupa object atau function. Pada contoh ini method _actionDelete() di kirim melalui props yang nantinya akan menjadi callback dan dieksekusi di component TodoItems

Child to Parent — Callback & State

Untuk mengirim data dari child → parent, gunakan callback dan state

Disini kasusnya adalah bagaimana mengupdate state parent component dari child component. Solusinya menggunakan callback ke function yang telah di defenisikan sebelumnya di parent component yaitu actionDelete() dan actionFinish(). Dengan kata lain child component melakukan request ke parent component untuk mengubah statenya. Ketika state berubah secara otomatis parent component dan sub componentnya akan di render ulang

Sibling

Untuk komunikasi antar component yang masih 1 level harus menggunakan parent sebagai perantara. Sebagai contoh kasus pada app ini, ketika component <TodoInput/> menerima input maka <TodoItems/> harus mengupdate list nya.

Solusinya hampir sama dengan child to parent. Component <TodoInput/> melakukan callback ke parent component dan selanjutnya parent component menerima input dan merender ulang semua child component termasuk <TodoItems/>

Deep Hierarchy

Ada saatnya ketika component berkomunikasi dengan kedalaman yg jauh, sebagai contoh component parent ke grandchild

Solusi menggunakan component perantara ( intermediary component ) untuk kasus ini memang membutuhkan effort yang lebih banyak dari sisi code, apalagi jika tingkat kedalamannya semakin banyak. Pada saat seperti ini sebaiknya gunakan redux.

Redux tugasnya mengelola data, untuk urusan menampilkan data anda bebas memakai library apa saja.Redux menawarkan solusi global state.Cara kerjanya sangat sederhana state disetiap komponen dipindahkan kedalam global yang disebeut store.

Comments

Post a Comment

Popular posts from this blog

3 Contoh Flowchart Percabangan beserta programnya

Image
    Percabangan sederhana adalah percabangan yang tidak terdapat banyak perintah yang akan dikerjakan, atau kondisi lain yang harus dipenuhi. Biasanya percabangan sederhana hanya memiliki sebuah kondisi. didalam pemrograman kita mengenal percabangan IF ELSE. Berikut ini contoh flowchartnya. Penjelasan: Pada flowchart diatas, kita mulai dari simbol Terminal untuk memulai program percabangan. Kemudian terdapat simbol arue (flow) yang berjalan menuju simbol kondisi ( decission ) dimana terdapat kondisi yang telah ditentukan yaitu; 2 Modulus 2 hasilnya adalah 0. Apabila kondisi tersebut bernilai benar ( true ) maka akan menuju pada simbol output untuk menampilkan kalimat ‘ Bilangan Genap ‘ namun apabila bernilai salah ( false ) maka akn menampilkan output ‘ Bilangan Ganjil ‘ kemudian selanjutnya baik kondisi benar(true) maupun salah (false) akan langsung berakhir. Contoh Program PHP <? php if ( 2 % 2 == 0 ){ echo "Bilangan Genap" ; } else { echo "Bilangan
Read more

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Image
 LOOPING L ooping adalah sebuah urutan perintah yang secara menerus diulang hingga suatu kondisi tercapai.  Pernyataan aliran kontrol yang memungkinkan kode dieksekusi berulang kali berdasarkan kondisi Boolean yang diberikan. Perulangan while dapat dianggap sebagai pernyataan if yang berulang. Jenis-Jenis Looping Terdapat dua jenis  loop yaitu : Entry controlled loop Exit controlled loop entry controlled loop,  sebuah kondisi dieksekusi sebelum sebuah badan dari loop. Hal ini juga disebut sebagai   pre-checking loop Exit Controlled Loops Loops  yang kondisi pengujiannya diuji atau dievaluasi pada akhir badan  loop While Loop   While loop  adalah loop yang paling mudah untuk digunakan.Contoh dari loop ini adalah;while (condition) { statements; } merupakan loop jenis  entry-controlled  dimana  loop  ini dievaluasi atau diperiksa sebelum diproses dari badan dari sebuah loop.  Algoritma  while loop     Dalam  while loop , jika kondisi tidak benar, makan badan dari loop tidak akan dieksekus
Read more

Mengenal KOTLIN

Image
                         Kotlin   adalah bahasa pemrograman open-source yang dikembangkan oleh JetBrains untuk berbagai platform. Tapi,  bahasa pemograman   ini semakin populer digunakan untuk membangun aplikasi Android. Bahasa Kotlin berjalan pada platform Java Virtual Machine (JVM), sebuah platform yang memungkinkan komputer menjalankan kode berbasis  Java , atau kode dari bahasa lain yang dikompilasi (compile) menggunakan Java. Artinya, Kotlin bisa menerapkan mekanisme compile pada Java, yaitu menulis kode lalu menjalankannya di platform yang mendukung (Write Once Run Anywhere). Bahkan, Kotlin juga bisa digunakan bersama dengan Java. Dengan kata lain, Anda bisa menggunakan Kotlin dan Java sekaligus untuk membangun satu aplikasi Android. Contohnya, Anda bisa menggunakan Kotlin untuk membuat satu halaman aplikasi, sementara halaman lainnya ditulis menggunakan Java. Kedua bahasa tersebut tidak akan bentrok satu sama lain karena menghasilkan output file yang sama. Sejarah Perkembangan K
Read more