CacheNetworkImage란?

Flutter CacheNetworkImage는 Flutter에서 네트워크 이미지를 효율적으로 로딩하고 캐싱하기 위한 강력한 패키지입니다. 이 패키지를 사용하면 네트워크 요청 횟수를 줄이고 앱의 성능을 향상시킬 수 있습니다.

<장점>

• 이미 로드된 이미지는 캐시에 저장되어 재사용되므로 불필요한 네트워크 요청을 줄일 수 있습니다.
• 캐시된 이미지는 로컬에서 빠르게 로딩되어 사용자 경험을 향상시킵니다.
• 이미지 로딩 중이나 실패 시 사용자에게 알려줄 수 있는 플레이스홀더 및 에러 위젯을 제공합니다.

<단점>

• 캐시 크기가 커지면 메모리 사용량이 증가할 수 있으며 캐시 관리에 대한 신경을 써야 합니다.
• 외부 패키지에 의존하기 때문에 프로젝트 크기가 약간 증가할 수 있습니다.

CacheNetworkImage 예제

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CachedNetworkImage Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CachedNetworkImage Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://health.chosun.com/site/data/img_dir/2023/07/17/2023071701753_0.jpg',
            placeholder: (context, url) => const CircularProgressIndicator(),
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

CachedNetworkImage 위젯을 사용하여 네트워크 이미지를 로딩하고 이미지 로딩 중에는 CircularProgressIndicator를 로딩 실패 시에는 Error 아이콘을 표시합니다.

<캐싱 메커니즘>

• 동일한 URL을 가진 이미지는 한 번만 다운로드되고 캐시에 저장됩니다.
• 가장 최근에 사용하지 않은 항목을 먼저 삭제하여 메모리 공간을 확보하는 방식
• 캐시된 이미지는 설정된 만료 시간이 지나면 자동으로 삭제됩니다.