Class Component dalam Satu File yang Praktis dan Mudah Dibaca

Dalam React, Class Component adalah salah satu cara untuk membuat komponen yang lebih kompleks dengan dukungan state dan lifecycle methods. Meskipun saat ini Function Component lebih banyak digunakan karena lebih ringan dan mendukung React Hooks, Class Component masih relevan untuk aplikasi React yang membutuhkan pengelolaan state lebih mendalam.

Salah satu tantangan saat menggunakan Class Component adalah struktur kode yang bisa menjadi panjang dan sulit dibaca, terutama jika komponen terdiri dari banyak metode dan state yang kompleks. Oleh karena itu, dalam artikel ini kita akan membahas cara membuat Class Component dalam satu file dengan struktur yang tetap rapi dan mudah dipahami.

1. Apa Itu Class Component?

Class Component adalah komponen berbasis class dalam React yang menggunakan sintaks ES6 class dan harus mewarisi React.Component.

Contoh dasar Class Component:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Dalam contoh ini:

• class Greeting extends Component → Membuat komponen berbasis class.
• render() → Fungsi yang mengembalikan elemen UI.
• this.props.name → Mengakses props yang dikirim dari parent component.

2. Struktur Class Component dalam Satu File

Agar kode lebih rapi dan mudah dibaca, pastikan Class Component memiliki struktur yang jelas. Struktur yang baik terdiri dari:

1. Import Library → Impor React dan dependensi lain yang dibutuhkan.
2. Deklarasi Class Component → Definisikan class dan extends dari Component.
3. State Management → Definisikan state jika diperlukan.
4. Lifecycle Methods → Tambahkan lifecycle seperti componentDidMount() jika dibutuhkan.
5. Event Handlers → Simpan metode event handler dalam satu tempat agar lebih terstruktur.
6. Render Method → Berisi tampilan UI yang akan ditampilkan.
7. Export Component → Pastikan komponen diekspor dengan benar.

3. Contoh Class Component dalam Satu File yang Praktis

Berikut adalah contoh Class Component dalam satu file dengan struktur yang rapi dan mudah dipahami:

import React, { Component } from 'react';

class Counter extends Component {
  // 1️⃣ State untuk menyimpan angka
  state = {
    count: 0,
  };

  // 2️⃣ Handler untuk menambah angka
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // 3️⃣ Lifecycle Method (contoh saja, tidak wajib)
  componentDidMount() {
    console.log('Counter Component Mounted');
  }

  // 4️⃣ Render UI
  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.increment}>Tambah</button>
      </div>
    );
  }
}

export default Counter;

Kenapa struktur ini lebih baik?

• State dideklarasikan di awal, jadi lebih mudah ditemukan.
• Metode event handler terpisah, memudahkan debugging dan pembacaan kode.
• Lifecycle Methods berada di satu tempat, agar lebih terorganisir.
• UI dalam render() tetap bersih dan fokus hanya pada tampilan.

4. Cara Menggunakan Class Component dalam Satu File

Setelah kita membuat Counter.js, kita bisa menggunakannya di komponen lain dengan cara berikut:

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Aplikasi Counter</h1>
      <Counter />
    </div>
  );
}

export default App;

Ketika kita menjalankan aplikasi ini dengan npm start, tombol akan menambah angka setiap kali diklik.

5. Best Practices untuk Class Component yang Mudah Dibaca

✅ Simpan dalam satu file jika ukurannya kecil → Jika Class Component masih sederhana, lebih baik tetap dalam satu file agar mudah ditemukan.
✅ Gunakan komentar pada setiap bagian penting → Ini akan membantu tim developer memahami fungsionalitasnya.
✅ Gunakan arrow function untuk event handler → Agar tidak perlu melakukan this.binding() secara manual.
✅ Jangan taruh terlalu banyak logika dalam render() → Sebaiknya pindahkan logika ke method terpisah agar kode lebih bersih.

❌ Jangan terlalu banyak memasukkan kode dalam satu file → Jika komponen semakin besar dan kompleks, lebih baik dipisah menjadi file terpisah untuk state management dan event handler.

6. Kapan Harus Menggunakan Class Component?

✅ Gunakan Class Component jika:

• Masih bekerja dengan proyek lama yang belum menggunakan Hooks.
• Membutuhkan lifecycle methods seperti componentDidMount() atau shouldComponentUpdate().
• Komponen memiliki state yang kompleks dan sulit dikelola dalam function component.

❌ Gunakan Function Component jika:

• Memulai proyek baru → React Hooks sudah menjadi standar dalam pengembangan modern.
• Komponen hanya menampilkan data statis atau tidak memiliki state.
• Ingin membuat kode yang lebih ringan dan lebih mudah diuji.

7. Kesimpulan

• Class Component tetap relevan untuk proyek yang membutuhkan lifecycle methods dan state yang kompleks.
• Struktur Class Component dalam satu file bisa dibuat lebih rapi dengan cara mengelompokkan state, event handler, dan lifecycle methods dalam urutan yang jelas.
• Gunakan Function Component jika memungkinkan, karena lebih ringan dan lebih sesuai dengan praktik modern React.
• Tetap gunakan Class Component jika proyek lama masih membutuhkannya, tetapi pertimbangkan untuk migrasi ke Hooks jika memungkinkan.

Dengan memahami cara menata Class Component dalam satu file dengan baik, kita bisa membuat kode yang lebih bersih, mudah dipahami, dan lebih efisien!