Flutter Hooks 너란 놈은 뭐냐?! flutter_hooks 파헤쳐보기 - useMemoized 사용법 (2)

 

두번째로는 hook에 useMemoized function에 대해서 알아보자.

useMemoized에 대해 간단히 이야기 하자면, 값을 메모리에 저장하고 있다가

값이 변한다면 재빌드, 아니라면 아무 변화도 주지 않는다.

즉 oldValue(메모리에 저장된 값)과 currentValue(현재 값)를 두개를 계속 비교하면서

상태를 변경한다고 이해하면 아주 쉽게 이해할 수 있을 것 이다.

 

일단 Implementation에 대해서 알아보자.

인자값으로 Function 함수와 List<Object>를 받는다.

 

나는 computerExpensiveOperation이라는 함수를 만들고 useMemorized로 실행하도록 구현하였다.

int computerExpensiveOperation(int count) {
    print('useMemoized 함수 실행');
    // 상상할 수 있는 비용이 많이 드는 연산
    return count * count;
}

 

그리고 Widget 빌드안에 useMemoried를 설정하였다.

Widget build(BuildContext context) {
   final counter = useState(0);
   final state = useState(0);
   // int expensiveValue = useMemoized(() => computeExpensiveOperation(state.value), [state.value]);
   int expensiveValue = useMemoized(() => computerExpensiveOperation(counter.value), [state.value]);
   	
   ... 그외 코드
}

그리고 floatingAction 버튼을 누르면 state값이 변하도록 구현하였다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    counter.value++;
    if (counter.value % 5 == 0) {
      // state.value;
      state.value++;
    }
  },

 

즉 코드로 간단히 보면,

counter값이 5의 배수일 경우에는 state값을 변화시킨다.

그렇게 된다면,

int expensiveValue = useMemoized(() => computerExpensiveOperation(counter.value), [state.value]);

를 통해서 상태변화가 감지되는 [state.value]를 통해 state가 변경되었으므로 computerExpensiveOperation 함수가 실행되고

int computerExpensiveOperation(int count) {

 print('useMemoized 함수 실행');

 // 상상할 수 있는 비용이 많이 드는 연산

 return count * count;

}

함수가 실행되고 expensiveValue 변수의 값이 변경이 되고

Text(
  'Sum : $expensiveValue',
  style: const TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.bold,
  ),

를 통해서 Sum함수가 최종적으로 보여주게 된다.

 

실행동영상을 통해서 간단하게 확인해보자!

 

그렇다면 이제 이런 생각이 들 수 있다.

 

useEffect랑 뭐가 다른거야? 근데 왜 쓰고 어떻게 사용하는거지?

 

사실 잘 모르겠다. useEffect도 useMemoried처럼 쓸 수 있는데 무엇이 다른 것일까?

결국 차이는 메모리저장에 있는 것 같다. 또는 고 연산처리 작업에 쓰일 수 있을 것 같다.

예를들어 한가지 예시로 Future나 Stream같은 실시간으로 계속해서 들어오는 값이 있다고 하자.

그렇다면 만약 똑같은 값이 실시간으로 1000번 들어온다고 하자 그렇다면 데이터 값이 똑같으므로

재 빌드를 하지 않고 다른 값이 들어왔을 경우에만 빌드를 할 것 이다.

근데 사실상 서버에서 들어오는 값이 똑같은 경우는 거의 없으니... 실제로 사용할지는 의문이긴 하다.

 

그래서 ChatGpt에 물어보니

 

결론적으로 useMemoized는 메모리화를 통한 재계산방지가 목적으로 개발된 것 같다.

즉 리소스가 많이 필요한 계산일 경우에는 useMemorized를 사용하는게 좋다는 것 같다.

 

전체 코드

코드 보기

import 'dart:developer';

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}

// ignore: must_be_immutable
class HomeScreen extends HookWidget {
  HomeScreen({super.key});
  int value = 0;

  int computerExpensiveOperation(int count) {
    print('useMemoized 함수 실행');
    // 상상할 수 있는 비용이 많이 드는 연산
    return count * count;
  }

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final state = useState(0);
    // int expensiveValue = useMemoized(() => computeExpensiveOperation(state.value), [state.value]);
    int expensiveValue = useMemoized(() => computerExpensiveOperation(counter.value), [state.value]);

    log('Rebuild');
    return Scaffold(
      appBar: AppBar(
        title: const Text('useState'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              counter.value.toString(),
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              'Sum : $expensiveValue',
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
          if (counter.value % 5 == 0) {
            // state.value;
            state.value++;
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}