플러터에서 코드 분리하기: 깨끗하고 관리하기 쉬운 코드 작성 방법!

 

Flutter로 앱을 만들다 보면 코드가 길어지고 복잡해지는 경우가 많습니다.

특히 UI를 구성하는 코드가 한 파일에 몰려 있으면, 유지 보수하기도 어렵고, 코드의 가독성도 떨어집니다.

이럴 때 코드 분리를 통해 파일과 클래스를 나누어주면 더 깔끔하고 효율적인 앱 개발이 가능합니다.

이번 글에서는 초보자도 쉽게 따라 할 수 있는 Flutter 코드 분리 방법을 알려드릴게요!

코드 분리가 필요한 이유

1. 가독성 향상: 긴 코드보다 작은 코드 블록으로 나누면 읽기 쉬워요.
2. 유지보수 용이: 특정 기능이나 UI 요소만 수정하고 싶을 때, 해당 파일만 수정하면 됩니다.
3. 재사용성 증가: 분리된 위젯이나 함수는 다른 화면에서도 재사용할 수 있어요.

1. 위젯을 별도 파일로 분리하기

Flutter에서는 화면을 구성하는 각 위젯을 독립적인 파일로 분리할 수 있습니다. 예를 들어, 앱에 프로필 카드라는 작은 UI 요소가 여러 곳에 필요하다면, 이를 별도의 파일로 분리해 두면 여러 곳에서 쉽게 재사용할 수 있습니다.

예시: ProfileCard 위젯 분리하기

아래와 같이 ProfileCard라는 간단한 위젯을 별도의 파일로 만들어 보겠습니다.

1. 폴더와 파일 생성
lib/widgets 폴더를 만들고, 그 안에 profile_card.dart 파일을 생성합니다.

 

2. 위젯 코드 작성 profile_card.dart 파일에 아래와 같이 ProfileCard 위젯을 작성합니다.

import 'package:flutter/material.dart';

class ProfileCard extends StatelessWidget {
  final String name;
  final String imageUrl;

  ProfileCard({required this.name, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Image.network(imageUrl),
          Text(name),
        ],
      ),
    );
  }
}

3. 메인 파일에서 사용하기 이제 main.dart에서 이 ProfileCard를 가져와 사용해 봅시다.

import 'package:flutter/material.dart';
import 'widgets/profile_card.dart'; // 분리한 위젯 파일을 가져오기

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Profile Page')),
        body: Center(
          child: ProfileCard(
            name: 'John Doe',
            imageUrl: 'https://example.com/image.jpg',
          ),
        ),
      ),
    );
  }
}

이제 ProfileCard는 재사용 가능한 위젯으로, 여러 화면에서 호출할 수 있습니다. 위젯을 분리하면 코드가 더 짧고 이해하기 쉬워지죠.

2. 기능 코드(로직)를 별도 파일로 분리하기

Flutter 앱에서는 비즈니스 로직이나 데이터 처리가 필요한 경우가 많습니다. 이런 로직을 UI와 분리해주면 코드 관리가 훨씬 수월해집니다. 예를 들어, API 요청을 보내는 함수를 별도의 파일로 분리해보겠습니다.

예시: API 요청 로직 분리하기

1. 폴더와 파일 생성
lib/services 폴더를 만들고, 그 안에 api_service.dart 파일을 생성합니다.

 

2. API 요청 함수 작성

import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiService {
  final String baseUrl = 'https://api.example.com';

  Future<Map<String, dynamic>> fetchData() async {
    final response = await http.get(Uri.parse('$baseUrl/data'));

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }
}

3. UI에서 API 함수 사용하기 main.dart에서 ApiService를 가져와 사용해 봅시다.

import 'package:flutter/material.dart';
import 'services/api_service.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final ApiService apiService = ApiService();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Data Page')),
        body: FutureBuilder(
          future: apiService.fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}');
            }
          },
        ),
      ),
    );
  }
}

이렇게 하면 API 요청 로직이 UI와 분리되어, 다른 UI에서도 ApiService를 호출하여 데이터를 가져올 수 있습니다. 코드가 더 깔끔하고 기능별로 정리되었죠.

 

Flutter에서 코드 분리는 앱을 더 이해하기 쉽게 만들고, 유지보수와 확장성을 높이는 중요한 방법입니다. 위젯은 UI 관련 파일로, 로직은 서비스 파일로 분리하는 것이 좋습니다. 프로젝트 규모가 커질수록 코드 분리는 필수적이며, 프로젝트 관리에 큰 도움이 될 것입니다. Flutter 초보자라면 코드 분리를 시작하여 더 깔끔하고 구조화된 코드를 작성해 보세요!

 

구독!! 공감과 댓글,

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

 

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

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