[flutter] 플러터에서 useSelector 훅(hook)을 사용한 데이터 필터링

14 Dec 2023

flutter

플러터(Flutter)의 Redux 패턴을 구현하는 동안 useSelector 훅을 사용하여 데이터를 필터링하는 것은 매우 유용합니다. useSelector는 Redux 상태를 구독하고, 상태가 변경될 때마다 해당 상태값을 반환하는 데 사용됩니다. 이를 활용하면 Redux 스토어의 상태를 효율적으로 관리하고 상태값을 효과적으로 필터링할 수 있습니다.

useSelector 훅이란?

useSelector는 Redux 패턴에서 사용되는 React Redux 라이브러리의 훅으로, 상태 값 선택(select)을 위해 사용됩니다. 플러터에서는 flutter_redux 패키지를 사용하여 Redux 스토어를 관리하고, useSelector 훅을 통해 해당 스토어의 상태값을 선택할 수 있습니다.

useSelector를 사용한 데이터 필터링 예시

아래는 useSelector 훅을 사용하여 Redux 상태를 필터링하는 예시 코드입니다.

import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

class AppState {
  final List<String> items;

  AppState({required this.items});
}

void main() {
  final store = Store<AppState>(
    // 스토어 설정 및 리듀서 등록
  );

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<AppState> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        home: StoreConnector<AppState, List<String>>(
          // useSelector 훅을 사용하여 items 필터링
          converter: (store) => store.state.items.where((item) => item.contains('filter')).toList(),
          builder: (context, filteredItems) {
            return Scaffold(
              body: ListView.builder(
                itemCount: filteredItems.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(filteredItems[index]),
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

위 코드에서 StoreConnector의 converter 파라미터를 통해 useSelector를 사용하여 스토어의 상태값을 필터링하고, 필터링된 상태값을 화면에 표시하는 예시를 보여줍니다.

이처럼 useSelector 훅을 사용하면 Redux 상태값을 원하는 대로 필터링하여 사용할 수 있습니다.

Redux 패턴을 플러터 애플리케이션에 구현하고 있다면, useSelector 훅을 효과적으로 활용하여 상태값을 필터링해보세요.

자세한 내용은 flutter_redux 공식 문서를 참고하시기 바랍니다.