ReactJS - Refs dan DOM

Hai, para pengembang React masa depan! Hari ini, kita akan mendalamkan sebuah topik yang menarik yang akan membantu Anda berinteraksi secara langsung dengan elemen DOM dalam aplikasi React Anda. Siapkan diri Anda, karena kita akan menelusuri dunia Refs dan DOM!

Apa itu Refs?

Sebelum kita masuk ke hal yang mendalam, mari kita pahami apa itu Refs. Dalam React, "Ref" adalah singkatan dari "reference". Itu seperti memberikan tag nama pada elemen tertentusehingga Anda dapat menemukannya nanti dengan mudah. Bayangkan Anda di sebuah pesta besar, dan Anda ingin mencatat teman terbaik Anda. Anda mungkin memberikan mereka topi khusus atau tag nama unik. Itu sebenarnya apa yang dilakukan Ref di React - itu membantu Anda mencatat elemen tertentu.

Mengapa kita memerlukan Refs?

Anda mungkin berpikir, " Mengapa kita tidak bisa hanya menggunakan JavaScript biasa untuk memilih elemen?" Well, dalam React, kita mencoba untuk menghindari manipulasi DOM secara langsung (Document Object Model) karena React memiliki cara yang efisien untuk memperbarui UI. Namun, ada saat-saat saat kita perlu melangkah keluar dari paradigma deklaratif React dan bekerja secara langsung dengan elemen DOM. Itu adalah saat Refs berguna!

Membuat Refs dengan createRef()

Ayo mulai dengan melihat bagaimana kita membuat Ref di React. Kita menggunakan metode yang disebut createRef().

Tanda tangan metode createRef

Tanda tangan createRef() cukup sederhana:

React.createRef()

Itu saja! Tidak ada parameter, tidak ada kesulitan. Itu mengembalikan objek biasa dengan satu properti: current. Awalnya, properti current ini diatur ke null.

mari lihat contoh:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}

render() {
return <div ref={this.myRef} />;
}
}

Dalam contoh ini, kita membuat Ref di constructor dan mengassignnya ke this.myRef. Kemudian di metode render, kita melekatkan Ref ini ke elemen div menggunakan atribut ref.

Mengaplikasikan ref

Sekarang kita telah membuat Ref, mari lihat bagaimana kita dapat menggunakannya. Ada beberapa cara untuk mengaplikasikan Ref:

1. Refs pada Elemen DOM

Penggunaan paling umum adalah untuk menerapkan Ref ke elemen DOM:

class AutoFocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

componentDidMount() {
this.inputRef.current.focus();
}

render() {
return <input ref={this.inputRef} />;
}
}

Dalam contoh ini, kita membuat Ref untuk elemen input. Setelah komponen terpasang, kita menggunakan Ref untuk secara otomatis fokuskan input. Properti current Ref memberikan kita akses ke node DOM yang sebenarnya.

2. Refs pada Komponen Kelas

Anda juga dapat menggunakan Refs dengan komponen kelas:

class AutoScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}

componentDidUpdate() {
const node = this.listRef.current;
node.scrollToItem(0);
}

render() {
return <MyListComponent ref={this.listRef} />;
}
}

Dalam kasus ini, this.listRef.current akan menunjuk ke instance kelas MyListComponent.

3. Refs dan Komponen Fungsional

Komponen fungsional tidak bisa secara langsung diberikan Refs, tapi Anda dapat menggunakan fungsi forwardRef untuk meneruskan Refs:

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.buttonRef = React.createRef();
}

render() {
return <FancyButton ref={this.buttonRef}>Klik saya!</FancyButton>;
}
}

Dalam contoh ini, FancyButton menggunakan forwardRef untuk meneruskan Ref ke elemen tombol yang sebenarnya.

Kasus penggunaan createRef

Sekarang kita tahu bagaimana membuat dan mengaplikasikan Refs, mari lihat beberapa kasus penggunaan umum:

1. Mengelola fokus, pemilihan teks, atau pemutaran media

class TextInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

focusTextInput = () => {
this.inputRef.current.focus();
}

render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.focusTextInput}>Fokuskan input</button>
</div>
);
}
}

Komponen ini memungkinkan kita untuk secara imperatif fokuskan input saat tombol diklik.

2. Mengaktifkan animasi imperatif

class Animator extends React.Component {
constructor(props) {
super(props);
this.elementRef = React.createRef();
}

animate = () => {
this.elementRef.current.classList.add('animated');
}

render() {
return (
<div>
<div ref={this.elementRef}>Animasikan saya!</div>
<button onClick={this.animate}>Mulai Animasi</button>
</div>
);
}
}

Di sini, kita menggunakan Ref untuk menambahkan kelas CSS ke elemen, memicu animasi.

3. Integrasi dengan pustaka DOM pihak ketiga

class MapComponent extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}

componentDidMount() {
const mapLibrary = new FancyMapLibrary();
mapLibrary.createMap(this.mapRef.current);
}

render() {
return <div ref={this.mapRef} style={{width: '100%', height: '400px'}} />;
}
}

Dalam contoh ini, kita menggunakan Ref untuk memberikan pustaka peta pihak ketiga akses ke node DOM tempat ia dapat merender peta.

Kesimpulan

Refs adalah alat yang kuat di React yang memungkinkan kita untuk keluar dari paradigma deklaratif saat diperlukan. Mereka menyediakan cara untuk mengakses node DOM atau elemen React secara langsung. Namun, penting untuk menggunakan Refs secara bijaksana. Dalam kebanyakan kasus, Anda dapat mencapai apa yang Anda butuhkan melalui API deklaratif React. Tetapi saat Anda memerlukan kontrol ekstra, Refs ada untuk membantu!

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan Refs bijaksana, dan aplikasi React Anda akan berterima kasih!

Berikut adalah tabel rujukan cepat dari metode yang kita diskusikan:

Metode	Deskripsi	Contoh
React.createRef()	Membuat objek ref	this.myRef = React.createRef();
ref attribute	Melekatkan ref ke elemen React	<div ref={this.myRef} />
forwardRef	Memungkinkan komponen fungsional menerima refs	const FancyButton = React.forwardRef((props, ref) => ...)

Selamat coding, dan semoga Refs Anda selalu terkini!

Credits: Image by storyset