[Flutter] (MVVM 활용) API에서 사용할 데이터 구조를 정의하기 위해 Post 클래스를 만들어 봅시다.(모델링 작업) - 3

2024. 11. 19. 12:13·Flutter/MVVM 활용
API에서 받아올 데이터의 구조를 정의하고, 이를 Dart 객체로 변환하는 작업을 수행하자.

Post 클래스를 정의하고, 이 클래스에서 JSON 데이터를 객체로 변환하는 메서드(fromJson)와 객체를 JSON으로 변환하는 메서드(toJson)를 구현을 해보자. 

 

lib/models/Post.dart 파일 생성

import 'package:equatable/equatable.dart';

// Post 데이터를 표현하는 모델 클래스입니다.
// 서버로부터 받은 JSON 데이터를 Dart 객체로 변환하거나,
// Dart 객체를 JSON으로 변환할 때 사용됩니다.
// Equatable을 사용하여 값 기반 비교를 지원합니다.


class Post extends Equatable {

  final int? userId;
  final int? id;
  final String title;
  final String body;

  Post({this.userId, this.id, required this.title, required this.body});


  // Json 데이터를 Post 객체로 변환하는 생성자를 생성
  // 이름이 있는 생성자
  Post.fromJson(Map<String, dynamic> json)
    : userId = json['userId'],
      id = json['id'],
      title = json['title'],
      body = json['body'];

  // Post 객체를 JSON 형식으로 변환하는 메서드를 만들자
  Map<String, dynamic> toJson(){
    return {'userId': userId, 'id': id, 'title': title, 'body': body};
  }

  @override
  List<Object?> get props => [userId, id, title, body];

}
Post({this.userId, this.id, required this.title, required this.body});
기본 생성자는 객체를 생성할 때 호출됩니다.

userId와 id는 선택 사항이므로 this.userId와 this.id로 선언.
title과 body는 필수 값이므로 required 키워드를 사용해 꼭 값을 전달받도록 설정.

Post.fromJson(Map<String, dynamic> json)
: userId = json['userId'], id = json['id'], title = json['title'], body = json['body'];
이름이 있는 생성자로, JSON 데이터를 Dart 객체로 변환하는 역할을 합니다

매개변수 json: Map<String, dynamic> 타입으로 전달된 JSON 데이터.
JSON의 키(userId, id, title, body)에 해당하는 값을 읽어와 클래스의 속성에 할당.
JSON -> Dart -> JSON    ???

JSON → Dart 객체 변환 : Dart 코드에서 데이터 조작을 쉽게 하기 위해서
Dart 객체 → JSON 변환 : 서버로 데이터를 전송 하거나, 저장 하거나, 공유 하기 위해서
(서버는 Dart 객체를 이해하지 못합니다. 따라서 데이터를 서버가 이해할 수 있는 JSON 형식으로 변환해야 합니다. )

 

왜 Equatable 을 사용해서 객체를 주소 값 비교 기반이 아닌 값 기반으로 비교하는 걸까?

  • 실제 애플리케이션 로직에서는 객체가 같은 메모리에 있지 않더라도 내용이 같으면 같은 객체로 간주하는 경우가 많음.
    • (동일한 게시물(Post)의 두 인스턴스가 같은 id, title, body 값을 가지고 있다면, 두 객체는 논리적으로 동일한 게시물을 표현합니다)
  • 상태 관리 라이브러리(Riverpod, Bloc)에서는 동일한 데이터를 가진 객체가 여러 개 생성되더라도, 값이 같으면 동일한 상태로 간주하는 것이 일반적입니다. 이를 통해 불필요한 상태 변경을 방지하고, 최적화된 상태 관리를 구현할 수 있습니다.
  • 또한, 컬렉션(Set, Map)에서 중복 제거를 할 때도 값 기반 비교가 유용합니다. 동일한 값의 객체가 여러 개 생성되더라도 한 번만 저장되도록 관리할 수 있습니다.
  • Equatable을 사용하면 직접 == 연산자와 hashCode를 구현하지 않아도, 필요한 필드만 선언하여 쉽게 값 비교 기능을 활용할 수 있습니다.

'Flutter > MVVM 활용' 카테고리의 다른 글

[Flutter] (MVVM 활용) PostRespository를 중앙에서(컨테이너) 관리하는 Provider 계열을 만들어 보자. - 5  (0) 2024.11.19
[Flutter] (MVVM 활용) 데이터 접근 계층인 PostRepository 만들어 봅시다. - 4  (0) 2024.11.19
[Flutter] (MVVM 활용) Http 통신 클라이언트 Dio 객체를 만들어 보자 - 2  (0) 2024.11.19
[Flutter] (MVVM 활용) 플러터 프로젝트 생성 - 1  (0) 2024.11.19
[Flutter] riverpod 과 MVVM 활용  (0) 2024.11.19
'Flutter/MVVM 활용' 카테고리의 다른 글
  • [Flutter] (MVVM 활용) PostRespository를 중앙에서(컨테이너) 관리하는 Provider 계열을 만들어 보자. - 5
  • [Flutter] (MVVM 활용) 데이터 접근 계층인 PostRepository 만들어 봅시다. - 4
  • [Flutter] (MVVM 활용) Http 통신 클라이언트 Dio 객체를 만들어 보자 - 2
  • [Flutter] (MVVM 활용) 플러터 프로젝트 생성 - 1
미로910
미로910
개발자를 꿈꾸는 민경이의 기록 블로그
  • 미로910
    개발 note
    미로910
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 설치 메뉴얼
      • HTML
      • JAVA
        • Java 기초
        • Java 응용
        • 자료구조
        • HTTP
        • JSP 프로그래밍
      • MySQL
        • MySQL 기본
        • 1일 1쿼리
      • CSS
      • Spring boot
      • JS
        • 게시판 만들기
      • Git
      • Flutter
        • MVVM 활용
        • 심화 버전
        • 1일 1 Flutter
      • 디자인 패턴의 활용
      • error note
      • My Project
        • [졸작] LLM 기반 특허 유사도 분석 시스템
        • 도서 관리 프로그램 (final project)
        • amigo
        • 친구 매칭 프로그램(FMP)
      • Python
      • 딥러닝
      • 네트워크
      • 공부 노트
        • 연구회
        • 자료구조
      • 기타
  • 블로그 메뉴

    • 홈
    • 전체보기
    • -----------------------
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Flutter
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
미로910
[Flutter] (MVVM 활용) API에서 사용할 데이터 구조를 정의하기 위해 Post 클래스를 만들어 봅시다.(모델링 작업) - 3
상단으로

티스토리툴바