플러터 리팩토링(refactoring)

리팩토링(refactoring)이란?

기능을 변경하거나 추가하지 않고 코드만 관리하기 쉽게 변경하는 과정을 리팩토링(refactoring)이라고 부릅니다.

 

리팩토링(refactoring)하는 이유

규모가 큰 앱을 만들수록 코드의 복잡도가 올라가므로 주기적인 리팩토링을 통해 복잡도를 낮춰줘야 프로젝트가 손을 떠나지 않는다...

그러니까 main.dart 안에 appBar부터 bottomNavigationBar까지 몇백줄이 넘어가는 코드들은 가독성도 떨어지고 시간이 지나면 지날수록 작업 속도가 떨어지니 제때제때 리팩토링(refactoring)을 하여 정리를 해주란 뜻입니다.

 

리팩토링(refactoring)하는 방법

아래 방법은 <안드로이드 스튜디오>를 통해 진행되었습니다.

 

위 사진처럼 /lib 폴더안에 정리해야할 파일들을 만듭니다.

 

/lib 폴더를 [우클릭 > New > File] 클릭

 

파일명을 정한다. 여기서 중요한점은 뒤에 .dart 로 확장자까지 적어줘야한다는 점.
파일명은 나혼자 보는것이 아닐수도 있기때문에 가독성 좋은, 이해하기 쉬운것으로 정해주는게 좋을 것 같습니다.

 

파일을 만들면 이처럼 아무것도 없는 화면이 나오는데
이때 main.dart 파일로 다시 들어가

 

내가 변경하려고자 하는 위젯을 선택하여 [우클릭 > Refactor > Extract > Flutter Widget] 을 클릭합니다.

 

클릭하게 되면 사용할 위젯이름을 정해주라하는데, 한글 띄어쓰기를 제외한 영문명으로 작성해줍니다.

 

그렇다면 기존에 있던 위젯 아래에 class가 생성되며 Stateless 위젯으로 생성이 됩니다.
이 위젯들을 class BottomBar 부터 StatelessWidget 중괄호 끝까지 드래그 해준후
아까 생성해두었던 bottom_bar.dart 파일로 잘라넣기 해줍니다.

잘라넣기를 해주면 이처럼 군대군대 오류가 발생했다고 올라오는데 이는 코드가 잘못됐다는게 아니라
단순히 import가 되어있지 않아서 그렇습니다.

 

quick fix (option + Enter, Alt + Enter) 를 통해 전부 다 import를 해주게 되면

이렇게 import가 완료되며 리팩토링을 완료하였습니다.

이렇게 200줄에 가까웠던 main.dart 파일이 순식간에 70자 이내로 줄어들었습니다.

 

이렇게 관리하게된다면 협업도 좀 더 손 쉽게 접근 가능할 것이며, 관리도 좀 더 쉽게 될 것 같단 생각이듭니다..