앱/웹 개발자 인턴형 프로그램(유데미x스나이퍼팩토리) 7주차

1차 프로젝트가 끝나고 새로운 디자이너분들이랑 2차 프로젝트가 시작됐다.
2차 프로젝트는 데이터 연동도 할 수 있게끔 api를 제공한다고 한다.
1차와 마찬가지로 첫주차에는 아직 디자인이 완성된것이 없어서
팀원들끼리 놀기에는 시간이 아까워서 회의를 한 결과
프로젝트에 들어가기전에 사용해 본적없는 Provider패키지 공부와 데이터 불러오기 연습을 하기로 했다.

---

<정리>

Provider란?

전에 플러터를 처음 배웠을때는 GetX만 사용을 해봤는데
이번에는 플러터에서 가장 많이 사용하고 사용하기 간편하다고 해서
Provider를 사용해보고자 한다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); //상태변경 알림 // 숫자가 증가하면 ChangeNotifierProvider에 알려주고 notifyListeners()를 호출한다.
  }
}

void main() {
  runApp(ChangeNotifierProvider(
    create: (context) => CounterModel(),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter Value'),
            Consumer<CounterModel>(builder: (context, counterModel, child) {
              return Text(
                '${counterModel.counter}',
                style: TextStyle(fontSize: 24),
              );
            }),
            ElevatedButton(
                onPressed: () {
                  Provider.of<CounterModel>(context, listen: false).increment();
                },
                child: Text('Increment'))
          ],
        )),
      ),
    );
  }
}

ChangeNotifierProvider는 ChangeNotifier의 notifyListeners()를 기다리다가,notifyListeners()가 호출되면 자신의 자식을 재빌드하면서 업데이트 해준다.

---

본 후기는 유데미-스나이퍼팩토리 앱/웹 개발자 인턴형 프로그램 학습 일지 후기로 작성 되었습니다.

#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #인턴형 #웹앱개발 #웹앱개발자