useMemo 훅은 Flutter의 Hooks API에서 제공하는 기능 중 하나로, 이전에 계산된 값들을 저장하고 재사용할 수 있게 도와줍니다. 이를 통해 애플리케이션 성능을 향상시키고 중복 계산을 방지할 수 있습니다.

이번 글에서는 useMemo 훅 위젯의 사용법과 예제를 살펴보겠습니다.

useMemo 훅이란?

useMemo 훅은 의존성 목록과 생성 함수를 사용하여 메모이제이션된 값을 제공합니다. 즉, 이전에 계산된 값을 기억하고, 의존성 목록에 있는 값이 변경되지 않은 경우에만 이전에 계산된 값을 재사용합니다.

useMemo 훅 사용법

useMemo 훅을 사용하려면 먼저 의존성 목록과 생성 함수를 제공해야 합니다. 이때, 생성 함수는 메모이제이션된 값을 반환하는 로직을 구현합니다.

final memoizedValue = useMemo(
  () {
    // 메모이제이션된 값을 생성하는 로직
    return calculateValue(dependency1, dependency2);
  },
  [dependency1, dependency2], // 의존성 목록
);

위의 예제에서 calculateValue 함수는 의존성 목록에 있는 dependency1과 dependency2 값을 기반으로 계산된 값을 반환합니다.

useMemo 훅 예제

다음은 useMemo 훅을 사용하여 이전에 계산된 값을 재사용하는 간단한 예제입니다.

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

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

Widget build(BuildContext context) {
  final expensiveValue = useMemo(
    () {
      print('Calculating expensive value');
      return calculateExpensiveValue();
    },
    [],
  );

  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Expensive Value: $expensiveValue'),
      ),
    ),
  );
}

String calculateExpensiveValue() {
  // 복잡한 계산 로직
  return '42';
}

위의 예제에서 expensiveValue는 useMemo 훅을 사용하여 calculateExpensiveValue 함수가 한 번 호출된 후 다시 호출되지 않고, 이전에 계산된 값을 반환합니다.

요약

이번 글에서는 useMemo 훅의 사용법과 예제를 살펴보았습니다. useMemo 훅을 사용하면 이전에 계산된 값을 저장하고 재사용하여 성능을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 Flutter Hooks 공식 문서 를 참고해보세요.