React Component: Jangan Takut Memecah UI

Ketika membuat aplikasi React, kadang kita bisa membuat satu file component yang isinya terlalu panjang.

Salah satu cara untuk mengatasinya adalah dengan memecah UI menjadi beberapa component kecil.

Contoh

Misalnya kita mempunyai halaman yang memiliki navbar, card, dan footer.

Daripada semuanya ditulis di satu file:

function Home() {
  return (
    <>
      <Navbar />
      <Card />
      <Footer />
    </>
  );
}

Kita bisa membuat masing-masing bagian menjadi component sendiri.

function Card({ title }) {
  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
}

Kemudian component tersebut bisa digunakan kembali di bagian lain.

Kenapa Harus Dipisah?

Selain membuat kode lebih rapi, component yang kecil juga lebih mudah untuk digunakan kembali dan diperbaiki.

Tidak perlu semuanya dibuat menjadi component. Biasanya saya memisahkan bagian yang memang memiliki fungsi sendiri atau kemungkinan akan digunakan kembali.