[플러터] BuildContext 완전정복하기

 BuildContext 완전정복하기 - 위젯의 위치를 알려주는 Flutter의 핵심 개념, 쉽게 이해해보세요

Flutter를 배우다 보면 BuildContext라는 단어를 정말 자주 보게 됩니다.
처음에는 대체 이게 뭘까 싶고, 막상 써보려면 헷갈리는 부분도 많으실 텐데요.
이번 글에서는 BuildContext가 무엇인지, 왜 중요한지, 어떻게 활용해야 하는지
진짜 쉽게 알려드릴게요 😊

---

🧩 BuildContext란 무엇인가요?

간단히 말하면, Flutter 위젯 트리에서 현재 위젯의 위치 정보를 담고 있는 객체예요.

좀 더 쉽게 말해볼까요?

BuildContext는 위젯의 “주소”라고 생각하시면 됩니다.

Flutter는 모든 UI를 트리 구조로 구성해요.
각 위젯은 부모-자식 관계 속에서 자신의 위치가 정해지는데,
이 위치 정보를 가지고 있어야 상위 위젯의 데이터나 설정값을 참조할 수 있겠죠?
그 역할을 바로 BuildContext가 해주는 겁니다!

---

🏡 예를 들어 볼게요

아파트에 사는 사람을 생각해볼까요?
어느 동, 몇 호에 사는지를 알아야 관리실에 전화도 하고, 택배도 받을 수 있죠.
이때 주소가 바로 BuildContext예요.

그래서 우리가 위젯 내부에서 뭔가 요청할 때 이렇게 쓰는 거죠:

Theme.of(context)
MediaQuery.of(context)
Navigator.of(context)

위 코드들처럼 context를 통해 조상 위젯에게 필요한 정보를 요청하는 방식입니다.

---

🧭 실제 사용 예시

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Context 예시")),
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          final size = MediaQuery.of(context).size;
          print("화면 크기: $size");
        },
        child: Text("화면 크기 확인"),
      ),
    ),
  );
}

위 코드를 보면 MediaQuery.of(context).size를 통해
현재 화면의 크기 정보를 얻고 있어요.
이렇게 context는 현재 위젯이 어느 위치에 있는지를 알려줘서
그 위치를 기준으로 정보를 찾아갈 수 있도록 도와주는 거랍니다.

---

❗ 꼭 알아두셔야 할 점

BuildContext는 언제나 쓸 수 있는 건 아니에요!
너무 이른 타이밍에 사용하면 오류가 날 수 있습니다.

예를 들어 initState()에서는 아직 위젯이 완전히 트리에 올라가지 않은 상태라서
context를 제대로 사용할 수 없어요.

이럴 땐 보통 didChangeDependencies()나 build() 안에서 사용하시는 게 좋아요.

---

✅ BuildContext의 요약 정리

---

💬 마무리하며

처음엔 어렵게만 느껴지는 BuildContext,
이해하고 나면 정말 강력하고 유용한 도구예요.

Flutter는 위젯이 중심인 프레임워크이기 때문에
이처럼 위젯의 위치를 다루는 개념을 잘 이해하는 것이
더 복잡한 앱을 만들 때 큰 도움이 됩니다.

다음번에는 Navigator와 context를 활용한 화면 이동도 다뤄볼게요!
궁금한 부분 있으시면 댓글이나 메일로 언제든지 물어보셔도 좋습니다 😊

---

💬 부록 : .of(context) 생성자에 관하여

오늘의 부록 플러터(Flutter)의 .of(context) 생성자에 관해 이야기입니다.

of(context)로 정의된 모든 생성자는 일반적으로 BuildContext를 매개변수로 받고 위젯 트리(widget tree)에서 가장 가까이에 있는 객체의 값을 찾아냅니다. 

결과적으로 MediaQuery.of(context)는 현재 위젯 트리에서 가장 가까이에 있는 객체의 값을 찾아냅니다. 

앱이 실행되면 MaterialApp이 빌드됨과 동시에 MediaQuery가 생성됩니다. 위젯 트리 아래에서 MediaQuery.of(context)를 실행하면 위젯 트리를 올라가며 가장 가까운 곳에 위치한 MediaQuery 값을 가져옵니다.

비슷한 예제로는 Theme.of(context)나 Navigator.fo(context) 등이 있습니다.