🐦 Flutter Routes & Lifecycle 정리

---

📱 [ Flutter 기본 개념 ]

Flutter는 위젯 기반의 선언형 UI 프레임워크로,
페이지 이동과 상태 관리를 명확하게 구분하여 처리한다.

---

🧭 [ Routes (라우트) ]

• Flutter에서 페이지 전환을 담당하는 속성
• 각 경로(key)에 해당 위젯(value)을 연결하는 Map 구조로 구성된다.

📘 예시 코드

routes: {
  "/" : (context) => Home(),
  "/detail" : (context) => Detail(),
}

💡 initialRoute 속성을 추가하면 앱이 실행될 때 기본 페이지를 지정할 수 있다.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/" : (context) => Home(),
    "/detail" : (context) => Detail(),
  },
);

---

🔄 [ 위젯 생명주기 (Lifecycle) ]

Flutter의 StatefulWidget은 React의 Hook(useEffect, useState)과 유사하게
컴포넌트의 생성, 변경, 종료 시점을 관리할 수 있다.

함수	실행 시점	설명
initState()	위젯이 최초로 생성될 때 1회 실행	초기 데이터 로딩 시 사용
didChangeDependencies()	부모 위젯으로부터 매개변수를 받을 때 실행	ModalRoute.of(context) 사용
dispose()	위젯이 사라질 때 실행	리소스 해제 및 메모리 정리

📘 예시 코드

@override
void initState() {
  super.initState();
  print("위젯 최초 1회 실행");
}

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final data = ModalRoute.of(context)!.settings.arguments as String;
  print("부모 위젯으로부터 받은 값: $data");
}

@override
void dispose() {
  print("위젯 종료");
  super.dispose();
}

💡 initState()는 React의 useEffect(()=>{}, [])와 유사하다.

---

🧩 [ Expanded ]

• 부모 Column 또는 Row 내에서 공간을 유연하게 확장하는 위젯
• 화면 비율 조정을 통해 스크롤 가능한 영역이나 리스트를 관리할 때 사용된다.

📘 예시 코드

Column(
  children: [
    Expanded(
      child: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(title: Text("아이템 $index"));
        },
      ),
    ),
  ],
);

🧠 Tip: Expanded는 flex 속성을 이용하여 비율 조정이 가능하다.
예: Expanded(flex: 2, child: ...) → 다른 요소보다 2배 크기.

---

🔁 [ map()과 dynamic 타입 ]

• Dart의 map() 함수는 dynamic 타입을 지원하지 않는다.
• 따라서 반드시 .toList()로 변환해야 한다.

📘 예시 코드

todoList.map((todo) {
  return Text(todo);
}).toList();

⚠️ .toList()를 붙이지 않으면 Flutter 위젯 트리 내에서 렌더링 오류가 발생할 수 있다.

---

🚀 [ 위젯 간 매개변수 전달 ]

• Flutter에서는 Navigator를 이용해 페이지 간 데이터를 전달한다.

📦 데이터 전달

Navigator.pushNamed(
  context,
  "/detail",
  arguments: "전달할 데이터",
);

📥 데이터 수신

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final data = ModalRoute.of(context)!.settings.arguments as String;
  print("전달받은 데이터: $data");
}

💡 ModalRoute.of(context)는 현재 경로(Route)에 전달된 인자를 가져온다.

---