DomaiNesia

Ticker

6/recent/ticker-posts

Bagaimana cara passing/oper data antarkomponen dalam React Native

Sebagai seorang pemula (novice) dalam Javascript dan React khususnya React Native, satu hal yang cukup membingungkan bagi saya saat belajar React Native muncul dari bagaimana sih cara passing atau mengoper data dari satu komponen ke komponen lain?

Flow atau aliran data dari satu komponen ke komponen lain ini salah satu hal yang sangat penting di dalam React Native. Pasalnya dengan karakteristik framework (atau developer React menyebutnya library) ini adalah bahwa building blocks-nya / unit pembentuknya adalah komponen, artinya data yang diinput user dan data yang ditampilkan semua diolah melalui suatu komponen.

Jadi pemahaman aliran data dan keterampilan penerapannya di dalam komponen ini jadi penting jika ingin menguasai React Native.

Nah, sebagai pemula yang datang dari dunia Python (masih ada kemiripan dengan Javascript, jadi ini memudahkan saya) dan Flask yang pendekatannya berbasis MVC, belajar menangkap data dan mengalirkannya dari satu komponen ke komponen lain menjadi satu pe er tersendiri.

Saya berkali-kali gagal dan keliru dalam memahami dan menerapkan konsep aliran data antarkomponen ini di dalam React Native, sampai sekarang.

Lalu bagaimana sebenarnya cara passing data antarkomponen dalam React Native?

Sepanjang yang sudah saya pelajari/ketahui, secara garis besar ada tiga cara yang dapat kita pakai untuk mengalirkan data di dalam React Native:

  1. Menggunakan pendekatan aliran data melalui props (property dari suatu komponen)
  2. Menggunakan pendekatan penyediaan data secara global dengan menggunakan konteks (useContext)
  3. Mengalirkan data pada saat berpindah screen/komponen dengan route.params

Mari kita bahas secara singkat.

Aliran data melalui props

Salah satu yang membuat kepala saya mbundhet (kusut) saat belajar aliran data di React Native adalah konsep props. Meskipun function argument bukan sesuatu yang asing di dalam Python dan Flask, namun waktu masuk ke React Native letaknya sedikit berbeda. Mungkin ini yang banyak membuat saya bingung ketika switch dari satu bahasa ke bahasa lain.

Sederhananya, props ini didapatkan sebagai suatu argumen fungsi (dalam Functional Component RN ketika input data) dan dialirkan ke komponen lain melalui penggunaan props di dalam Functional Component tadi yang telah diimport di dalam komponen lain.

Jawaban di StackOverflow ini dan dokumentasi ini sedikit banyak membantu saya memahami bagaimana passing data dengan props.

Aliran data dengan useContext

Nah, aliran data dengan useContext ini sedikit lebih mudah dipahami. Dengan konteks, data yang kita buat akan tersedia secara global melalui React Native konteks.

Dalam konsep ini ada dua pihak yang bertukar data, yaitu Provider dan Consumer. Context Provider adalah penyedia data, sedangkan konsumer adalah yang mengonsumsi data. Kita memanfaatkan data di dalam konteks dengan menggunakan {useContext} yang terdapat di dalam react.

Untuk menerapkannya kita akan membuat dulu konteksnya, misal seperti ini:

createContext dan useContext dalam React Native

Nah, konteks inilah yang nantinya akan digunakan (diimpor) di dalam komponen/screen lainnya sehingga dapat digunakan untuk menyalurkan data dari Provider ke Konsumernya.

Cara passing data dengan Context Provider dan useContext

Baru setelah ini, pada child component kita dapat memanfaatkan data yang sudah disediakan melalui Context Provider.

Cara memanggil data dengan useContext dari Context Provider

Di gambar terakhir ini, saya membuat variable datauser yang dipakai untuk menampung data yang disediakan dari konteks UserContext yang telah dibuat. Setelah itu saya dapat langsung memanfaatkan data yang ada dengan memanggil datanya langsung seperti memanggil data di dalam JavaScript object.

Aliran data dengan menggunakan navigation.navigate()

Cara berikutnya adalah dengan menggunakan route.params untuk mengalirkan data antarkomponen.

Hal ini dilakukan biasanya saat kita klik tombol yang akan membawa kita berpindah halaman.

Saat perpindahan halaman itulah kita perlu "mengangkut" juga data yang dibutuhkan pada halaman selanjutnya yang akan kita tuju.

Contohnya misal seperti ini:

Cara passing data antarkomponen dengan navigation.navigate()

Saat kita klik tombol Riwayat, maka halaman akan diarahkan pada screen/komponen Riwayat, dan bersamaan dengan itu pula data token, id, name, email, photo serta donasi diikutsertakan untuk dikirimkan ke halaman Riwayat sehingga data tersebut bisa dipakai di halaman Riwayat.

Untuk menggunakan navigation, kita dapat menambahkan {navigation} di dalam definisi function component kita, atau menggunakan const navigation = useNavigation(); di dalam block kode kite.

Di dalam komponen Riwayat, saya kemudian memanggil data seperti ini (dengan menggunakan route.params):

Pemanggilan data yang dipassing melalui navigation di dalam komponen child

Jadi, dengan pemanggilan seperti ini, data yang ada sebenarnya sudah terdapat di dalam route, tinggal dipanggil dengan route.params.namadatanya

Karena di atas saya sudah mendefiniskan variable (dengan const, alternatif lain dari var dan let) {token, id, name, email, photo, donasi} sebagai sama dengan route.params, maka saya tinggal gunakan nama datanya saja untuk memanggil data tersebut, misalnya memanggil token saja sudah bisa mendapatkan data tokennya, atau name saja sudah bisa mendapatkan data name nya, tanpa harus lagi menuliskan route.params di depannya.

Ok.. semoga bermanfaat..


Post a Comment

0 Comments