[Flutter] 파일 분리 - ( week 2 )

코드의 양이 많아지게 되면서 점점 가독성이 떨어지게 되는데 Flutter는 일반적으로 큰 위젯들 단위로 파일을 분리해서 관리한다.

 

현재 작업이 진행중인 당근을 클론 한 프로젝트의 코드를 분리해 보도록 한다.

 

home_page.dart

현재 main.dart 파일이 위치한 폴더 내에 home_page.dart 파일을 새로 생성해 준다.

그리고  main.dart에 작성한 HomPage 클래스 전체를 home_page.dart 파일로 옮겨준다.

코드를 옮기게 되면 두 파일 모두 에러가 발생한다.

home_page.dart에서 발생한 에러는 해당 파일에서도 사용되는 라이브러리에 대한 Import가 필요하므로 상단에 패키지를 불러오는 코드를 작성해 주어야 한다.

// home_page.dart

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

main.dart 에서는 현재 메인함수에서 MyApp => HomePage를 호출하고 있기 때문에 새로 이 파일을 불러와주는 코드가 필요하다.

// main.dart

import 'home_page.dart';

 

이렇게 파일을 분리해 주어도 제대로 동작이 되는 것을 확인할 수 있다.

 

feed.dart

당근에서 피드를 보면 동일한 구조에 내용만 다르다는 걸 알 수 있다.

따라서 공통적으로 사용되는 구조를 따로 분리시키고 내용만 채워서 피드를 생성할 수 있도록 만들어야 관리가 편해진다.

 

반복되는 위젯 파일로 분리하기(코드의 재사용 및 관리에 용이)

위젯을 분리하는 방법은 아주 편리한 기능이 제공되기 때문에 어렵지 않다.

추출하고자 하는 위젯을 클릭하고 Refactor를 켜주면 Extract Widget이라는 기능이 있다.

해당 기능을 선택하고 이름을 정의하면 해당 위젯이 코드 최하단에 별도의 클래스로 생성이 된다. 

class Feed extends StatelessWidget {

  const Feed({

    super.key,

  });

 

이 Feed 클래스 전체를 새로 feed.dart 파일을 생성하고 옮겨준다. 옮겨진 feed 파일에서 필요한 패키지를 임포트 해준다.

// feed.dart

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

 

마찬가지로 이 파일을 Import 해서 home_page.dart로 가져오도록 한다.

// home_page.dart

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'feed.dart';

 

이렇게 기능을 변경하거나 추가하지 않고 코드를 관리하기 쉽도록 변경하는 과정을 리팩토링이라고 한다.

이 과정은 앱이 사이즈가 커질수록 복잡도가 올라가기 때문에 주기적으로 리팩토링을 통해서 복잡도를 낮추어야 유지보수하기 수월해진다.