🎯 오늘은 부족한 위젯 부분 강의를 복습하고, 헷갈리거나 알지 못하는 코드랑 위젯을 찾아봤다. velog에 정리했던 내용도 다시 확인해보면서 진행했고, 내일할 학습 계획도 간단하게 세웠다.

그리고 오후에 Git에 기본에 대한 특강이 있어 들었는데, 예전에 한번 설치하고 써봤는데 기억이 잘 안나서 약간 어려웠던 것 같다.

---

📋 위젯 복습

1. View 위젯
  1-1 PageView 위젯
  1-2 ListView 위젯
  1-3 GridView 위젯
  1-4 TabBar 위젯

---

2. Layout 위젯
  2-1 Container 위젯
  2-2 SizedBox 위젯
  2-3 Row & Column 위젯
  2-4 Expanded 위젯
  2-5 Stack 위젯 & Positioned 위젯

---

🎓 개인 학습

---

🔥 Expanded

✅ 예제

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red, height: 100),
    ),
    Expanded(
      child: Container(color: Colors.green, height: 100),
    ),
  ],
)

✔ Flex 계열 위젯(Row, Column 등)의 child 중 하나로 사용되어 남은 공간을 차지하고, flex 값을 통해 비율 조절이 가능하게 한다.

---

항목	Expanded	Flexible
남은 공간	무조건 꽉 채움	필요한 만큼만 채움
자식 제한	자식이 꽉 차야 함	자식 크기에 따라 유연하게 조정 가능
기본 flex	1	1

---

🔥 Children, Child

항목	child	children
타입	단일 위젯 (Widget)	위젯 리스트 (List<Widget>)
뜻	하나의 자식 위젯	여러 개의 자식 위젯들
사용처	Container, Center, Expanded 등	Row, Column, Stack 등

---

✅ child – 하나의 자식만 받을 수 있을 때

Center(
  child: Text('Hello, Flutter!'),
)

✔ 보통 단일 레이아웃일 때 사용되는데, Center는 자식이 하나만 들어갈 수 있어서 child 속성을 쓴다.

---

✅ children – 여러 자식을 한꺼번에 넣을 때

Column(
  children: [
    Text('Hello'),
    Text('Flutter'),
    Icon(Icons.star),
  ],
)

✔ Column은 여러 자식을 세로로 배치하니까 children을 써야하며, 리스트로 여러 위젯을 한 번에 넣어줘야 해서 List<Widget> 형태이다.

---

✏️ List<Widget>

children: <Widget>[
   Widget(), 
   Widget(),
   ...
] // 원래 전체 문법

✔ Dart 문법에서 [ ]는 리스트를 뜻하는데, children이 List<Widget> 타입을 요구할 때 그렇게 쓰인다.
 
💡 Dart 특성상 List에 Widget 들어가 있으면 알아서 List<Widget> 으로 받아들이기에 `` 을 생략할 수 있다.

---

위젯 종류	child 사용	children 사용
Container	✅ 사용 가능	❌ 사용 불가
Center	✅ 사용 가능	❌ 사용 불가
Expanded	✅ 사용 가능	❌ 사용 불가
Row	❌ 사용 불가	✅ 여러 자식 필요
Column	❌ 사용 불가	✅ 여러 자식 필요
Stack	❌ 사용 불가	✅ 여러 자식 필요

---

💡 에러 메시지에 expected a Widget but got list<widget>이 나오면,
child를 써야 하는데 children을 썼거나 반대로 썼을 가능성이 크다.

---

🔥 const

✏️ const

❗ 오류 해결

@override
Widget build(BuildContext context) {
  return const MaterialApp(

"오류 발생 시 보통 const를 지우면 오류가 해결된다"고 배웠는데, 그 이유가 뭘까?

---

이유 1. ❌ 내부에 const 불가능한 속성이 있을 때

const MaterialApp(
  title: 'My App',
  home: MyHomePage(), // ❌ 이게 문제일 수 있음
)

MyHomePage()가 const가 아닌데, 전체 MaterialApp을 const로 만들었기 때문이다.

 ❗ 에러: "The constructor being called isn't a const constructor."
✅ 해결: const를 지우면 home이 const가 아니어도 OK!

---

이유 2. ❌ const로 선언했는데 바뀌는 값을 넣었을 때

const MaterialApp(
  theme: ThemeData(primarySwatch: Colors.blue), // 이게 const 아님
)

ThemeData(...)도 기본적으로 const가 아니기 때문에, const로 만들면 에러가 난다.

✅ 해결: const를 지우면 theme가 const가 아니어도 OK!

---

상황	설명
const를 쓰면	내부에 있는 모든 값도 const
내부 값이 const가 아니면	❌ 에러 발생
const를 지우면	내부 위젯이 변해도 되니까 에러 없음

---

🎯 언제 const를 써야 할까?
값이나 UI가 고정일 때, 변하지 않는 위젯일 때 const를 쓰면 성능에 좋다.

const Text('고정 텍스트') // 👍

Text(DateTime.now().toString()) // ❌ const 못 씀

---

✏️ constructor

용어	의미
const	변하지 않는 객체를 생성할 때 사용하는 키워드
const constructor	그 객체를 만들기 위해 사용하는 생성자 함수가 const로 선언된 경우

--
1️⃣ const constructor 정의

class MyBox extends StatelessWidget {
  const MyBox({super.key}); // const constructor
//
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, width: 100, height: 100);
  }
}

2️⃣ const로 객체 생성

const MyBox() // const constructor로 const 사용 가능!

❌ const를 쓰려면 클래스에 const constructor가 정의되어야하며, 그렇지 않으면 MyWidget() 이렇게 써야 하고, 최적화는 안된다.

---

✏️ factory constructor

• const constructor - 불변 객체 만들 수 있는 일반 생성자
• factory constructor - 객체를 만들 때 직접 생성하지 않고, 조건에 따라 기존 걸 재사용하거나 다른 방식으로 생성하는 생성자
• 그걸 const로 만들면? 👉 const factory constructor

---

✅ 보통 const 생성자는 단순하게 객체만 만들고 끝인데, factory는 같은 값을 가진 객체는 한 번만 만들고 계속 재사용하게 한다거나, 내부에서 캐싱을 해주는 식이다.

class ColorBox {
  final int color;
  static final Map<int, ColorBox> _cache = {}; // 만든 객체를 캐시로 저장해두기 위한 Map
//
  const ColorBox._internal(this.color); // 진짜 const 생성자
  //
  factory const ColorBox(int color) {
    return _cache.putIfAbsent(color, () => ColorBox._internal(color));
  } // factory constructor
}

✅ 외부에서 const ColorBox(0xFF0000) 이렇게 호출하면 내부에서 이미 만들어둔 값이 있으면 그걸 재사용하고, 없으면 새로 만들고 저장한다.

---

✏️ const vs final

키워드	언제 고정됨?	예시	특징
final	런타임에 결정	final name = getName(); // 실행 중에 결정	한 번만 설정 가능하지만 나중에 값 정해져도 OK
const	컴파일 타임에 고정	const age = 20; // 코드 작성할 때부터 고정	아예 코드에 써있을 때부터 영원히 안 변함

---

⚡ 예제 비교

final now = DateTime.now(); // ✅ 가능 – 실행될 때 값이 정해짐
const now = DateTime.now(); // ❌ 오류 – 컴파일 타임엔 알 수 없음

---

⚡ 코드에서

class MyWidget extends StatelessWidget {
  final String title; // ✅ 이건 외부에서 값 받을 수 있어
//
  const MyWidget({super.key, required this.title}); // ✅ const 생성자 가능!
}

✔ title은 final이지만 const 아님 → 한 번 정해지면 끝
✔ 생성자는 const로 만들어서 → 불변 위젯 만들 수 있음

---

구분	final	const
수정 가능?	❌ (한 번만 할당 가능)	❌ (영원히 고정)
값이 정해지는 시점	런타임	컴파일 타임
객체 생성에 사용 가능?	O	O, 단 내부 값도 모두 const여야 함
위젯에서 주로 쓰이는 곳	클래스 필드	불변 위젯, 스타일 값 등

---

💡 팁
final → 변경 불가한 필드 (주입받은 값 등)
const → 절대 바뀌지 않는 위젯 or 값

---

💭 const 특징을 보니 statelessWidget과 statefulWidget이랑 비슷하다는 느낌이 들어서 두 연관성이 있나 궁금해졌다.

---

✏️ Stateless, Stateful

개념	const vs non-const	Stateless vs Stateful
기준	값이 바뀌는가?	UI가 바뀌는가?
고정된 것	const → 절대 안 바뀜	StatelessWidget → UI가 고정
유동적인 것	non-const → 언제든 바뀔 수 있음	StatefulWidget → setState로 UI 변경 가능
최적화	const는 재사용 가능, 성능 향상	Stateless는 상태 없음, 재빌드도 가벼움

---

✔ const 위젯은 성능상 유리(재사용됨)
✔ StatelessWidget 에서 const 생성자 많이 사용
✔ StatefulWidget 도 생성자는 const일 수 있음(위젯 자체는 불변, 상태만 변함)

🔍 "불변성"이라는 공통 철학은 있지만, const는 메모리/성능 최적화, Stateless는 UI 패턴의 차이다.

---

🔥 Widget 재사용 최적화

🚀 모든 UI를 위젯으로 구성하고, 상태가 바뀔 때마다 build 함수가 호출되며 위젯이 다시 그려지는 구조이다.

🥽 똑같은 걸 매번 새로 만들면 성능이 떨어지기 때문에, 재사용 가능한 위젯을 만들고, 효율적으로 관리하는 게 중요하다.

---

✏️ 재사용 코드

✅ 재사용을 잘하는 코드

const Text('Hello') // ✅ const니까 재사용됨 (build마다 새로 안 만들어도 됨)

✔ 컴파일 타임에 메모리에 딱 한 번 만들어져서 계속 씀
✔ 상태가 바뀌어도 이 위젯은 다시 만들지 않음

---

❌ 재사용 안 되는 코드

  Text('Hello') // ❌ const 안 붙였기 때문에 build 때마다 새로 생성됨

✖ 외형은 같아 보여도 매번 새 인스턴스 → 비교 못 하고 다시 그림

---

💡 재사용 최적화 팁 정리

항목	설명	예시
✅ const 위젯 사용	불변 위젯을 미리 만들어 재사용	const Text('확정')
✅ 위젯 분리	큰 위젯을 쪼개서 상태 변경 범위 최소화	MyButtonWidget() 따로 분리
✅ ListView.builder	리스트 위젯 재사용 최적화 자동 지원	스크롤 가능한 긴 리스트
✅ keys 활용	위젯 간 변경 추적을 명확히	Key, ValueKey 등
✅ const constructor 정의	커스텀 위젯도 재사용 가능하게	const MyWidget()

---

❌ 성능 안 좋은 예

항목	문제	예시
❌ const 없이 반복 위젯 생성	매번 새로 그려짐	Text('반복') in for
❌ build에 변수형 위젯	상태 바뀔 때마다 새로 생성됨	Text(DateTime.now())
❌ Stateless인데 setState처럼 사용	rebuild가 의미 없음	StatelessWidget 안에서 동적 처리

---

⚡ 정리

🔹 const constructor vs const 사용

구분	🧱 const constructor	🛠️ const 사용
정의 위치	클래스 정의부 (생성자에 붙임)	객체 생성 시 (const MyWidget())
역할	이 클래스는 const 인스턴스 만들 수 있음	이 인스턴스를 불변으로 만들겠다는 뜻
전제 조건	내부 필드도 모두 final이어야 함	생성자가 const로 선언돼 있어야 함
예시	const MyWidget({super.key})	const MyWidget()

---

🔹 const factory constructor

항목	설명
의미	const + factory → 생성 최적화 + 캐싱까지 포함
목적	같은 값이면 객체 재사용 (중복 생성을 막고 메모리 절약)
내부 구현 방식	Map 등을 활용해 캐시 저장
예시	const ColorBox(0xFF0000) → 내부에서 캐시된 객체 반환

---

🔹 const vs final 차이

구분	final	const
의미	한 번만 값을 정하면 변경 불가	처음부터 변하지 않는 상수
🕒 결정시점	런타임 중	컴파일 타임
🔄 재할당	❌ 불가	❌ 불가
예시	final name = getName();	const age = 20;
위젯 예	final String title;	const Text('고정 텍스트')
✏️ 특징	외부에서 주입받을 때 유용	위젯 재사용과 최적화에 유리

---

🔸 Widget 재사용 최적화 팁

✅ 하면 좋은 것	❌ 피해야 할 것
const 위젯 적극 사용	const 없이 매번 새 위젯 만들기
위젯 분리 (MyButtonWidget())	커다란 build 함수에 다 때려넣기
ListView.builder 사용	리스트 직접 반복문으로 생성 (for 문 등)
keys로 변경 추적 관리	key 없이 동적 리스트 다루기

---

🚀 학습 리스트

---

🎓 학습 완료 리스트

✅ const, final, 생성자 구조 이해 🔍

✅ 위젯 재사용 최적화 개념 🎯

✅ Flutter 문법의 핵심 중 위젯 구조와 렌더링 성능 파악 완료

---

🔸 다음 학습 주제 리스트

1️⃣ Widget Lifecycle(생명주기)

StatefulWidget이 언제 initState, build, dispose 되는지 이해하기
왜? → 상태 변화가 많은 앱에서 리소스를 효율적으로 다루려면 꼭 필요하다.

추천 키워드: initState(), didUpdateWidget(), dispose()

---

2️⃣ State 관리 기초

setState로 관리하던 상태를 조금 더 체계적으로 다루는 법

setState() 이해
부모-자식 위젯 간 데이터 전달(props, callback)

이후:
Provider, Riverpod, Bloc 같은 고급 상태관리로 이어가기

---

3️⃣ 레이아웃 마스터하기
Expanded, Flexible, Spacer, Align, Stack, Positioned 같은 위젯

레이아웃이 망가지는 이유를 알게 되고, “UI” 만들기 위한 레이아웃 설계 감각 키우기.

---

4️⃣ Navigator & Routing(페이지 전환)
여러 화면을 이동하고, 뒤로가기, 인자 전달 등

Navigator 1.0 vs 2.0 차이
push, pop, pushReplacement, popUntil
Route에 데이터 전달하는 법

---

5️⃣ 실전 앱 프로젝트 해보기
지금까지 배운 것들을 한 번 써보면서 통합 복습

앱 아이디어:
TODO 앱
간단한 타이머 앱
간단한 뉴스 뷰어 or 날씨 앱

---

💻 맥 환경에서는 다른 오류가 발생하기도 하고, 기존 윈도우 환경만으로는 호환성 문제가 있기 때문에 우선 맥북을 병행하며 학습하는게 좋을 것 같다.

기기 신청을 해서 문제가 없으면, 다음주 중에 수령해서 맥 개발 환경 세팅을 해야될 것 같다.

---

🌱 오늘의 공부는 끝이 없었던 것 같다..

const를 지우면 왜 오류나는지 궁금
> stateless statful이랑 비슷한거 같음
> 근데 const constructor는 뭔지도 궁금
> factory factory constructor도 있다고 함
> const랑 final 차이가 뭔지 알고 싶음
> ....

이런 식으로 호기심과.. 궁금증이 가득한 무한의 굴레에 빠져 정작 다른 위젯 공부는 못했던 것 같다. 궁금증이 해소되어서 좋긴한데 내용이 많아서 완벽하게 기억하거나 떠올리지는 못할 것 같지만, 우선 이해는 어느정도 되어서 만족스럽다.