[flutter] 플러터에서 훅(hook)을 활용하여 사용자 데이터 저장하기

14 Dec 2023

flutter

플러터(Flutter)는 사용자 데이터를 저장하고 가져오는 데 매우 효과적인 상태 관리 라이브러리를 제공합니다. 플러터의 훅(hook) 기능을 사용하면 상태를 쉽게 관리하고 유지할 수 있습니다. 이번 글에서는 플러터에서 훅을 활용하여 사용자 데이터를 저장하고 가져오는 방법에 대해 알아보겠습니다.

1. 훅(Hook) 라이브러리 추가

먼저, 프로젝트에 훅(Hook) 라이브러리를 추가해야 합니다. flutter_hooks는 플러터에서 훅을 활용할 수 있게 해주는 라이브러리입니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  flutter_hooks: ^0.18.0

의존성을 추가한 후에는 flutter pub get을 실행하여 라이브러리를 다운로드 받습니다.

2. 사용자 데이터 저장 및 가져오기

훅을 활용하여 사용자 데이터를 저장하고 가져오려면 먼저 useState 훅을 사용하여 상태를 생성합니다. 다음은 간단한 예제 코드입니다.

import 'package:flutter_hooks/flutter_hooks.dart';

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var userState = useState(''); // 초기값 설정
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('훅을 활용한 사용자 데이터 저장'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('사용자 데이터: ${userState.value}'),
              RaisedButton(
                child: Text('데이터 변경'),
                onPressed: () {
                  userState.value = '새로운 데이터'; // 데이터 변경
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 useState 메소드를 이용하여 userState 변수를 선언하고, 버튼 클릭 시 해당 상태 값을 변경하는 예제를 확인할 수 있습니다.

3. 데이터 영구 저장

사용자 데이터를 영구적으로 저장하고 싶을 때, shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 키-값 형태의 데이터를 안전하게 저장하고 불러올 수 있는 방법을 제공합니다.

dependencies:
  shared_preferences: ^2.0.8

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

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var userState = useState('');
    useEffect(() {
      _loadData(userState);
      return () {};
    }, const []);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('사용자 데이터 저장 및 불러오기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('사용자 데이터: ${userState.value}'),
              RaisedButton(
                child: Text('데이터 변경'),
                onPressed: () {
                  _saveData('새로운 데이터'); // 데이터 저장
                  userState.value = '새로운 데이터'; // 상태 업데이트
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  _loadData(ValueNotifier<String> userState) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String data = prefs.getString('userData') ?? '';
    userState.value = data;
  }

  _saveData(String newData) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('userData', newData);
  }
}

위 코드에서는 shared_preferences 패키지를 사용하여 사용자 데이터를 영구적으로 저장하고 가져오는 방법을 보여줍니다.

이제 플러터에서 훅을 활용하여 사용자 데이터를 저장하고 가져오는 방법에 대해 알게 되었습니다. 훅을 사용하면 상태를 쉽게 관리하고 유지할 수 있으며, shared_preferences를 활용하여 데이터를 영구 저장함으로써 앱의 사용자 경험을 개선할 수 있습니다.

참고 문헌: flutter_hooks 라이브러리, shared_preferences 패키지