[flutter] 플러터 훅 위젯에서의 동적 UI 생성 방법

21 Dec 2023

flutter

플러터(Flutter)의 훅(Hook) 위젯은 상태 관리와 UI 렌더링에 매우 유용한 기능을 제공합니다. 이 기사에서는 플러터 훅 위젯을 사용하여 동적 UI를 생성하는 방법에 대해 설명하겠습니다.

1. 훅(Hook)이란

훅(Hook)은 함수형 컴포넌트에서 상태 관리와 렌더링을 도와주는 기능입니다.
이전에는 상태 관리를 위해 StatefulWidget을 사용했지만, 훅을 이용하면 상태 관리를 더 간단하고 직관적으로 할 수 있습니다.

2. 플러터 훅(Hook) 위젯

flutter_hooks 패키지를 사용하여 플러터 훅 위젯을 활용할 수 있습니다.
useMemoized나 useEffect와 같은 훅을 사용하여 상태 관리와 사이드 이펙트를 다룰 수 있습니다.

3. 동적 UI 생성 방법

플러터 훅 위젯을 사용하여 동적 UI를 생성하는 방법은 다음과 같습니다:

3.1 상태 관리

import 'package:flutter_hooks/flutter_hooks.dart';

var count = 0;

Widget build(BuildContext context) {
  var _count = useState(0);
  return Text('Count: ${_count.value}');
}

3.2 리스트 동적 생성

import 'package:flutter_hooks/flutter_hooks.dart';

Widget build(BuildContext context) {
  final List<String> items = useMemoized(() => List.generate(10, (index) => 'Item $index'));
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(items[index]),
      );
    },
  );
}

4. 결론

플러터 훅 위젯을 사용하여 동적 UI를 생성하는 방법을 배워보았습니다. 훅을 활용하면 상태 관리와 UI 렌더링을 더 효율적으로 할 수 있습니다.

이상으로 플러터 훅 위젯에서의 동적 UI 생성 방법에 대해 알아보았습니다. 감사합니다!

목차