플러터에서 위젯 함수와 클래스 차이점: 코드 분리 시 어떤 것을 선택해야 할까?

 

Flutter에서 코드를 분리할 때, Widget을 함수 형태로 만들지, 아니면 클래스로 만들어야 할지 고민될 때가 많습니다.

두 가지 방식 모두 Flutter에서 자주 사용되지만, 상황에 따라 더 적합한 방법이 있습니다.

이 글에서는 위젯을 함수로 만드는 경우와 클래스로 만드는 경우의 차이점과, 각각의 장점과 단점을 알아보겠습니다.

이 내용을 통해 코드 분리 시 어떤 방식이 더 적합할지 판단할 수 있을 거예요!

위젯을 함수로 만들기

Flutter에서는 함수로 간단한 UI를 구성할 수 있습니다.

함수 형태의 위젯은 보통 작은 UI 요소를 만들 때 유용하며, 코드가 간결해지고 빠르게 작성할 수 있다는 장점이 있습니다.

Widget profileImage(String imageUrl) {
  return CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),
    radius: 40,
  );
}

이 profileImage 함수는 간단한 프로필 이미지 위젯을 반환합니다. 호출할 때는 다음과 같이 사용할 수 있어요.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      profileImage('https://example.com/image.jpg'),
    ],
  );
}

장점

1. 간결함: 함수형 위젯은 코드가 간단하고 읽기 쉽습니다.
2. 가벼운 UI: 상태 관리가 필요 없는 작은 UI 요소에 적합합니다.
3. 빠른 작성: 코드 양이 적고 유지보수가 쉽습니다.

단점

1. 상태 관리 어려움: 함수로 만든 위젯은 StatefulWidget처럼 상태를 가질 수 없습니다.
2. 재사용성 제한: 복잡한 로직이나 상태가 필요한 경우에는 클래스 형태가 더 유리합니다.

따라서 상태가 필요 없는 간단한 UI에서는 함수 형태의 위젯이 적합합니다.

위젯을 클래스로 만들기

클래스 형태의 위젯은 StatelessWidget이나 StatefulWidget을 상속하여 만듭니다.

특히 복잡한 UI 구성이나 상태가 필요한 위젯은 클래스로 만드는 것이 좋습니다.

class ProfileImage extends StatelessWidget {
  final String imageUrl;

  ProfileImage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: NetworkImage(imageUrl),
      radius: 40,
    );
  }
}

이제 ProfileImage 위젯을 클래스 형태로 생성했습니다. 이 위젯은 다음과 같이 호출할 수 있습니다.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      ProfileImage(imageUrl: 'https://example.com/image.jpg'),
    ],
  );
}

장점

1. 상태 관리 가능: StatefulWidget을 통해 상태 관리가 가능합니다.
2. 높은 재사용성: 다양한 데이터나 상태에 따라 유연하게 사용될 수 있어, 재사용성이 좋습니다.
3. 구조화된 코드: 클래스 형태는 더 복잡한 UI나 로직을 관리하기에 적합하며, 코드를 더 구조적으로 작성할 수 있습니다.

단점

1. 코드 길이 증가: 간단한 UI에도 클래스를 만들면 코드가 길어질 수 있습니다.
2. 복잡성 증가: 짧은 코드에서는 함수형 위젯보다 다소 복잡해질 수 있습니다.

함수와 클래스, 언제 어떤 것을 선택해야 할까?

1. 간단한 UI 요소: 상태 관리가 필요 없고, 단순히 반복적으로 사용하는 작은 UI는 함수 형태로 만드세요.
2. 복잡한 UI와 상태가 필요한 경우: 여러 UI 상태나 동작을 관리해야 한다면 클래스 형태로 만드는 것이 좋습니다. 클래스는 StatefulWidget을 사용하여 상태 관리가 가능하기 때문에, 사용자 인터랙션이나 동적 UI 변화가 필요한 상황에 적합합니다.
3. 재사용성과 확장성: 여러 화면에서 유사한 형태로 재사용할 가능성이 크다면 클래스 형태로 만드는 것이 유지보수에 유리합니다.

Flutter에서 코드 분리를 할 때, 함수형 위젯과 클래스형 위젯 중 어떤 것을 사용할지는 상황에 따라 달라집니다.

단순하고 상태가 필요 없는 UI 요소는 함수로, 복잡하거나 상태 관리가 필요한 경우는 클래스로 만들어 코드의 구조와 효율성을 극대화해 보세요.

Flutter 초보자라면 두 가지 방식을 번갈아 연습하면서 다양한 상황에서 최적의 코드 분리 방식을 익혀보세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱