[flutter] 플러터 훅 위젯에서의 속성 변경 감지 방법

21 Dec 2023

flutter

플러터(Flutter)에서 훅(Hook)을 사용하는 경우, 속성 변경을 감지하고 이에 따라 적절히 대응할 수 있는 방법이 필요합니다. 이 포스트에서는 플러터 훅 위젯에서의 속성 변경 감지 방법에 대해 알아보겠습니다.

1. useState 훅 사용

가장 일반적인 방법은 useState 훅을 사용하여 상태를 관리하는 것입니다. 이를 통해 상태가 변경될 때, 이를 감지하고 새로운 값을 반영할 수 있습니다.

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

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var count = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Hook Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${count.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예시에서 useState를 사용하여 count를 상태로 관리하고 있습니다.

2. useEffect 훅 사용

useEffect 훅을 사용하여 특정 속성이 변경될 때 대응할 수도 있습니다.

useEffect(() {
  // 실행할 코드
}, [의존성1, 의존성2]);

마치며

플러터 훅 위젯에서의 속성 변경을 감지하고 이에 대응하는 방법에 대해 알아봤습니다. useState와 useEffect 훅을 효과적으로 활용하여 업데이트를 감지하고 적절한 동작을 취할 수 있습니다. 플러터 훅 위젯을 사용할 때 상태 관리 및 동작 변경에 유용한 정보였기를 바랍니다.

참고 자료:

다음에 봐요! 🚀