Skip to main content

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..


Comments

Popular posts from this blog

Belajar Coding Intensive Bootcamp Online 300 ribuan selama Sebulan dapat apa saja?

Sekedar catatan sedikit tentang apa yang saya pelajari saat mengikuti online intensive coding bootcamp kelas project React Native selama sebulan kemarin. Pada umumnya cukup menantang karena setiap hari harus catch up dengan materi yang diberikan dan tugas harian (ya, tugasnya pun setiap hari, jadi peserta mau tidak mau harus coding tiap hari). Selain itu ada quiz tiap akhir pekan atau dalam kasus kelas project tiap akhir pekan harus menyelesaikan Mini Project yang merupakan bagian dari Final Project. Lalu apa saja yang dipelajari selama sebulan tersebut? (dengan biaya Rp 300 K itu? *atau Rp 200K karena saya dapat voucher 100rb). Beberapa hal yang saya pelajari: SplashScreen dan onBoarding  Register (dengan OTP)  Login (dengan JWT ke API Sanbercode, Google Sign In dengan firebase, serta local sign in dengan sidik jari / fingerprint)  Passing data dengan menggunakan route.params melalui navigation, passing data dengan konteks ({useContext}) serta melalui props  Home Page kekinian meman

Cara Mengambil Foto dengan RNCamera dan Upload Foto ke API di React Native

Berikut ini catatan singkat saya saat belajar mengambil dan upload foto ke API menggunakan React Native yang saya pelajari saat mengikuti Indonesia Mengoding Intensive Coding Bootcamp React Native Kelas Project yang diadakan Sanbercode. Sebelumnya, bukan bermaksud iklan, namun pengalaman saya mengikuti batch online intensive coding bootcamp di Sanbercode cukup recommended (khususnya jika kita sudah memiliki sedikit saja dasar pengetahuan programming. Jika belum ada dasar pengalaman pemrograman, Sanbercode juga menawarkan kelas dasar yang bisa diikuti pemula). Jadi ini adalah honest review. Saya sendiri telah mengambil kelas Laravel Web Devt (30 hari), React Native Dasar (30 hari) dan React Native lanjutan atau kelas project (30 hari). Investasi totalnya hanya 700 ribu rupiah (3 bulan intensive online bootcamp!), itu jika tanpa potongan.  Dengan biaya 200 ribu rupiah untuk kelas dasar dan 300 ribu rupiah untuk kelas project, saya rasa jika dibandingkan Coding Bootcamp lain yang harga

Cara atau Solusi Mengatasi java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native

 Pernah mengalami error java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native? Ente nggak sendirian Ndan .. Saya juga pernah mengalami error serupa..   Cara mengatasi / solusi / obatnya ternyata cukup simple. Untuk memastikan bahwa pada saat build APK/AAB tidak terjadi OutofMemory error, kita bisa melakukan setting pada file gradle.     Nah, udah tenang kalau sudah ada build successfull hehe.. Semoga bermanfaat..