Refactoring di Aplikasi React.js
Ketika sedang melakukan software development, biasanya terdapat batas waktu pengerjaan. Apabila sudah mendekati batas waktu, developer menjadi lebih terburu-buru dan terkadang melupakan kerapian kode. Bagaimana cara merapikan kode tersebut? Solusinya adalah refactoring! Pada artikel ini, saya akan menjelaskan mengenai refactoring di aplikasi React serta implementasinya.
Apa itu Refactoring?
Dikutip dari buku Martin Fowler yang berjudul “Refactoring: Improving the Design of Existing Code”, disebut bahwa terdapat beberapa definisi dari refactoring.
noun: a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior
verb: to restructure software by applying a series of refactorings without changing its observable behavior.
Refactoring adalah teknik untuk menstruktur ulang kode dan mengubah isinya tanpa mengubah fungsionalitas eksternalnya. Melakukan refactoring terhadap kode juga berarti kualitas kode lebih terjamin, dibandingkan dengan apabila tidak melakukan refactoring.
Refactoring tidak wajib untuk dilakukan, karena bisa memakan waktu yang lama dalam tahap software development. Namun jika terdapat waktu, sebaiknya melakukan refactoring kode.
Cara Melakukan Refactoring Kode di React
Setelah mengetahui definisi refactoring, selanjutnya kita akan membahas cara melakukan refactoring di aplikasi React. Terdapat beberapa hal yang bisa dilakukan agar kode React lebih baik lagi, yaitu sebagai berikut.
- Code formatting
Dalam proyek tim, menggunakan style kode yang sama itu tidak mudah. Apabila style kode inkonsisten, kode menjadi susah dibaca. Maka dari itu, bisa menggunakan tool untuk format kode. Salah satu tool untuk format kode di React adalah Prettier. Tool ini bisa ditambahkan ke proyek yang dilakukan dan bisa diubah formattingnya dengan menambahkan file .prettierrc pada repository kode.
- Penamaan yang baik
Setiap variabel dan method harus memiliki nama yang mudah dimengerti dan dipahami, sehingga tidak membingungkan untuk dibaca. Misalnya terdapat method yang berfungsi untuk menyimpan file. Method tersebut dapat dinamakan ‘saveFile’, sesuai dengan fungsionalitasnya dan dapat dipahami.
- Mengikuti prinsip DRY
DRY atau Don’t Repeat Yourself adalah suatu prinsip yang berarti kode yang repetitif perlu dijadikan sebuah component yang reusable. Mengikuti prinsip ini dapat mempercepat waktu pengerjaan dan kode menjadi lebih rapi, selain itu kode akan lebih mudah untuk dibaca.
Sekian penjelasan saya mengenai refactoring serta cara melakukannya di aplikasi React. Terima kasih.
Referensi:
