플러터에서의 코드 리팩토링: 초보자를 위한 기준점과 방법

 

리팩토링은 코드를 개선하고 유지보수성을 높이며, 버그를 줄이는 과정입니다.

플러터에서의 리팩토링 기준점과 방법을 초보자도 이해하기 쉽도록 설명해드리겠습니다.

플러터 리팩토링 기준점

1. 가독성과 유지보수성
   •   코드가 읽기 쉽고 이해하기 쉬워야 합니다.
   •   긴 메서드나 복잡한 조건문을 줄이고, 함수와 클래스의 역할을 명확히 해야 합니다.
2. 성능
   •   불필요한 연산을 줄이고, 메모리 사용을 최적화해야 합니다.
   •   비동기 처리에서 불필요한 await를 제거하거나, 성능에 영향을 주는 부분을 개선합니다.
3. 재사용성
   •   중복 코드를 제거하고, 기능을 모듈화하여 여러 곳에서 재사용할 수 있도록 해야 합니다.
   •   Widget을 효율적으로 구성하여 재사용 가능한 UI 요소를 만들어야 합니다.
4. 에러 처리와 예외 처리
   •   예외 상황을 처리하는 방법을 개선하여 애플리케이션이 안정적으로 실행될 수 있도록 합니다.

플러터 리팩토링 방법

1. 클래스와 메서드 분리
   •   하나의 클래스나 메서드가 너무 많은 기능을 담당하면 코드가 복잡해집니다.
       기능별로 분리하여 각각의 역할을 명확히 할 수 있도록 합니다.
2. 변수와 함수명의 명확성
   •   변수와 함수의 이름을 명확하게 지어 가독성을 높입니다.
       예를 들어, data보다는 userData와 같이 변수의 의미를 명확히 전달할 수 있는 이름을 사용하는 것이 좋습니다.
3. StatelessWidget과 StatefulWidget 분리
   •   상태 관리가 필요하지 않은 경우에는 StatelessWidget을 사용하고, 상태를 관리해야 하는 경우에는 StatefulWidget을
       사용하여 코드의 명확성을 유지합니다.
4. Widget 분리와 재사용
   •   비슷한 UI 요소가 여러 곳에서 사용된다면 해당 Widget을 분리하여 재사용합니다.
       예를 들어, 버튼이나 폼 필드와 같은 UI 요소는 별도의 Widget으로 만들어 중복을 줄입니다.
5. 코드 포맷팅과 주석 추가
   •   플러터에서는 코드 포맷팅 도구를 통해 일관된 코드 스타일을 유지하는 것이 중요합니다.
       주석을 추가하여 코드의 의도와 기능을 설명합니다.
6. 테스트 추가
   •   테스트 코드를 추가하여 기능이 예상대로 동작하는지 검증하고, 리팩토링 과정에서 새로운 버그가 발생하지 않도록 합니다.
7. 비동기 처리 개선
   •   Future와 Stream을 효율적으로 사용하고, 불필요한 await를 줄여서 애플리케이션의 성능을 개선합니다.

예시: 코드 리팩토링

아래는 간단한 예시로, 플러터 앱에서의 코드 리팩토링을 보여줍니다.

// Before refactoring
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String greeting = '';

  @override
  void initState() {
    super.initState();
    fetchGreeting();
  }

  void fetchGreeting() async {
    var response = await http.get('https://api.example.com/greeting');
    setState(() {
      greeting = response.body;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text(greeting),
      ),
    );
  }
}

 

// After refactoring
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String greeting = '';

  @override
  void initState() {
    super.initState();
    fetchGreeting();
  }

  void fetchGreeting() async {
    try {
      var response = await http.get('https://api.example.com/greeting');
      if (response.statusCode == 200) {
        updateGreeting(response.body);
      } else {
        throw Exception('Failed to load greeting');
      }
    } catch (e) {
      print('Error fetching greeting: $e');
    }
  }

  void updateGreeting(String newGreeting) {
    setState(() {
      greeting = newGreeting;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text(greeting),
      ),
    );
  }
}

 

위 예제에서는 fetchGreeting 메서드를 분리하고, HTTP 요청 결과를 처리하는 방법을 개선했습니다.

이러한 방법으로 코드를 리팩토링하면 애플리케이션의 유지보수성과 성능을 향상시킬 수 있습니다.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

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

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