ReactJS #26: Refaktorisasi dan Struktur Folder yang Rapi

Biar Gampang Dicari

Halo, petugas kebersihan kode! 🧹

Setelah sekian lama menulis kode, proyek React-mu mungkin mulai berantakan. Komponen bertumpuk dalam satu file, folder campur aduk, dan kamu mulai bingung mencari sesuatu. Ibarat kamar yang penuh mainan berserakan, sulit menemukan barang yang kamu cari. Nah, sekarang saatnya kita membereskan kamar alias refaktorisasi dan mengatur struktur folder dengan rapi.

💡 Analogi: Bayangkan kamarmu. Jika semua mainan, buku, dan pakaian diletakkan sembarangan, kamu akan kesulitan mencari kaos kaki. Tapi jika kamu punya lemari khusus baju, rak buku, dan kotak mainan, semuanya mudah ditemukan. Struktur folder yang rapi adalah lemari dan rak untuk kode-kode React-mu.

🔍 Mengapa Refaktorisasi Penting?

Refaktorisasi artinya mengubah kode agar lebih baik tanpa mengubah fungsinya. Manfaatnya:

• Mudah dibaca dan dipahami: Kode yang rapi seperti buku cerita yang jelas.
• Mudah dicari: Kamu tahu di mana meletakkan file baru dan di mana mencari file lama.
• Mudah diperbaiki: Jika ada bug, kamu bisa langsung ke lokasi yang tepat.
• Mudah dikerjakan tim: Orang lain (atau kamu sendiri di masa depan) tidak akan bingung.
• Mudah diuji: Kode yang terpisah lebih gampang diuji.

📁 Struktur Folder yang Direkomendasikan

Ada dua pendekatan populer dalam mengatur folder React: grouping by file type (mengelompokkan berdasarkan jenis file) dan grouping by feature (mengelompokkan berdasarkan fitur). Untuk pemula, kita bisa mulai dengan yang sederhana: memisahkan komponen, halaman, utils, hooks, dan layanan.

Contoh Struktur Folder yang Rapi:

src/ ├── assets/ # Gambar, font, dll ├── components/ # Komponen kecil yang bisa dipakai ulang (Button, Card, Input) │ ├── Button/ │ │ ├── Button.js │ │ └── Button.module.css │ └── Card/ │ ├── Card.js │ └── Card.module.css ├── pages/ # Halaman-halaman utama (Home, About, Profile) │ ├── Home.js │ ├── About.js │ └── Profile.js ├── hooks/ # Custom hooks (useFetch, useInput) │ ├── useFetch.js │ └── useInput.js ├── services/ # Logika API (fetch data, axios) │ └── api.js ├── utils/ # Fungsi pembantu (format tanggal, validasi) │ └── helpers.js ├── context/ # File context (jika pakai useContext) │ └── ThemeContext.js ├── App.js ├── index.js └── index.css

Penjelasan:

• components: tempat komponen kecil yang dipakai di banyak halaman. Setiap komponen punya folder sendiri jika punya file terkait (CSS, test).
• pages: komponen yang mewakili halaman utuh, biasanya digunakan dengan router.
• hooks: custom hooks buatan sendiri.
• services: fungsi-fungsi untuk berkomunikasi dengan API.
• utils: fungsi utilitas umum (seperti format mata uang, validasi email).
• context: tempat mendefinisikan context.

🧩 Refaktorisasi: Memecah Komponen Besar

Salah satu teknik refaktorisasi paling penting adalah memecah komponen besar menjadi komponen-komponen kecil. Contoh: halaman profil yang menampilkan header, info pengguna, dan daftar teman. Jangan tulis semua dalam satu file besar!

Sebelum (berantakan):

function ProfilePage() { const [user, setUser] = useState(null); const [friends, setFriends] = useState([]); useEffect(() => { /* ambil data */ }, []); return ( <div> <header>...</header> <div>... info user ...</div> <div>... daftar teman ...</div> </div> ); }

Sesudah (rapi):

function ProfilePage() { const [user, setUser] = useState(null); const [friends, setFriends] = useState([]); useEffect(() => { /* ambil data */ }, []); return ( <div> <PageHeader title="Profil" /> <UserInfo user={user} /> <FriendList friends={friends} /> </div> ); } // Komponen-komponen kecil function PageHeader({ title }) { ... } function UserInfo({ user }) { ... } function FriendList({ friends }) { ... }

Dengan memisah, setiap komponen jadi lebih fokus dan mudah dipelihara.

📦 Membuat Index File untuk Ekspor Rapi

Bayangkan kamu punya folder components/Button dan components/Card. Alih-alih mengimpor dengan path panjang, kita bisa membuat file index.js di folder components yang mengekspor semua komponen.

Contoh components/index.js:

export { default as Button } from './Button/Button'; export { default as Card } from './Card/Card';

Maka di komponen lain, kita bisa mengimpor seperti ini:

import { Button, Card } from '../components';

Jauh lebih rapi, kan?

🔧 Tips Refaktorisasi Bertahap

• Jangan refaktor sambil menambah fitur baru. Fokus dulu pada satu hal agar tidak kacau.
• Mulai dari yang kecil. Pisahkan satu komponen dulu, pastikan masih berfungsi, lalu lanjutkan.
• Gunakan Git (atau simpan backup). Agar bisa kembali jika ada yang rusak.
• Periksa kembali setelah refaktor. Jalankan aplikasi dan pastikan tidak ada yang error.

📋 Checklist Refaktor Folder

• Buat folder components dan pindahkan komponen kecil ke sana.
• Buat folder pages untuk komponen halaman.
• Pisahkan custom hooks ke folder hooks.
• Pindahkan fungsi API ke services/api.js.
• Buat utils/helpers.js untuk fungsi pembantu.
• Gunakan index.js untuk mengekspor banyak komponen.

🧪 Latihan: Refaktor Aplikasi Todo List

Coba buka kembali aplikasi Todo List yang kita buat di artikel #15 (atau aplikasi lain). Lakukan langkah-langkah berikut:

1. Pisahkan komponen TodoItem ke file terpisah di folder components/TodoItem.
2. Pisahkan komponen TodoInput (form tambah tugas) ke file sendiri.
3. Buat folder hooks dan pindahkan logika localStorage ke custom hook useLocalStorage (lihat artikel #23).
4. Buat file services/todoService.js jika ingin simulasi API.
5. Atur folder sesuai struktur di atas.

Setelah selesai, aplikasi akan tetap berfungsi sama, tapi kode jadi jauh lebih rapi! 🎉

💡 Ingat: Refaktorisasi adalah proses berkelanjutan. Tidak perlu sempurna sekali jadi. Lakukan sedikit demi sedikit, dan nikmati manfaatnya di masa depan.

🚀 Kesimpulan

• Struktur folder yang rapi membuat proyek React mudah dinavigasi dan dipelihara.
• Pisahkan komponen, halaman, hooks, utils, dan services ke folder masing-masing.
• Gunakan file index.js untuk menyederhanakan impor.
• Refaktorisasi dengan memecah komponen besar menjadi kecil-kecil.
• Lakukan bertahap dan selalu uji setelah perubahan.

Di artikel selanjutnya kita akan belajar tentang Optimasi Kinerja dengan React.memo dan useCallback. Sampai jumpa!

Lanjut ke ReactJS #27: Optimasi Kinerja ▶

✨ Dengan kode yang rapi, masa depanmu di dunia coding akan lebih cerah! ✨