Flutter의 코드 리팩토링 방법과 최적화 전략

Flutter의 코드 리팩토링 방법과 최적화 전략

Flutter 앱을 개발하다 보면 코드가 점점 복잡해지고 유지보수가 어려워질 수 있습니다. 이럴 때 코드 리팩토링(Refactoring)을 통해 코드의 가독성을 높이고, 성능을 개선하며, 유지보수를 용이하게 만들 수 있습니다.

이 글에서는 Flutter에서 코드 리팩토링을 수행하는 방법과 효율적인 코드 구조를 유지하는 전략을 소개하겠습니다.

---

1. 코드 리팩토링이란?

코드 리팩토링(Refactoring)이란 기능은 유지하면서 코드를 더 효율적이고 가독성이 좋게 변경하는 과정을 의미합니다.

리팩토링을 하면 다음과 같은 이점이 있습니다.

• 가독성 향상: 코드의 구조를 명확하게 하여 이해하기 쉽게 만듦
• 유지보수 용이: 코드 수정이 용이해지고, 버그 발생 가능성을 줄임
• 성능 최적화: 불필요한 코드 제거 및 성능 개선
• 재사용성 증가: 모듈화된 코드로 여러 곳에서 재사용 가능

---

2. Flutter 코드 리팩토링 기본 원칙

Flutter에서 코드 리팩토링을 수행할 때 고려해야 할 기본 원칙은 다음과 같습니다.

• 위젯 구조 최적화: 중복되는 UI 코드를 분리하여 재사용 가능하도록 구조화
• 상태 관리 개선: 적절한 상태 관리 방법을 선택하여 코드의 일관성 유지
• 불필요한 코드 제거: 사용하지 않는 변수, 함수, 패키지 제거
• 가독성 향상: 명확한 변수 및 함수명 사용, 주석 추가

이제 각각의 리팩토링 기법을 실습해 보겠습니다.

---

3. 위젯 구조 최적화

(1) 중복되는 코드 분리

Flutter에서는 위젯을 최대한 작은 단위로 분리하여 재사용성을 높이는 것이 중요합니다.

예를 들어, 다음과 같이 중복되는 UI 코드가 있다고 가정해 보겠습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text('Click Me'),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('Click Me'),
          ),
        ],
      ),
    );
  }
}

이 코드를 리팩토링하여 재사용 가능한 위젯으로 만들 수 있습니다.

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({required this.label, required this.onPressed, super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Column(
        children: [
          CustomButton(label: 'Click Me', onPressed: () {}),
          CustomButton(label: 'Click Me', onPressed: () {}),
        ],
      ),
    );
  }
}

변경점:

• 버튼을 별도의 CustomButton 위젯으로 분리
• 매개변수를 활용하여 버튼의 텍스트와 클릭 이벤트를 변경 가능
• 코드 중복 제거 및 가독성 향상

---

4. 상태 관리 개선

Flutter에서 상태를 관리하는 방식이 적절하지 않으면 코드가 복잡해질 수 있습니다. 적절한 상태 관리 기법을 활용하면 코드가 더 깔끔해지고 유지보수가 쉬워집니다.

(1) setState를 사용한 리팩토링

아래 코드는 상태 관리를 올바르게 적용하지 않은 예제입니다.

class CounterPage extends StatelessWidget {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $counter'),
            ElevatedButton(
              onPressed: () {
                counter++; // UI가 갱신되지 않음
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 setState를 사용하지 않아서 UI가 업데이트되지 않습니다. 이를 StatefulWidget으로 변경하면 상태가 올바르게 관리됩니다.

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State {
  int counter = 0;

  void _increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $counter'),
            ElevatedButton(
              onPressed: _increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

변경점:

• StatelessWidget → StatefulWidget 변경
• setState를 사용하여 UI 업데이트
• 상태 관리가 올바르게 동작하도록 수정

---

5. 불필요한 코드 제거 및 최적화

불필요한 코드를 제거하면 앱의 성능을 향상시키고 유지보수를 쉽게 할 수 있습니다.

(1) 사용하지 않는 import 정리

flutter pub run dart fix --apply

(2) 중복된 코드 제거

동일한 위젯이 여러 곳에서 사용된다면, 별도의 컴포넌트로 분리하여 재사용성을 높일 수 있습니다.

---

결론

Flutter에서 코드 리팩토링을 수행하면 코드가 깔끔해지고 유지보수가 쉬워집니다.

• 위젯 구조 최적화: 중복 코드 제거 및 컴포넌트화
• 상태 관리 개선: setState, Provider, Riverpod 등 활용
• 불필요한 코드 제거: 사용하지 않는 import 및 중복 코드 삭제

이제 코드 리팩토링을 적용하여 더욱 효율적인 Flutter 앱을 개발해 보세요!