[Flutter] flutter_hooks useMemoized(3)

hodu·2024년 2월 13일
0

Flutter

목록 보기
23/30

useMemoized

Hook은 useMemoized 함수를 통해 계산 비용이 높은 함수의 반환 값을 저장하고,
동일한 인자로 함수가 재호출 될 때, 이전에 저장한 값을 재사용하여 성능을 최적화 하는데 도움을 줍니다.

함수가 반환하는 값을 기억하여 불필요한 재계산을 방지합니다.

예시

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

class SquareCalculatorWidget extends HookWidget {
  const SquareCalculatorWidget({super.key});

  
  Widget build(BuildContext context) {
    // 사용자 입력을 저장하는 변수.
    final inputController = useTextEditingController();

    // 입력 값에 따라 제곱 값을 계산하고 기억합니다.
    final square = useMemoized(() {
      final input = int.tryParse(inputController.text);
      if (input == null) return 0; // 입력이 유효하지 않으면 0을 반환합니다.
      return input * input; // 입력 값이 있다면 제곱 값을 계산합니다.
    }, [inputController.text]); // inputController.text가 변경될 때만 useMemoized가 실행됩니다.

    return Scaffold(
      appBar: AppBar(
        title: const Text('Square Calculator'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: inputController,
              decoration: const InputDecoration(
                labelText: 'Enter a number plz',
              ),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 20),
            Text(
              'Square: $square',
              style: const TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}



참고 문서:
https://www.youtube.com/watch?v=WFF8Y2-E_NA

profile
Flutter developer

0개의 댓글