Flutter 창업반 5주차 TIL1 - 데이터 통신 기초와 JSON, MVVM 아키텍쳐

데이터 통신 기초와 JSON

 

Dart에서 JSON 데이터 변환 형식

• 데이터를 주고 받을 때 JSON형식의 String으로 주고 받음

직렬화

• Dart 객체 → Map → String

역직렬화

• String → Map → Dart 객체

class 에 fromJson named 생성자 , toJson 메서드 구현해서 사용

class User {
  User({
    required this.name,
    required this.age,
  });
  String name;
  int age;

  User.fromJson(Map<String, dynamic> map)
      : this(
          name: map['name'],
          age: map['age'],
        );

  Map<String, dynamic> toJson() {
    return {
      "name": name,
      "age": age,
    };
  }
}

 

 

 

MVVM 아키텍쳐 알아보기

 

📚 StatefulWidget

1. 사용자 클릭, 로직 처리
2. 데이터 요청해서 데이터 받음
3. 받은 데이터 가공 및 상태 업데이트
4. 화면 업데이트

• StatefulWidget에서 많은 역할 수행 ⇒ 코드 지저분해짐

 

 

📚 MVVM 동작원리

1. ViewModel 구독(변경되는지 바라보고 있음)
2. 사용자 클릭했으니 처리해!
3. 로직 처리
4. 데이터 요청해서 데이터 받음
5. 받은 데이터 가공 및 상태 업데이트
6. 자신의 상태가 바뀌었다고 알림 (View가 누군지는 모름)
7. 뷰는 ViewModel을 구독하고 있기 때문에 상태가 바뀌었다는걸 감지. 화면 업데이트! 

데이터 레이아웃 들어가서 파일 끄집어내고 찾아내야되고

파일을 왔다갔다하는 복잡한 단점이 존재하긴 함...

 

but 팀에서 각자 역할이 나뉘어져 있듯이,

기존 Stateful 위젯으로 모두 관리하던 부분을 분담하는 역할 중 하나

데이터와 UI 역할을 나눠서 충돌의 위험성을 줄이는 역할

개발속도/효율성 부분에서 간단한 프로젝트에서 MVVM을 권장하지는 않지만,

나중에 20~40페이지정도 복잡해졌을때는 코드 관리가 힘들어짐

MVVM을 도입하면 데이터 처리 역할이 따로 분리되기 때문에 데이터 관련 수정 용이하고

페이지별로 작업을 나누지 않아도 충돌이 적어짐

코드간의 의존성을 줄이는 과정을 용이하게 하는 역할로 MVVM이 아니더라도

평소 코딩을 할때 의존성을 줄이는 과정 중요함

 

 

Stateless Widget vs Stateful Widget 복습

 

Stateless Widget

화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로

변경이 필요한 Data가 없는 것을 의미하며

이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다.

 

Stateful Widget​

위젯이 동작하는 동안 Data 변경이 필요한 경우

화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로

이벤트 또는 사용자 상호 작용에 의해 동작한다.

​

예를 들어 축구 게임의 경우 점수를 나타내는 위젯은

골이 들어갈 때마다 변경해야 돼서 Stateful Widget 사용이 필요하다.

​

또는 체크 박스에 따라 화면을 변경하는 등

이렇게 동적으로 화면 변화가 필요한 경우

하면 Stateful Widget을 사용해야 한다.