[flutter] shared_preferences 를 사용하여 사용자가 작성한 블로그 포스트 목록을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

블로그 앱에서 사용자가 작성한 블로그 포스트 목록을 저장하고 나중에 불러와야 할 때, shared_preferences 라이브러리를 사용할 수 있습니다. shared_preferences는 키-값 쌍 형태로 데이터를 저장하고 로드할 수 있는 간단한 영속성 라이브러리입니다.

1. shared_preferences 라이브러리 추가하기

먼저, pubspec.yaml 파일의 dependencies에 shared_preferences 패키지를 추가해야 합니다. 아래와 같이 작성하세요:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.5

그리고나서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 블로그 포스트 데이터 저장하기

shared_preferences 라이브러리는 async/await을 사용하여 비동기로 데이터를 저장하고 로드합니다. 따라서, async로 선언된 함수 안에서 사용해야 합니다. 먼저, 사용자가 작성한 블로그 포스트 목록을 리스트 형태로 저장하는 함수를 만들어 보겠습니다.

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveBlogPosts(List<String> blogPosts) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setStringList('blog_posts', blogPosts);
}

위의 예제 코드에서는 SharedPreferences 클래스의 getInstance() 메소드를 호출하여 인스턴스를 가져온 뒤, setStringList() 메소드를 사용하여 ‘blog_posts’라는 키로 블로그 포스트 목록을 저장합니다.

3. 블로그 포스트 데이터 로드하기

이제 저장한 블로그 포스트 목록을 다시 불러오는 함수를 만들어 보겠습니다.

import 'package:shared_preferences/shared_preferences.dart';

Future<List<String>> loadBlogPosts() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  List<String> blogPosts = prefs.getStringList('blog_posts') ?? [];
  return blogPosts;
}

위의 코드에서는 getStringList() 메소드를 사용하여 ‘blog_posts’ 키로 저장된 블로그 포스트 목록을 로드하고, 만약 저장된 값이 없을 경우 빈 리스트를 반환합니다.

4. 블로그 포스트 데이터 사용하기

이제 저장한 블로그 포스트 목록을 사용하는 예제를 살펴보겠습니다.

import 'package:flutter/material.dart';

class BlogPostsScreen extends StatefulWidget {
  @override
  _BlogPostsScreenState createState() => _BlogPostsScreenState();
}

class _BlogPostsScreenState extends State<BlogPostsScreen> {
  List<String> blogPosts = [];

  @override
  void initState() {
    super.initState();
    loadBlogPosts().then((value) {
      setState(() {
        blogPosts = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('블로그 포스트'),
      ),
      body: ListView.builder(
        itemCount: blogPosts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(blogPosts[index]),
          );
        },
      ),
    );
  }
}

위의 코드는 블로그 포스트를 나열하는 화면을 구성하는 예제입니다. initState() 메소드에서 loadBlogPosts() 함수를 호출하여 저장한 블로그 포스트 목록을 가져와서 setState() 함수를 통해 빌드 메소드에서 화면을 갱신합니다.

이제 사용자가 작성한 블로그 포스트 목록을 shared_preferences를 사용하여 저장하고, 필요할 때 로드하는 방법에 대해 알아보았습니다. shared_preferences를 사용하면 간편하게 데이터를 영속적으로 저장할 수 있으므로, 다양한 앱 개발에 유용하게 사용할 수 있습니다.