[flutter] 플러터에서의 훅(Hook) 개념

21 Dec 2023

flutter

플러터에서 훅은 상태와 생명주기를 다루기 쉽게 해주는 기능입니다. 리액트 네이티브의 훅처럼 플러터 훅은 함수 컴포넌트의 상태 로직을 추상화하고 재사용 가능한 로직으로 만드는 데 도움을 줍니다. 플러터에서 훅을 사용하면 클래스 기반의 위젯이 아닌 함수형 위젯으로도 상태를 관리하고 생명주기 이벤트를 처리할 수 있습니다.

훅의 사용 방법

플러터에서 훅을 사용하기 위해서는 먼저 flutter_hooks 패키지를 프로젝트에 추가해야 합니다. 이 패키지를 사용하면 useEffect, useMemo, useReducer 등과 같은 다양한 훅을 활용할 수 있습니다.

예를 들어, 아래는 플러터 훅을 사용한 간단한 상태 관리 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState(0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Hook Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${count.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위 예제에서 useState 훅을 사용하여 count 상태를 정의하고, 해당 상태를 업데이트하기 위해 floatingActionButton의 onPressed 핸들러에서 count.value++을 호출했습니다.

훅의 장점

간결한 코드: 훅을 사용하면 클래스형 위젯의 상태 관리 및 생명주기 이벤트 처리를 함수형으로 간결하게 표현할 수 있습니다.
재사용성: 훅을 사용하여 로직을 추상화하고, 재사용 가능한 훅을 만들어 여러 곳에서 동일한 로직을 활용할 수 있습니다.

훅은 플러터에서 강력한 상태 관리와 생명주기 관리를 위한 도구로써 많은 프로그래머들에게 새로운 개발 방식을 제시하고 있습니다.

결론

플러터에서 훅은 함수형 위젯의 상태 관리와 생명주기 처리를 간편하고 효율적으로 해주는 기능으로, 플러터 프로그래밍을 더욱 효율적으로 만들어줍니다.

더 많은 훅과 그 활용 방법은 flutter_hooks 공식 문서에서 확인할 수 있습니다.