Sign in Subscribe
ReactJs

Pisahkan Function Component ke File Terpisah agar Lebih Clean

Pisahkan Function Component ke File Terpisah agar Lebih Clean
Photo by Joan Gamell / Unsplash

Saat membangun aplikasi React, kita sering kali mulai dengan menulis semua komponen dalam satu file. Meskipun ini masih bisa digunakan dalam proyek kecil, semakin besar proyeknya, semakin sulit untuk mengelola kode yang bercampur dalam satu file. Oleh karena itu, memisahkan Function Component ke dalam file terpisah adalah praktik terbaik untuk membuat kode lebih bersih, terstruktur, dan mudah dipelihara.

Artikel ini akan membahas mengapa penting memisahkan komponen ke file terpisah, bagaimana cara melakukannya, serta contoh penerapannya agar proyek React kamu lebih clean dan modular.

1. Kenapa Harus Memisahkan Function Component ke File Terpisah?

✅ Membantu keterbacaan kode – Setiap komponen memiliki file sendiri, sehingga kode lebih mudah dibaca dan dipahami.
✅ Dapat digunakan ulang – Komponen yang dipisah bisa dengan mudah diimpor dan digunakan di berbagai bagian aplikasi.
✅ Lebih mudah dimaintain – Jika ada perubahan pada satu komponen, kita hanya perlu mengedit satu file tanpa mengganggu kode lainnya.
✅ Meningkatkan skalabilitas – Struktur kode yang modular akan mempermudah pengembangan aplikasi berskala besar.

Sebagai contoh, jika kita memiliki satu file App.js dengan banyak komponen seperti ini:

import React from 'react';

function Header() {
  return <h1>Welcome to My App</h1>;
}

function Footer() {
  return <p>&copy; 2024 My App</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah konten utama.</p>
      <Footer />
    </div>
  );
}

export default App;

Kode di atas masih bisa dibaca, tetapi bayangkan jika proyek berkembang dan ada banyak komponen, pasti akan sulit untuk dikelola. Oleh karena itu, kita harus memisahkannya ke dalam file terpisah.

2. Cara Memisahkan Function Component ke File Terpisah

Kita akan memisahkan komponen Header dan Footer ke dalam file masing-masing. Struktur folder setelah pemisahan akan terlihat seperti ini:

my-app/
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   ├── Footer.js
│   ├── App.js
│   ├── index.js

📌 1. Buat Folder components/ untuk Menyimpan Komponen

Di dalam folder src/, buat folder baru bernama components/ untuk menyimpan file komponen yang dipisahkan.

📌 2. Pindahkan Header ke Header.js

Buka file baru src/components/Header.js dan tambahkan kode berikut:

import React from 'react';

function Header() {
  return <h1>Welcome to My App</h1>;
}

export default Header;

Buka file baru src/components/Footer.js dan tambahkan kode berikut:

import React from 'react';

function Footer() {
  return <p>&copy; 2024 My App</p>;
}

export default Footer;

Sekarang kita bisa mengimpor komponen yang telah dipisahkan ke dalam App.js.

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah konten utama.</p>
      <Footer />
    </div>
  );
}

export default App;

Sekarang kode kita jauh lebih rapi dan terstruktur!

3. Manfaat Struktur Modular dalam Proyek React

Dengan menerapkan konsep pemisahan file ini, kita mendapatkan beberapa manfaat:

✅ Pemeliharaan kode lebih mudah – Jika ada perubahan pada Header, kita hanya perlu mengedit file Header.js tanpa menyentuh App.js.
✅ Skalabilitas lebih baik – Jika proyek berkembang, kita bisa dengan mudah menambahkan lebih banyak komponen di dalam folder components/.
✅ Meningkatkan keterbacaan kode – Setiap komponen berdiri sendiri, membuatnya lebih mudah dipahami oleh tim pengembang lain.
✅ Bisa digunakan ulang – Komponen yang telah dipisah bisa dengan mudah digunakan di berbagai bagian aplikasi tanpa harus menulis ulang kode.

4. Kapan Harus Memisahkan Function Component ke File Terpisah?

✅ Pisahkan komponen ke file terpisah jika:

  • Komponen memiliki banyak fungsi dan lebih dari beberapa baris kode.
  • Komponen digunakan ulang di beberapa bagian aplikasi.
  • Proyek mulai berkembang dan membutuhkan struktur yang lebih modular.

❌ Tetap gunakan satu file jika:

  • Komponen hanya digunakan sekali dan sangat kecil.
  • Proyek masih sangat kecil dan tidak perlu banyak modularisasi.
  • Kode hanya untuk prototipe atau latihan singkat.

5. Kesimpulan

  • Memisahkan Function Component ke dalam file terpisah membuat kode lebih rapi, modular, dan mudah dikelola.
  • Struktur proyek yang baik memudahkan pemeliharaan dan pengembangan aplikasi dalam jangka panjang.
  • Menggunakan folder components/ adalah praktik yang disarankan untuk menjaga komponen tetap terorganisir.
  • Mengimpor komponen ke App.js menjadi lebih mudah setelah komponen dipisahkan.

Dengan menerapkan cara ini, proyek React yang kamu bangun akan lebih terstruktur dan siap untuk berkembang lebih besar.

Read next