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

- 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: blue
}