Context 란 (BuildContext 원리)

Context의 의미

1. A handle to the location of a widget in the widget tree

• widget tree에서 현재 widget의 위치를 알 수 있는 정보
• 모든 widget은 build 함수를 가지고 있으며, 이를 통해 계층 구조를 만들어 나감

 

2. Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build funciton

• 모든 Widget은 BuildContext를 가지는데, 이 BuildContext는 stateless 위젯이나 state 빌드 메서드에 의해서 리턴된 위젯의 부모가 된다.
  • MyPage라는 위젯 : 자신만의 BuildContext의 context를 가지고, 이 곳에서 build 메서드를 통해 scaffold 위젯을 리턴하고, scaffold 위젯은 부모인 MyPage의 context를 그대로 물려받게 된다는 의미
  • Scaffold Widget의 위치를 찾으려면, return된 해당 위젯의 부모 context 찾기! (즉, MyPage Widget의 BuildContext)
  • BuildContext와 Context의 차이 : context는 BuildContext Class의 인스턴스 (즉, context 이름 변경해도 아무 문제 없음)

 

 

스낵바와 BuildContext

• Something.of(context)method
  • of : 현재 주어진 context에서 위로 올라가면서 가장 가까운 Something를 찾아서 반환하라는 의미
  • 즉 Something.of(context) : 부모 Context의 위로 거슬러 올라가서 가장 가까운 Something 을 찾아서 반환하라
  • 예시 : Scaffold.of(context) : 현재 주어진 context에서 위로 올라가면서 가장 가까운 Something를 찾아서 반환
• Scaffold.of(context).showSnackBar(SnackBar())

• Builder Widget
  • 새로운 context로, 새로운 widget을 만들라는 의미. 즉, Scaffold.of(context)가 MyPage context가 아니라 Builder 위젯의 context를 사용하게 만드는 것

 

요약
1. context 의미
- context는 widget tree에서 현재 widget의 위치를 알 수 있는 정보
- context란 BuildContext Class의 인스턴스라고 볼 수 있음 (BuildContext와 Context의 차이)

2. BuildContext 의미
- 모든 widget은 BuildContext를 가지며, 이 Buildcontext는 build 메서드를 통해 리턴된 위젯의 부모가 된다.
(예시 : MyPage라는 최상위 위젯은 자신만의 BuildContext의 context를 가지고, build 메서드를 통해 scaffold 위젯을 리턴하는 경우, scaffold 위젯은 부모인 MyPage의 context를 그대로 물려받게 된다는 의미)

[StatelessWidget 코드 분석(타고 들어가기)]
- StatelessWidget → createElement() → Element 생성 → Element = (implements) BuildContext
- Widgets describe how to configure a subtree (위젯은 설정값을 가지고), Element represents the use of widget of a widget to configure a specific location (Element는 위치값을 가짐)
- 즉, BuildContext는 widget이 widget tree에서 어디에 위치하고 있는지의 위치값을 가지고 있다고 할 수 있음

 

 

작년에는 widget, context 등 의미를 분석하지 않고, 작동이 되는대로 flutter로 코딩을 하였는데, 현재 플러터를 다시 만져보면서 하나하나 뜯어보며 의미를 익혀가고 있다. 1년차, 2년차가 될 수록 코드와 프레임워크에 대한 이해도가 조금씩은 향상되는 것을 느끼고 있다. 앞으로도 의미 분석을 통해 좀 더 효율적인 코드를 짜기 위해 노력해야지.

그리고 개인적으로, 코딩셰프, 코딩파파 등 플러터에 대한 전반적인 이해를 다뤄주시는 유튜버님들 정말 감사드린다.

 

 

참고

https://www.youtube.com/watch?v=o-HpnWhI70U&t=177s

https://www.youtube.com/watch?v=-zxGPfjiQQA

https://www.youtube.com/watch?v=7BAkxwiFzHw

https://velog.io/@lovejaeeundev/%EA%B7%B8-%EB%86%88%EC%9D%98-BuildContext-context-in-Flutter