[flutter] 플러터 훅 위젯과 소스 코드 구성 비교

플러터 훅(Hooks)은 최근 플러터에서 도입된 기능으로, 상태 관리와 레이아웃 등과 관련된 작업들을 보다 효율적으로 할 수 있게 해줍니다. 훅 위젯은 글로벌 키나 라이프 사이클과 관련된 데이터를 가져오기, 상태를 유지하기, 또는 렌더링 업데이트를 사용자화하는 등의 일들을 쉽게 수행할 수 있도록 해줍니다.

훅 위젯과 기존 소스 코드 구성의 차이

클래스 기반 위젯과 훅 위젯

클래스 기반(Flutter 기존 버전) 위젯은 StatefulWidget 클래스를 상속하고, 상태 관리를 위한 별도의 메서드를 추가하는 방식으로 동작합니다. 이에 비해, 훅 위젯은 상태와 레이아웃을 더 쉽게 관리할 수 있도록 해줍니다.

상태 관리

훅 위젯은 useState 훅을 이용해 상태를 관리할 수 있습니다. 클래스 기반 위젯에서는 상태를 관리하기 위해 setState 메서드를 이용하지만, 훅 위젯에서는 이를 더 간단하게 처리할 수 있습니다.

// 클래스 기반 위젯
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }
  
  // ...
}
// 훅 위젯
function CounterWidget() {
  final counter = useState(0);
  
  void increment() {
    counter.value++;
  }
  
  // ...
}

소스 코드 구성

훅 위젯을 사용하면 더 간결한 소스 코드를 작성할 수 있습니다. 필요한 상태나 래이아웃을 더 적은 코드로 표현할 수 있으며, 이는 가독성을 높여주고 유지보수를 용이하게 만들어줍니다.

결론

훅 위젯은 플러터 애플리케이션의 개발을 보다 효율적으로 할 수 있도록 해줍니다. 상태 관리와 레이아웃을 보다 쉽게 처리할 수 있으며, 소스 코드의 구성 역시 보다 간결하고 가독성이 높아집니다. 따라서, 훅 위젯을 플러터 개발에 활용하면 보다 효율적인 개발이 가능해집니다.

참고문헌: https://flutter.dev/docs/development/ui/widgets-intro#rewriting-stateful-widget-to-hook-widget