[flutter] 플러터 훅 위젯에서의 조건부 렌더링 방법

21 Dec 2023

flutter

플러터(Flutter) 훅(Hook) 위젯을 사용하면 상태 관리와 UI 렌더링을 훨씬 간단하게 할 수 있습니다. 여기에는 조건부 렌더링도 포함됩니다. 조건부 렌더링을 위해서 훅 위젯에서는 useMemo나 useEffect 훅을 사용할 수 있습니다.

useMemo를 사용한 조건부 렌더링

useMemo 훅은 의존성 목록에 변화가 있을 때에만 값을 계산합니다. 이를 이용하여 조건부 렌더링을 수행할 수 있습니다.

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

Widget MyComponent() {
  bool condition = true;

  return HookBuilder(
    builder: (context) {
      final result = useMemo(() {
        if (condition) {
          return Text('Condition is true');
        } else {
          return Text('Condition is false');
        }
      }, [condition]);

      return result;
    },
  );
}

위의 예제에서 useMemo 훅은 condition 값이 변할 때마다 해당 값에 따라 다른 Text 위젯을 생성합니다.

useEffect를 사용한 조건부 렌더링

useEffect 훅은 특정 조건에 따라 특정 작업을 수행할 수 있도록 합니다. 이를 이용하여 조건부 렌더링을 수행할 수 있습니다.

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

Widget MyComponent() {
  bool condition = true;

  return HookBuilder(
    builder: (context) {
      useEffect(() {
        if (condition) {
          // do something
        } else {
          // do something else
        }
      }, [condition]);

      return Container();
    },
  );
}

위의 예제에서 useEffect 훅은 condition 값이 변할 때마다 특정 작업을 수행할 수 있도록 합니다.

플러터 훅 위젯을 사용하여 조건부 렌더링을 처리하는 방법에 대해 알아보았습니다. 각각의 훅을 적절히 활용하여 UI를 조건에 따라 동적으로 렌더링할 수 있습니다.