[flutter] 플러터 훅 위젯에서의 상태 관리 가이드라인

21 Dec 2023

flutter

플러터 훅(Hook)은 UI 레벨의 상태와 수명 주기를 관리하기 위한 우수한 방법을 제공합니다. 이 게시물에서는 플러터 훅을 사용하여 상태 관리를 수행하는 방법에 대해 설명하겠습니다.

1. 상태 관리의 중요성

앱의 상태 관리는 UI와 비즈니스 로직을 효율적으로 분리하여 유지보수성을 향상시키는 핵심적인 역할을 합니다. 이를 위해 플러터 훅 위젯을 사용하여 상태를 관리할 때, 몇 가지 가이드라인을 따르는 것이 중요합니다.

2. 플러터 훅의 활용

플러터 훅을 활용하여 상태를 관리할 때, useState, useEffect, useReducer 등과 같은 훅들을 적절히 활용하여 상태 변화 및 부수 효과 처리를 효율적으로 수행할 수 있습니다.

2.1 useState

useState 훅을 사용하여 특정 상태 값을 관리하고 상태가 변경될 때 UI를 갱신할 수 있습니다.

import 'package:flutter/material.dart';

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

    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Text('Count: ${count.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        child: Icon(Icons.add),
      ),
    );
  }
}

2.2 useEffect

useEffect 훅을 사용하여 특정 상태의 변경에 반응하여 부수 효과를 처리할 수 있습니다.

import 'package:flutter/material.dart';

class NetworkDataWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      // 네트워크 요청 등의 비동기 작업 수행
      return () {
        // 정리 코드 등을 작성
      };
    }, [/* 의존성 목록 */]);

    // UI 작성
  }
}

2.3 useReducer

useReducer 훅을 사용하여 복잡한 상태 관리 로직을 분리하고 상태 갱신을 위한 액션을 정의할 수 있습니다.

import 'package:flutter/material.dart';

enum CounterAction { increment, decrement }

int counterReducer(int state, dynamic action) {
  switch (action as CounterAction) {
    case CounterAction.increment:
      return state + 1;
    case CounterAction.decrement:
      return state - 1;
  }
}

class CounterWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useReducer(counterReducer, 0);

    return Column(
      children: <Widget>[
        Text('Count: ${count.state}'),
        RaisedButton(
          onPressed: () => count.dispatch(CounterAction.increment),
          child: Text('Increment'),
        ),
        RaisedButton(
          onPressed: () => count.dispatch(CounterAction.decrement),
          child: Text('Decrement'),
        ),
      ],
    );
  }
}

3. 결론

플러터 훅을 사용하여 상태 관리를 수행하는 방법에 대해 알아보았습니다. 상태 관리는 앱의 성능과 사용자 경험에 중요한 영향을 미치므로, 효과적인 플러터 훅 활용은 앱의 품질 향상에 도움이 될 것입니다.

참고 문헌:

플러터 공식 문서