React Compound Components: Panduan Lengkap

Ketika kita berbicara tentang pengembangan aplikasi web dengan React, salah satu hal yang sering membuat kita kagum (dan kadang frustrasi) adalah fleksibilitasnya. Nah, salah satu pola desain yang sering digunakan untuk membuat komponen yang powerful namun tetap mudah digunakan adalah Compound Components. Jadi, mari kita bedah apa itu compound components, mengapa mereka berguna, dan bagaimana kita bisa menggunakannya di proyek TypeScript kita.

Apa Itu Compound Components?

Bayangkan kita punya sebuah komponen kompleks, seperti dropdown atau modal. Terkadang, kita ingin memberikan pengembang yang menggunakan komponen tersebut fleksibilitas lebih besar dalam mengontrol bagian-bagian internalnya. Di sinilah compound components masuk.

Compound components adalah cara untuk menggabungkan beberapa komponen kecil menjadi satu kesatuan yang bekerja bersama. Kita memberikan kontrol kepada pengguna komponen untuk memutuskan bagaimana komponen-komponen kecil tersebut dirangkai. Misalnya, komponen Dropdown yang terdiri dari Dropdown.Toggle dan Dropdown.Menu.

Analogi Sederhana

Bayangkan kita sedang membuat sandwich. Kita punya roti, selada, daging, keju, dan saus. Compound components adalah seperti memberikan penggunanya kebebasan untuk memutuskan urutan bahan-bahan tersebut. Roti bisa di bawah, keju bisa di atas, atau malah daging di tengah. Yang penting, kita masih membuat sandwich yang enak!

Mengapa Menggunakan Compound Components?

Compound components memiliki beberapa keuntungan utama:

1. Fleksibilitas Komponen ini memungkinkan kita memberikan kebebasan kepada pengguna untuk merangkai bagian-bagian kecil sesuai kebutuhan mereka.
2. Keterbacaan Kode Ketika digunakan dengan benar, compound components membuat kode lebih deklaratif dan mudah dibaca. Struktur komponen biasanya mencerminkan struktur DOM yang akan dihasilkan.
3. Reusable Bagian-bagian kecil dari compound components dapat digunakan kembali di tempat lain, sehingga meningkatkan efisiensi pengembangan.
4. Bersifat Modular Dengan compound components, kita bisa memisahkan logika dan tampilan menjadi bagian-bagian yang lebih kecil, membuatnya lebih mudah untuk diuji dan dikelola.

Contoh Skenario Nyata

Katakanlah kita sedang membuat komponen tab. Dengan compound components, kita dapat memiliki struktur seperti ini:

<Tabs>
  <Tabs.List>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Konten Tab 1</Tabs.Panel>
    <Tabs.Panel>Konten Tab 2</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Kode ini jauh lebih bersih dan mudah dipahami dibandingkan dengan pendekatan tradisional yang mengharuskan kita menyusun semuanya dalam satu komponen besar.

Membuat Compound Components dengan TypeScript

Oke, sekarang kita akan masuk ke bagian teknis. Mari kita buat contoh nyata dengan komponen Dropdown.

Struktur yang Kita Inginkan

Kita ingin Dropdown memiliki API seperti ini:

<Dropdown>
  <Dropdown.Toggle>Menu</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Item 1</Dropdown.Item>
    <Dropdown.Item>Item 2</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Implementasi Langkah Demi Langkah

Langkah 1: Membuat Komponen Dropdown

Pertama, kita buat file Dropdown.tsx.

import React, { createContext, useContext, useState } from "react";

interface DropdownContextProps {
  isOpen: boolean;
  toggle: () > void;
}

const DropdownContext = createContext<DropdownContextProps | undefined>(undefined);

const Dropdown: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen((prev) => !prev);

  return (
    <DropdownContext.Provider value={{ isOpen, toggle >
      <div className="dropdown">{children}</div>
    </DropdownContext.Provider>
  );
};

export default Dropdown;

Langkah 2: Membuat Dropdown.Toggle

Dropdown.Toggle adalah tombol yang akan membuka atau menutup dropdown.

const Toggle: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const context = useContext(DropdownContext);

  if (!context) {
    throw new Error("Dropdown.Toggle harus digunakan di dalam Dropdown");
  }

  return (
    <button className="dropdown-toggle" onClick={context.toggle}>
      {children}
    </button>
  );
};

Dropdown.Toggle = Toggle;

Langkah 3: Membuat Dropdown.Menu

Dropdown.Menu adalah container untuk item-item dropdown.

const Menu: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const context = useContext(DropdownContext);

  if (!context) {
    throw new Error("Dropdown.Menu harus digunakan di dalam Dropdown");
  }

  return (
    <div className={`dropdown-menu ${context.isOpen ? "open" : ""}`}>
      {children}
    </div>
  );
};

Dropdown.Menu = Menu;

Langkah 4: Membuat Dropdown.Item

Dropdown.Item adalah item di dalam menu dropdown.

const Item: React.FC<{ children: React.ReactNode }> = ({ children }) > {
  return <div className="dropdown-item">{children}</div>
};

Dropdown.Item = Item;

Penggunaan di Aplikasi

Setelah semua bagian selesai, kita bisa menggunakan komponen ini seperti berikut:

import Dropdown from "./Dropdown";

const App = () => {
  return (
    <Dropdown>
      <Dropdown.Toggle>Buka Menu</Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item>Item 1</Dropdown.Item>
        <Dropdown.Item>Item 2</Dropdown.Item>
        <Dropdown.Item>Item 3</Dropdown.Item>
      <Dropdown.Menu>
    </Dropdown>
  );
};

export default App;

Dan voila! Kita punya dropdown yang modular, fleksibel, dan mudah digunakan.

Best Practices dalam Menggunakan Compound Components

Agar compound components kita tetap rapi dan mudah digunakan, ada beberapa best practices yang perlu kita terapkan:

1. Gunakan Context untuk State Sharing

   Saat membangun compound components, menggunakan React Context untuk berbagi state antar komponen internal adalah solusi yang sangat efektif. Pastikan context hanya digunakan di dalam lingkup komponen utama untuk mencegah kebocoran implementasi.

2. Validasi Hierarki Komponen

   Gunakan pengecekan untuk memastikan bahwa bagian-bagian dari compound components digunakan dalam konteks yang benar. Misalnya, jika Dropdown.Toggle digunakan di luar Dropdown, kita bisa memberikan error yang jelas agar pengembang lain tahu bahwa ada kesalahan penggunaan.

   if (!context) {
     throw new Error("Dropdown.Toggle harus digunakan di dalam Dropdown");
   }

3. Berikan API yang Konsisten

   Pastikan API dari compound components Anda konsisten dan mudah dipahami. Misalnya, jika semua bagian komponen menggunakan properti children, pastikan itu berlaku di seluruh komponen.

4. Tambahkan Default Styles

   Berikan gaya default untuk membuat komponen langsung bisa digunakan. Pengguna masih dapat menambahkan gaya kustom sesuai kebutuhan mereka, tetapi gaya bawaan membuat komponen lebih cepat untuk diimplementasikan.

5. Dokumentasikan dengan Jelas

   Karena compound components sering kali melibatkan beberapa bagian yang saling bergantung, dokumentasi yang baik adalah kunci. Jelaskan cara menggunakan setiap bagian komponen dengan contoh yang jelas.

6. Uji Setiap Komponen Secara Terpisah

   Setiap bagian dari compound components harus diuji secara independen. Pastikan setiap komponen kecil berfungsi dengan baik sebelum menggabungkannya menjadi kesatuan.

Kesimpulan

Compound components adalah pola desain yang sangat berguna untuk membuat komponen yang fleksibel dan dapat digunakan kembali di React. Dengan TypeScript, kita juga mendapatkan keuntungan tambahan berupa tipe yang ketat dan autocompletion, membuat pengalaman pengembangan lebih menyenangkan (dan sedikit lebih bebas dari bug).

Jika kita berpikir tentang pengembangan komponen seperti merakit Lego, maka compound components adalah set Lego yang memberikan kebebasan penuh untuk membangun apa pun. Jadi, selamat mencoba, dan jangan lupa menikmati prosesnya! 🚀