티스토리 뷰

Flutter

[간단 Tip] Barrel, part, part of

순진이 2024. 7. 19. 11:17

1. Barrel

가끔 코드를 쓰다보면, 너무 많은 파일이나 클래스를 import 해야되는 경우가 있다.

그럴 경우, 화면의 상당 부분을 import 부분이 차지하게 되고, 일일이 import 하는 것은 번거롭기도 하다.

 

 

이럴 때 사용할 수 있는 플러터의 기능이 바로 Barrel이다.

 

 

Barrel이란, import 하는 파일이 많을 때 하나의 파일에 모아서 관리하고 그 하나의 파일만 import해서 쓰는 형태를 말한다.

이렇게 하면 하나의 파일만으로 많은 모듈을 다 가져가 쓸 수 있다!

 

 

방법은 간단하다.

하나의 dart 파일을 만든 후, 다양한 import 구문들을 옮긴다.

그리고 import를 export로 바꿔준다!

 

 

아래 같은 경우에는 5개의 Provider 파일을 전부 import 해서 사용해야 하는 곳이 두 곳이 있었다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:udemy_provider_todoapp/pages/todos_pages.dart';
import 'package:udemy_provider_todoapp/providers/active_todo_count.dart';
import 'package:udemy_provider_todoapp/providers/filtered_todos.dart';
import 'package:udemy_provider_todoapp/providers/todo_filter.dart';
import 'package:udemy_provider_todoapp/providers/todo_list.dart';
import 'package:udemy_provider_todoapp/providers/todo_search.dart';

 

이 때, provider.dart 파일을 하나 만들어 아래처럼 export와 경로를 설정해주면 된다.

※ 현재는 provider.dart를 provider들이 모여있는 폴더에 생성해서 경로가 길지 않다.

export 'todo_filter.dart';
export 'todo_search.dart';
export 'todo_list.dart';
export 'active_todo_count.dart';
export 'filtered_todos.dart';

 

 

그리고 필요한 곳에서 해당 파일 하나만 import 해준다!

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:udemy_provider_todoapp/pages/todos_pages.dart';
import 'package:udemy_provider_todoapp/providers/providers.dart';

 

 

이렇게 하면 엄청 import 문이 간단해진다.

코드가 복잡해질 때 굉장히 유용할 것 같다!

 


2. part, part of

 

Effective Dart: Usage

Guidelines for using language features to write maintainable code.

dart.dev

 

part와 part of는 Dart의 기능 중 하나다.

긴 코드를 여러개의 파일로 분산할 수 있기 때문에 이 또한 코드를 분산해서 작성할 수 있는 방법이다.

 

part와 part of로 나뉘게 되는데,

메인 파일에는 'part 부분'을 기재하고,

분할된 파일들은 메인의 부분들이기 때문에 'part of 메인'을 써주면 된다.

 

이렇게 작동된 메인과 분할 파일들은 한 파일이 분할된 것이기 때문에 같은 스코프를 공유하고 있다.

 

 

사용법은 간단하다!

 

1) 메인이 되는 부분에는 library라는 키워드와 함께 library 이름을 적어주고,

2) 내 분할 파일들을 명시해준다.

 

library my_library;

part 'part1.dart';
part 'part2.dart';

 

3) 그리고 메인의 분할 파일들이 메인의 부분이라는 것을 반드시 명시해줘야 한다.

(안 하면 에러가 발생)

//lib/part1.dart
part of 'library.dart';
//lib/part2.dart
part of 'library.dart';

 

 

이렇게 한 후 테스트를 위해 각 part1, part2에 아래와 같은 간단한 클래스를 만들어줬다!

//part1.dart

part of 'library.dart';

class Part1 {
  void part1Function() {
    print('나는 part1');
  }
}
//part2.dart
part of 'library.dart';

class Part2 {
  void part2Function() {
    print('나는 part2');
  }
}

 

 

이렇게 한 후 메인 파일에 가보면?

아래처럼 import를 하지 않아도 접근이 가능하게 된다!

같은 스코프를 공유하기 때문이다!

//library.dart

library my_library;

part 'part1.dart';
part 'part2.dart';

void mainFunction() {
  Part1 firstClass = Part1();
  firstClass.part1Function();

  Part2 secondClass = Part2();
  secondClass.part2Function();
}

 

 

 

그러나 part, part of를 쓸 때는 주의해야 할 점이 있다!

 

1) 메인 파일은 반드시 경로로 표시할 것

분할된 파일에 메인 파일의 위치를 쓸 때는 반드시 경로로 적어줘야 하며, part of my_library처럼 library의 이름으로 기재해서는 안된다! library의 이름을 쓰는 건 레거시 기능이라고 한다! /9모호성을 초래할 수 있기 때문이란다.)

 

part of '../../my_library.dart';

//⛔️ part of my_library;

 

2) 혹시 import할 것들이 있다면 분할 파일이 아닌 메인 파일에 해야 된다!

 

 

분할된 파일에서는 import 문을 사용할 수가 없다

※ 분할 파일에서 import 문을 적었더니, 아래처럼 에러가 발생한다.

 

 

또 특이한 점은 메인 파일에서도 import를 할 때는 library를 명시한 부분 아래에 적어야 한다!

library my_library;

import 'package:flutter/material.dart';
part 'part1.dart';
part 'part2.dart';

void mainFunction() {
  Part1 firstClass = Part1();
  firstClass.part1Function();

  Part2 secondClass = Part2();
  secondClass.part2Function();
}

 

※ library 구문보다 import 문을 위에다 적으면 에러가  발생한다.

 

 

나는 part와 part of를 Provider 강의를 들으면서 배웠는데,

내가 듣는 강의에서는 Provider 클래스를 만들 때, state를 위한 클래스와 그 state를 관리하는 Provider 클래스를 만들어서 사용했는데, 한 파일에 작성하다 보면 너무 길어지곤 했다.

 

그래서 Provider와 State를 part와 part of로 나누어서 작성했다!

 


 

'Flutter' 카테고리의 다른 글

Flutter의 Unit Test (Mockito 패키지)  (0) 2024.07.26
ProxyProvider 간단 사용 예제  (0) 2024.07.16
try-catch 정리해보기  (0) 2024.07.11
addPostFrameCallback를 사용한 error 해결  (0) 2024.07.09
Form 필드로 유효성 체크하기  (1) 2024.07.02
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크