Mengenal tentang State dan Props di ReactJS

Mengenal tentang State dan Props di ReactJS – Dalam ReactJS, State dan Props adalah dua konsep penting yang digunakan untuk mengelola dan menyebarkan data di antara komponen-komponen dalam aplikasi web. Meskipun keduanya digunakan untuk memperbarui tampilan komponen, mereka memiliki perbedaan dalam cara penggunaan dan perilaku.

State

State adalah objek JavaScript yang menggambarkan kondisi internal suatu komponen. Setiap komponen React memiliki state sendiri, dan hanya komponen tersebut yang memiliki akses langsung ke state-nya sendiri. State bersifat privat dan tidak dapat diakses atau dimanipulasi oleh komponen lain secara langsung.

• Inisialisasi State: State dapat diinisialisasi dalam konstruktor komponen menggunakan sintaksis this.state = { /* inisialisasi state */ }. Biasanya, state diinisialisasi dengan nilai awal, dan kemudian nilai state dapat diperbarui dengan menggunakan fungsi setState().
• Perbarui State: Untuk memperbarui state, Anda harus menggunakan fungsi setState(). Ini akan memperbarui nilai state dan memicu re-rendering komponen terkait. Fungsi setState() menerima objek yang berisi perubahan yang ingin Anda terapkan pada state.
• Mengakses State: Anda dapat mengakses nilai state menggunakan this.state.namaState di dalam komponen tersebut. Misalnya, jika Anda memiliki state dengan nama counter, Anda dapat mengaksesnya dengan this.state.counter.

Props

Props adalah argumen yang digunakan untuk mengirim data dari komponen induk ke komponen anak. Props bersifat read-only dan tidak dapat diubah oleh komponen yang menerimanya. Mereka dianggap sebagai data yang “dipass” ke komponen dan digunakan untuk mengonfigurasi tampilan atau perilaku komponen tersebut.

• Mengirim Props: Untuk mengirim props ke komponen anak, Anda dapat menyertakan atribut dengan nilai dalam elemen JSX yang mewakili komponen tersebut. Misalnya, jika Anda memiliki komponen ChildComponent yang menerima prop name, Anda dapat mengirimkannya dengan <ChildComponent name="John" />.
• Menerima Props: Komponen anak menerima props sebagai argumen dalam fungsi render. Anda dapat mengakses nilai prop menggunakan this.props.namaProp di dalam komponen tersebut. Misalnya, jika Anda memiliki prop name yang dikirim dari komponen induk, Anda dapat mengaksesnya dengan this.props.name.
• Props sebagai Data Tidak Berubah: Ingatlah bahwa props bersifat read-only dan tidak boleh diubah oleh komponen anak. Mereka harus diperlakukan sebagai data yang tidak berubah (immutable). Jika Anda perlu mengubah data dalam komponen anak, Anda harus menggunakan state di dalam komponen tersebut.

Perbedaan Utama State dan Props

Perbedaan utama antara state dan props adalah bahwa state dikelola secara internal oleh komponen itu sendiri, sedangkan props diteruskan dari komponen induk. State bersifat privat dan hanya dapat diakses oleh komponen itu sendiri, sedangkan props bersifat read-only dan tidak dapat diubah oleh komponen anak.

Dalam praktiknya, state digunakan untuk menyimpan dan memperbarui data internal komponen yang akan mempengaruhi tindakan yang dilakukan oleh pengguna atau perubahan data lainnya, sementara props digunakan untuk mengirim data dari komponen induk ke komponen anak.

Contoh Penggunaan State :

Misalkan Anda memiliki komponen Counter yang bertugas menghitung jumlah klik tombol. Anda ingin menyimpan jumlah klik tersebut sebagai state internal komponen. Berikut adalah contoh penggunaan state dalam komponen Counter:

jsxCopy codeimport React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Pada contoh di atas, count diinisialisasi dengan nilai awal 0 dalam state komponen Counter. Ketika tombol “Increment” diklik, fungsi incrementCount() dipanggil untuk memperbarui nilai count dalam state menggunakan setState(). Perubahan tersebut akan memicu re-rendering komponen sehingga tampilan terbarunya akan muncul dengan jumlah klik yang diperbarui.

Contoh Penggunaan Props :

Misalkan Anda memiliki komponen induk App yang ingin mengirimkan data prop name ke komponen anak WelcomeMessage. Berikut adalah contoh penggunaan props:

jsxCopy codeimport React from 'react';

const WelcomeMessage = (props) => {
  return <h1>Welcome, {props.name}!</h1>;
};

const App = () => {
  return <WelcomeMessage name="John" />;
};

export default App;

Pada contoh di atas, komponen App mengirimkan prop name dengan nilai “John” ke komponen WelcomeMessage. Prop tersebut kemudian diterima oleh komponen anak sebagai argumen dalam fungsi WelcomeMessage. Dalam tampilan komponen WelcomeMessage, kita menggunakan props.name untuk mengakses dan menampilkan nilai prop yang dikirim dari komponen induk.

Semoga penjelasan ini memberikan pemahaman yang lebih jelas tentang State dan Props dalam ReactJS. Selamat Belajar 😀

Baca Juga :

1. Mengenal Sejarah ReactJS

2. Komponen dalam ReactJS