[Flutter] BuildContext란? Widget이란?

안드로이드에 Context가 있듯 플러터에도 BuildContext라는 게 있다. 이걸 설명하는 공식문서 내용은 아래와 같다.

 

https://api.flutter.dev/flutter/widgets/BuildContext-class.html

BuildContext class - widgets library - Dart API

위젯 트리에서 위젯 위치에 대한 핸들. 이 클래스는 StatelessWidget.build()와 State 객체의 메서드에서 쓸 수 있는 메서드 집합을 제공한다. BuildContext 객체는 WidgetBuilder 함수(ex : StatelessWidget.build())에 전달되며 State.context 멤버에서 쓸 수 있다. 일부 정적 함수(showDialog, Theme.of 등)도 호출 위젯을 대신해 작동하거나 특정 컨텍스트에 대한 데이터를 얻을 수 있도록 BuildContext를 쓴다. 각 위젯에는 StatelessWidget.build() 또는 State.build()에서 반환된 위젯의 부모가 되는 자체 BuildContext가 있다. 마찬가지로 RenderObjectWidgets에 대한 모든 자식의 부모다. 특히 이는 build() 안에서 build() 위젯의 BuildContext가 해당 build()에서 반환된 위젯의 BuildContext에서 가장 가까운 테마를 찾는다. 위젯 Q에 대한 build()가 반환된 위젯 트리 내에 대한 테마를 포함하고 자체 컨텍스트를 전달하는 Theme.of를 사용하려고 시도하는 경우 Q에 대한 build()는 해당 테마 객체를 찾지 못한다. 대신 위젯 Q의 조상이었던 테마를 찾는다. 반환된 트리의 하위 부분에 대한 BuildContext가 필요한 경우 빌더 위젯을 사용할 수 있다. Builder.builder 콜백에 전달된 BuildContext는 빌더 자체다...(중략)...특정 위젯에 대한 BuildContext는 위젯이 트리 주위로 이동함에 따라, 시간이 지남에 따라 위치를 변경할 수 없다. 이 때문에 BuildContext 클래스의 메서드에서 반환된 값은 단일 동기 함수 실행 이상으로 캐시되선 안 된다

 

안드로이드의 Context도 무슨 말인지 모르겠지만 BuildContext도 잘 모르겠다. 정의가 잘 이해되지 않아서 일단 이게 왜 필요한지부터 찾아봤다.

 

https://www.educative.io/answers/what-is-buildcontext-in-flutter

What is BuildContext in Flutter?

플러터의 모든 것은 위젯이다. 컨테이너, 텍스트, 버튼, providers, 이미지 등 무엇이든 앱에 UI를 표시하는지에 상관없이 사실상 위젯이다. 플러터의 UI 또는 디스플레이는 일반적으로 위젯 트리라고 하는 위젯 스택으로 구성된다. 자바스크립트를 알거나 리액트 또는 앵귤러를 쓴 적이 있다면 이해할 것이다. 리액트에서 UI는 구성 요소 트리로 구성된다. 각 컴포넌트는 전체 UI의 작은 단위를 담당한다. 플러터에선 컴포넌트가 아니라 위젯이다. 위젯은 플러터에서 작은 단위를 담당한다.
SPA와 같이 위젯 트리에는 루트 위젯이 있다. 이것은 다른 위젯이 쌓이는 위젯이다. 즉 상위 위젯, 하위 위젯이 있다. 다른 위젯을 렌더링하는 위젯은 하위 위젯을 렌더링하는 상위 위젯이다...(중략)...BuildContext는 트리의 각 위젯을 추적하고 트리에서 위젯들의 위치를 찾는 데 사용되는 locator다. 각 위젯의 BuildContext는 해당 build()에 전달된다. build()는 위젯이 렌더링하는 위젯 트리를 리턴한다는 걸 기억하라. 각 BuildContext는 위젯에 고유하다. 이건 위젯의 BuildContext가 위젯에 의해 반환된 위젯의 BuildContext와 동일하지 않음을 의미한다...(중략)...

 

https://www.andolasoft.com/blog/buildcontext-in-flutter-and-its-importance.html

An Introduction To BuildContext In Flutter and It's Importance?

BuildContext는 현재 빌드에 대한 정보를 저장하는 객체다. 지원되는 최소 및 최대 플러터 버전, 기기 화면 크기 및 픽셀 밀도, 현재 활성화된 테마 등의 정보를 제공한다. BuildContext는 플러터가 위젯의 인스턴스를 생성하는 데 쓰이는 입력 집합이다. 여기엔 안드로이드와 iOS 플랫폼의 속성, 현재 장치 및 환경 관련 속성이 포함된다
위젯의 동작, 모양을 커스텀하는 데 사용할 수 있지만 문제를 방지하려면 작동 방식을 이해하는 게 중요하다...(중략)

 

자꾸 위젯이란 단어가 튀어나오는데 BuildContext를 이해하려면 이것 또한 이해가 필요한가 싶다.

플러터 공식문서에서 설명하는 Widget은 아래와 같다.

 

https://docs.flutter.dev/development/ui/widgets-intro

Introduction to widgets

플러터 위젯은 리액트에서 영감을 얻은 최신 프레임워크를 써서 구축됐다. 핵심 아이디어는 위젯에서 UI를 구축한다는 것이다. 위젯은 현재 구성(Configuration) 및 상태(State)에 따라 View가 어떻게 보여야 하는지 설명한다. 위젯의 상태가 바뀌면 위젯은 하나의 State에서 다음 State로 전환하기 위해 기본 렌더링 트리에서 필요최소한의 변경사항을 결정하기 위해, 프레임워크가 이전 설명(description)과 비교하는 설명을 다시 빌드한다

runApp()은 주어진 위젯을 가져와 위젯 트리의 루트로 만든다. 이 예에서 위젯 트리는 Center 위젯과 그 하위인 Text 위젯의 2가지 위젯으로 구성된다. 프레임워크는 루트 위젯이 화면을 덮게 강제한다. 즉 "Hello, World!" 텍스트가 화면 중앙에 표시된다. 이 경우 텍스트 방향을 지정해야 한다. MaterialApp 위젯이 사용되면 나중에 설명하는 것처럼 처리된다. 앱을 작성할 때 일반적으로 위젯이 상태를 관리하는지 여부에 따라 StatelessWidget 또는 StatefulWidget의 하위 클래스인 새 위젯을 작성한다
위젯의 주요 작업은 다른 하위 수준 위젯의 관점에서 위젯을 설명하는 build()를 구현하는 것이다. 프레임워크는 위젯의 geometry를 계산하고 설명하는 기본 RenderObject를 나타내는 위젯에서 프로세스가 끝날 때까지 해당 위젯을 차례로 빌드한다...(중략)

 

안드로이드의 뷰와 비슷한 것이라고 생각된다. 위젯이 상태를 관리하면 StatefulWidget, 관리하지 않으면 StatelessWidget으로 나눠지는 것 같다.

그 중 StatelessWidget은 맨 위의 문서에서 말하는 대로 BuildContext 객체의 WidgetBuilder()를 쓸 수 있다.

 

다른 글들도 비슷하게 써놔서 마무리한다. BuildContext를 정리하면 아래와 같다.

 

• Widget의 위치를 찾을 때 사용한다
• Widget A에 하위 Widget이 있다면, Widget A의 BuildContext는 하위 BuildContext의 상위 BuildContext가 된다. 즉 트리 구조다
• 2번째 특징 때문에 하위 BuildContext에서 조상(상위) Widget을 쉽게 찾을 수 있다
• 특정 Widget이 빌드되는 맥락(환경)이기도 하다
• Widget마다 고유하다
• 현재 빌드의 최소 / 최대 플러터 버전, 화면 크기 등의 정보를 제공한다

 

그리고 Widget은 정리하면 아래와 같다.

 

• 화면에서 뷰(텍스트, 이미지 등)가 어떻게 보여야 하는지 설명한다
• 상태를 관리하면 StatefulWidget, 관리하지 않으면 StatelessWidget으로 분류된다

 

위젯 트리는 플러터 소스코드를 트리 형태로 만들면 아래 이미지처럼 트리 형태로 구성할 수 있기 때문에 붙여진 이름이다.

부모-자식 관계를 연달아 갖는 위젯들이 중첩되서 앱을 구성하기 때문에 트리 형태로 도식화할 수 있는 거라고 생각된다.

 

 

참고한  사이트)

 

https://medium.com/flutter-community/widget-state-buildcontext-inheritedwidget-898d671b7956

Widget — State — BuildContext — InheritedWidget

 

https://medium.com/jay-tillu/4-what-is-widget-in-flutter-lets-clear-the-basics-first-82f501c8d0f0

4. What is Widget in flutter ? Let’s clear the basics first.

 

https://stackoverflow.com/questions/49100196/what-does-buildcontext-do-in-flutter

What does BuildContext do in Flutter?