Mengenal Komponen di React JS

IQBAL FARHAN SYUHADA

10 Jun 2024

Komponen adalah fondasi utama dalam pengembangan aplikasi dengan React. Konsep ini memungkinkan pengembang untuk membangun antarmuka pengguna yang modular dan dapat digunakan kembali. Dalam artikel ini, kita akan menjelajahi apa itu komponen di React, jenis-jenis komponen, dan cara menggunakannya untuk membangun aplikasi yang efisien dan mudah dikelola.

Apa Itu Komponen?

Komponen di React adalah blok bangunan yang independen dan dapat digunakan kembali yang menggabungkan logika dan tampilan. Setiap komponen mewakili bagian dari antarmuka pengguna (UI), seperti tombol, formulir, atau seluruh halaman. Dengan menggunakan komponen, pengembang dapat memecah UI yang kompleks menjadi bagian-bagian kecil yang mudah dikelola dan dikembangkan.

Jenis-Jenis Komponen

Secara umum, ada dua jenis komponen di React: Komponen Fungsional (Functional Components) dan Komponen Kelas (Class Components).

1. Komponen Fungsional

Komponen fungsional adalah fungsi JavaScript sederhana yang menerima props sebagai argumen dan mengembalikan elemen React. Komponen ini lebih mudah ditulis dan dipahami, serta lebih efisien secara performa.

Contoh Komponen Fungsional:

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Dalam contoh di atas, Greeting adalah komponen fungsional yang menerima props name dan mengembalikan elemen <h1> yang menampilkan pesan sapaan.

2. Komponen Kelas

Komponen kelas adalah kelas JavaScript yang memperluas React.Component dan memiliki metode render yang mengembalikan elemen React. Komponen ini dapat menggunakan state dan lifecycle methods, yang membuatnya lebih cocok untuk kasus penggunaan yang kompleks.

Contoh Komponen Kelas:

import React, { Component } from 'react';

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

export default Greeting;

Dalam contoh di atas, Greeting adalah komponen kelas yang menggunakan this.props.name untuk mengakses prop name.

Menggunakan Props dan State

Props

Props (singkatan dari "properties") adalah cara untuk meneruskan data dari komponen induk ke komponen anak. Props bersifat read-only, artinya komponen anak tidak dapat mengubah nilai props yang diterimanya.

Contoh Penggunaan Props:

import React from 'react';

const UserCard = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

const App = () => {
  const user = { name: 'John Doe', email: 'john@example.com' };
  return <UserCard user={user} />;
};

export default App;

State

State adalah objek yang dikelola oleh komponen dan dapat berubah seiring waktu. Perubahan state menyebabkan komponen merender ulang dengan state yang baru.

Contoh Penggunaan State:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

Dalam contoh di atas, Counter adalah komponen fungsional yang menggunakan hook useState untuk mengelola state count. Ketika tombol ditekan, fungsi increment dipanggil untuk meningkatkan nilai count.

Mengelola Komponen dengan Lifecycle Methods

Komponen kelas dapat menggunakan lifecycle methods untuk melakukan aksi tertentu pada berbagai tahap siklus hidup komponen, seperti saat komponen pertama kali dirender, diperbarui, atau dihapus.

Contoh Lifecycle Methods:

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

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick() {
    this.setState((state) => ({
      seconds: state.seconds + 1
    }));
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

export default Timer;

Dalam contoh di atas, Timer adalah komponen kelas yang menggunakan componentDidMount untuk memulai timer dan componentWillUnmount untuk membersihkannya saat komponen dihapus.

Kesimpulan

Komponen adalah inti dari pengembangan dengan React. Dengan memahami cara membuat dan menggunakan komponen, serta memanfaatkan props dan state, Anda dapat membangun antarmuka pengguna yang modular, efisien, dan mudah dikelola. Mulailah dengan memecah UI Anda menjadi komponen kecil yang dapat digunakan kembali, dan bangun aplikasi yang dinamis dan responsif dengan React.