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.

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')

lalu kita buat component button yang akan mentrigger perubahan state nya

return (
    <div className="App">
      <button className={background} onClick={changeBackground}>
        change Background
      </button>
    </div>
  )

setelah itu kita buat function changeBackground untuk menghandle button ketika di klik

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
    }
    else{
      setBackground('red')
    }
  }

lalu di app.css kita buat style untuk class nya

red{
  background: red;
}

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

hasilnya akan seperti dibawah

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();

lalu letakkan buttonRef diatas ke element yang ingin kita beri referensi

<button className={background} ref={buttonRef} onClick={changeBackground}>
        change Background
</button>

(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'
    }
  }

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