Manipulasi DOM Di Reactjs
Tags: javascript, react, webdev, programming
Published: 2021-11-11 07:49:49

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn52i7a19arq7ssh9ii3.png)

_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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9elua0k6556w9d4tzgg.png)
 



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibojozambjrkksott9xy.png)
 


Sekian dulu Tutorial dari saya. Jika ada salah kata mohon dimaafkan.  Jika ada pertanyaan silahkan hubungi
[Whatsapp](https://api.whatsapp.com/send?phone=+628976121070) [Instagram](https://instagram.com/_satria_herman?utm_medium=copy_link)

Wassalamu'alaikum Warahmatullahi Wabarakatuh