ReactJS - Refs dan DOM

Hai, 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 mengeksplorasi dunia Refs dan DOM!

Apa itu Refs?

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

Mengapa kita butuh Refs?

Anda mungkin bertanya-tanya, "Mengapa kita tidak bisa hanya menggunakan JavaScript biasa untuk memilih elemen?" Well, dalam React, kita mencoba untuk menghindari manipulasi DOM secara langsung karena React memiliki cara yang efisien untuk memperbarui UI. Namun, ada saat-saat saat kita perlu 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().

Signature dari metode createRef

Tanda tangan createRef() cukup sederhana:

React.createRef()

Itu saja! Tidak ada parameter, tidak ada komplikasi. Itu mengembalikan objek biasa dengan properti tunggal: 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 menugaskan nya ke this.myRef. Kemudian di metode render, kita melekatkan Ref ini ke elemen div menggunakan atribut ref.

Menerapkan ref

Sekarang kita telah membuat Ref kita, mari lihat bagaimana kita bisa menggunakannya. Ada beberapa cara untuk menerapkan 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 pada input. Properti current Ref memberikan akses ke node DOM aktual.

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, tetapi 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 aktual.

Kasus penggunaan createRef

Sekarang kita tahu bagaimana membuat dan menerapkan 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 programatis 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 dengan bijak. 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 bijak, dan aplikasi React Anda akan berterima kasih!

Berikut adalah tabel rujukan cepat metode yang kita diskusikan:

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

Semoga coding Anda senantiasa menyenangkan, dan may your Refs always be current!

Credits: Image by storyset