[프로젝트] 중첩 데이터 구조로 인한 State 관리 오류

🔍 문제 상황

초기 구현 방식

🤔 원인 분석

발생한 문제

*// dynamic으로 데이터 받기*
List<dynamic> responseList = responseBody["response"];

*// 다운캐스팅 시도*
FitnessListModel list = FitnessListModel.fromList(responseList);`

왜 문제가 발생했는가?

1. 중첩 데이터 구조의 복잡성
• 카테고리와 운동 리스트가 묶여서 전송됨
• 데이터 파싱 시 구조가 복잡해져 타입 캐스팅 어려움

2. State 관리 문제
• 카테고리 정보를 가져올 때마다 하위 운동 리스트도 함께 로드
• 카테고리 상태가 변경되면 연관된 모든 운동 리스트의 state도 함께 변경
• 의도하지 않은 UI 리렌더링 및 상태 동기화 문제 발생

3. 데이터 독립성 부족
• 카테고리와 운동 리스트가 강하게 결합되어 있어 개별 관리 불가능
• 특정 카테고리만 업데이트하거나 운동만 추가/삭제하기 어려움

해결 방법

API 엔드포인트 분리

class FitnessListRepository {
  const FitnessListRepository();

  // 운동 리스트 받아오기
  Future<Map<String, dynamic>> findAllFitness() async {
    Response response = await dio.get("/fitness-list");
    Map<String, dynamic> body = response.data;
    return body;
  }

  // 카테고리 리스트 받아오기
  Future<Map<String, dynamic>> findAllCategory() async {
    Response response = await dio.get("/category-list");
    Map<String, dynamic> body = response.data;
    return body;
  }
}

서버 응답 구조 개선

📊 개선 효과

1. 명확한 데이터 구조

• 타입 캐스팅이 단순해짐

• UnimplementedError 해결

// 개선 후 - 간단한 다운캐스팅
List<dynamic> categories = categoryBody["response"];
List<CategoryModel> categoryList = 
    categories.map((e) => CategoryModel.fromJson(e)).toList();

2. 독립적인 State 관리

• 카테고리 상태 변경이 운동 리스트에 영향을 주지 않음

• 각 데이터를 독립적으로 관리 가능

3. 성능 최적화

• 필요한 데이터만 선택적으로 로드 가능

• 불필요한 데이터 전송 감소

4. 유지보수성 향상

• API 엔드포인트 역할이 명확함

• 추후 기능 확장 시 영향 범위 최소화