본문 바로가기

로컬 데이터 저장 : SharedPreferences를 이용한 간단한 데이터 저장

에온르 2024. 6. 19.
반응형

Flutter 애플리케이션을 개발할 때, 로컬에 데이터를 저장하고 불러오는 기능은 매우 중요합니다. 이 강의에서는 Flutter에서 SharedPreferences를 사용하여 간단한 데이터를 저장하고 불러오는 방법을 배워보겠습니다. SharedPreferences는 간단한 키-값 쌍을 저장할 수 있는 비휘발성 스토리지입니다.

source : medium @Ashish Rawat

SharedPreferences란 무엇인가?

SharedPreferences는 Android와 iOS에서 로컬 스토리지로 사용되는 라이브러리입니다. 간단한 데이터를 로컬에 저장하고 불러오는 데 유용하며, 사용하기 쉽고 빠릅니다.


SharedPreferences 패키지 설치

먼저, shared_preferences 패키지를 설치해야 합니다. pubspec.yaml 파일에 shared_preferences 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.


데이터 저장하기

이제 SharedPreferences를 사용하여 데이터를 저장하는 방법을 알아보겠습니다.

데이터 저장 예제

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController _controller = TextEditingController();
  String _savedText = '';

  @override
  void initState() {
    super.initState();
    _loadSavedText();
  }

  // 데이터 저장 함수
  _saveText(String text) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('savedText', text);
  }

  // 저장된 데이터 불러오기 함수
  _loadSavedText() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedText = prefs.getString('savedText') ?? '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SharedPreferences 예제'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: '저장할 텍스트 입력'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _saveText(_controller.text);
              },
              child: Text('저장'),
            ),
            SizedBox(height: 20),
            Text(
              '저장된 텍스트: $_savedText',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명

  1. SharedPreferences.getInstance(): SharedPreferences 인스턴스를 가져옵니다. 이는 비동기적으로 작동하므로 await 키워드를 사용해야 합니다.
  2. prefs.setString('key', value): 데이터를 저장합니다. 여기서는 'savedText' 키에 텍스트 값을 저장합니다.
  3. prefs.getString('key'): 저장된 데이터를 불러옵니다. 키가 존재하지 않으면 null을 반환하므로, 기본 값을 설정합니다.

데이터 불러오기

이제 애플리케이션을 다시 시작할 때 저장된 데이터를 불러오는 방법을 알아보겠습니다.

데이터 불러오기 예제

위의 예제에서 initState 메서드에 _loadSavedText 함수를 호출하여 애플리케이션이 시작될 때 저장된 데이터를 불러옵니다.

@override
void initState() {
  super.initState();
  _loadSavedText();
}

// 저장된 데이터 불러오기 함수
_loadSavedText() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  setState(() {
    _savedText = prefs.getString('savedText') ?? '';
  });
}

이 코드는 애플리케이션이 시작될 때 저장된 텍스트를 불러와 화면에 표시합니다.


다양한 데이터 타입 저장

SharedPreferences는 문자열뿐만 아니라 정수, 부울 값, 리스트 등의 다양한 데이터 타입을 저장할 수 있습니다.

다양한 데이터 타입 저장 예제

// 정수 저장
prefs.setInt('counter', 123);

// 부울 값 저장
prefs.setBool('isLoggedIn', true);

// 리스트 저장
prefs.setStringList('items', ['item1', 'item2', 'item3']);

// 데이터 불러오기
int counter = prefs.getInt('counter') ?? 0;
bool isLoggedIn = prefs.getBool('isLoggedIn') ?? false;
List<String> items = prefs.getStringList('items') ?? [];

실습: 간단한 카운터 앱 만들기

이번 실습에서는 카운터 값을 로컬에 저장하고 불러오는 간단한 카운터 애플리케이션을 만들어보겠습니다.

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _loadCounter();
  }

  // 카운터 값을 로드하는 함수
  _loadCounter() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = prefs.getInt('counter') ?? 0;
    });
  }

  // 카운터 값을 저장하는 함수
  _saveCounter() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setInt('counter', _counter);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('카운터 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '버튼을 누른 횟수:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
          _saveCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

코드 설명

  1. _loadCounter: 애플리케이션 시작 시 저장된 카운터 값을 불러오는 함수입니다.
  2. _saveCounter: 카운터 값을 저장하는 함수입니다. 버튼을 누를 때마다 호출됩니다.

FAQ

Q: SharedPreferences에 큰 데이터를 저장할 수 있나요?

A: SharedPreferences는 간단한 키-값 쌍을 저장하는 데 적합하며, 큰 데이터나 파일을 저장하는 데는 적합하지 않습니다. 큰 데이터는 파일이나 데이터베이스에 저장하는 것이 좋습니다.

Q: SharedPreferences 데이터를 지울 수 있나요?

A: 네, remove 메서드를 사용하여 특정 키에 대한 데이터를 삭제할 수 있습니다. 예를 들어, prefs.remove('key')와 같이 사용할 수 있습니다.

Q: SharedPreferences는 어디에 저장되나요?

A: Android에서는 SharedPreferences가 내부 저장소에 XML 파일로 저장됩니다. iOS에서는 NSUserDefaults에 저장됩니다.


결론

이번 강의를 통해 Flutter에서 SharedPreferences를 사용하여 간단한 로컬 데이터를 저장하고 불러오는 방법을 배웠습니다. 다양한 데이터 타입을 저장하고 불러오는 방법을 익혔으며, 실습을 통해 카운터 애플리케이션에 적용해 보았습니다. 다음 강의에서는 더 복잡한 데이터 저장 방법과 데이터베이스를 사용하는 방법을 알아보겠습니다. 로컬 데이터 저장을 통해 사용자 경험을 향상시켜 보세요!

반응형

댓글