UI-블록과 데이터 로드문제 해결

1. Bloc 패턴과 초기 데이터 로드

Bloc 패턴은 **이벤트(Event)**를 통해 비즈니스 로직을 처리하고, 그 결과를 **상태(State)**로 반영하는 구조야. Flutter에서 이 패턴을 사용하면 UI와 비즈니스 로직을 분리하여 깔끔하게 유지할 수 있어.

초기 데이터 로드 문제는 다음과 같은 이유로 발생할 수 있어:

• Bloc이 초기화되었을 때 이벤트가 발생하지 않아서 상태가 변화하지 않는 경우.
• UI는 상태에 따라 다르게 렌더링되는데, 이벤트가 없으면 로딩이나 데이터 표시와 같은 상태 전환이 일어나지 않아 UI가 제대로 동작하지 않음.

2. 문제 발생 이유

코드에서 HomeBloc이 생성되었지만, Bloc이 데이터를 가져오는 이벤트가 발생하지 않았기 때문에 상태가 HomeInitial에 머물러 있었어. 이로 인해 BlocBuilder가 HomeLoaded 상태로 전환되지 않고, UI가 제대로 렌더링되지 않은 것.

간단히 말하면:

• HomeBloc이 FetchHomeData 이벤트를 받지 못했기 때문에 데이터가 로드되지 않았고, 따라서 버튼과 리스트가 나타나지 않은 거야.

3. 해결 과정

1) 이벤트 추가

문제를 해결하려면 HomeBloc이 초기화될 때, 즉 홈 페이지가 처음 생성될 때 데이터를 불러오는 이벤트를 발생시켜야 해. 이렇게 해야 Bloc이 상태를 HomeLoading으로 변경하고, 데이터를 로드한 후에 HomeLoaded 상태로 전환돼서 UI가 적절하게 렌더링될 수 있어.

2) 코드 수정

BlocProvider가 생성될 때, FetchHomeData() 이벤트를 추가해서 HomeBloc이 데이터를 로드할 수 있도록 수정했어.

dart

코드 복사

BlocProvider( create: (context) => HomeBloc()..add(FetchHomeData()), //^ 데이터 로드 이벤트 추가 child: Scaffold( appBar: HomeAppbar(title: '오금동'), body: BlocBuilder<HomeBloc, HomeState>( builder: (context, state) { if (state is HomeLoading) { return Center(child: CircularProgressIndicator()); } else if (state is HomeLoaded) { return Column( children: [ CategoryButtons(), SizedBox(height: 16), Expanded( child: ListView( padding: EdgeInsets.all(8.0), children: state.items .map((item) => ItemCard( title: item, location: '오금동 · 3시간 전', price: '가격 정보 없음', )) .toList(), ), ), ], ); } else if (state is HomeError) { return Center(child: Text(state.message)); } else { return Center(child: Text('알 수 없는 상태')); } }, ), floatingActionButton: FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (_) => BlocProvider.value( value: BlocProvider.of<HomeBloc>(context), child: WriteHomePage(), ), ), ); }, child: Icon(Icons.add), backgroundColor: Colors.orange, ), bottomNavigationBar: BottomBar( initialIndex: 0, ), ), )

4. 개념 정리

1) Bloc의 기본 개념

• Event: 사용자가 어떤 액션을 취할 때 발생시키는 신호. 예를 들어, 데이터를 불러오거나 새로운 아이템을 추가하는 액션이 있을 수 있어.
• State: 이벤트가 처리된 후 변경된 애플리케이션의 상태. 예를 들어, 로딩 중일 때, 데이터가 불러와졌을 때, 에러가 발생했을 때 등으로 나뉨.
• Bloc: 이벤트가 발생했을 때, 그 이벤트에 대한 비즈니스 로직을 처리한 후 상태를 변경하는 역할을 담당.

2) 초기 데이터 로드 흐름

• BlocProvider: Bloc을 제공하는 역할을 하며, 이 Bloc이 어떤 상태를 가지고 있는지 정의함.
• 이벤트 추가: 화면이 처음 로드될 때, 데이터 로드를 위한 FetchHomeData 이벤트를 발생시킴.
• BlocBuilder: Bloc의 상태 변화에 따라 UI를 빌드함. 예를 들어, HomeLoading 상태일 때는 로딩 스피너를 보여주고, HomeLoaded 상태일 때는 데이터를 화면에 렌더링함.

5. 결론

이번 문제는 초기 데이터를 불러오는 이벤트를 놓쳤기 때문에 발생한 거였어. 해결 방법은 Bloc을 생성할 때 데이터를 로드하는 이벤트를 함께 발생시켜서 상태 전환을 일으킨 것이었고, 이를 통해 UI가 정상적으로 렌더링되었어.

이제 Bloc 패턴을 사용한 초기 데이터 로드와 상태 관리 개념을 이해했으니, 앞으로 이런 문제들을 쉽게 해결할 수 있을 거야!