DEV Community

Cover image for Manipulasi DOM Di Reactjs
satriaherman
satriaherman

Posted on

Manipulasi DOM Di Reactjs

Halo semua, apa kabar nih?. Semoga kabarnya baik-baik saja. Kali ini gw akan membahas tentang "gimana caranya manipulasi DOM di Reactjs?".

Pendahuluan

Sebelumnya gw mau kasih tau kalo React menggunakan Virtual DOM dalam memanipulasi element HTML nya. Nah sih virtual DOM itu?. Virtual DOM adalah sebuah copy dari DOM yang memiliki property yang sama seperti DOM aslinya. Singkatnya gini jika kita membuat sebuah component dengan nama "Button" di React, maka React akan merender Component Button tersebut kedalam element HTML dan juga membuat Copy dari Element Button itu. nah copy dari element Button ini lah yang disebut "Virtual DOM". Nah pasti ada yang nanya?.

"Bang kenapa harus buat copy element itu dulu?, kan udah ada element yang di render?

Nah ini adalah cara react untuk meminimalisir interaksi antar DOM yang tidak perlu. Misal jika kita punya 10 element list. dan kita ingin mengupdate list yang ketiga saja. Maka browser akan mengupdate semua list yang ada. ini akan berdampak pada performa website kita, karena kita mengupdate DOM yang sebenarnya tidak diperlukan. Untuk inilah Virtual DOM hadir sebagai penyelesaian dari masalah ini. Dengan Virtual DOM kita akan meminimalisir terjadinya interaksi antar DOM yang tidak perlu. Virtual DOM akan mengecek perubahan yang ada lalu melakukan update pada DOM yang berubah saja. Sehingga component lain yang tidak dirubah tidak akan diupdate dan dirender ulang.

Image description

ilustrasi Virtual DOM

Memanipulasi Virtual DOM

Nah untuk memanipulasi Virtual DOM di Reactjs kita bisa memakai 2 cara yaitu :

  • Menggunakan State
  • Menggunakan Ref

kedua cara diatas akan kita praktekkan dalam kesempatan kali ini

1 Menggunakan State

Untuk manipulasi Virtual DOM menggunakan state ini hanya bisa memanipulasi properti sederhana seperti mengganti class dan id.

contoh :

  • di app.js kita inisialisasikan dulu state nya
const [background, setBackground] = useState('red') 
Enter fullscreen mode Exit fullscreen mode
  • lalu kita buat component button yang akan mentrigger perubahan state nya
return (
    <div className="App">
      <button className={background} onClick={changeBackground}>
        change Background
      </button>
    </div>
  ) 
Enter fullscreen mode Exit fullscreen mode
  • setelah itu kita buat function changeBackground untuk menghandle button ketika di klik
const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
    }
    else{
      setBackground('red')
    }
  }
Enter fullscreen mode Exit fullscreen mode
  • lalu di app.css kita buat style untuk class nya
red{
  background: red;
}

.blue{
  background: rgb(99, 99, 255);
} 

Enter fullscreen mode Exit fullscreen mode

hasilnya akan seperti dibawah

Image description

1 Menggunakan Ref

Cara yang kedua adalah menggunakan ref atau singkatan dari reference. ref ini adalah sebuah referensi yang mengarah ke element HTML pada react.

Jika kita ingin memanipulasi element Virtual DOM maka kita tidak langsung memanipulasi elementnya, tapi yang kita manipulasi adalah ref dari element tersebut. Oke langsung saja kita praktekkan

  • definisikan sebuah ref menggunakan useRef jika menggunakan class component pakai createRef
const buttonRef = useRef();
Enter fullscreen mode Exit fullscreen mode

lalu letakkan buttonRef diatas ke element yang ingin kita beri referensi

 <button className={background} ref={buttonRef} onClick={changeBackground}>
        change Background
</button>
Enter fullscreen mode Exit fullscreen mode

(masih menggunakan kodingan yang tadi ya). nah setelah itu di function changeBackground() kita coba memodifikasi element buttonnya menggunakan ref. sebagai contoh saya akan mengubah textContent dari button ketika di click. jadi saya tuliskan seperti ini

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
      buttonRef.current.textContent = 'Berubah biru'
    }
    else{
      setBackground('red')
      buttonRef.current.textContent = 'Berubah Merah'
    }
  }
Enter fullscreen mode Exit fullscreen mode

nah hasilnya jika kita mengklik button maka background dan tulisan dalam button akan berubah

Image description

Sekian dulu Tutorial dari saya. Jika ada salah kata mohon dimaafkan. Jika ada pertanyaan silahkan hubungi
Whatsapp Instagram

Wassalamu'alaikum Warahmatullahi Wabarakatuh

Discussion (0)