Flutter :: BuildContext 무엇인가?

HaeDaal·2021년 7월 27일
2

Flutter:: BuildContext

목록 보기
1/1

Flutter 를 사용하게 되면 굉장히 자주 마주치는 것이 하나 있다.
그것은 바로 ...

BuildContext

처음에는 개발하기 바빠서 이것에 대한 정확한 개념도 모른체 라이브러리, api 설명서에 나와있는 그대로 따라쓰기만 했다.
그러나 개발하면 개발할수록 이게 굉장히 중요한것 같다는 느낌을 받았고... buildcontext에 대해 제대로 이해하지 못하고 넘어간다면
Flutter 전문가? 가 되기 위해 나아가는 과정에서 기초 공사부터 부실하게 되는것이라는 생각이 들었다.

그래서 이 글을 통해 BuildContext가 무엇인지 정리하는 시간을 갖고자 한다.


그래서 BuildContext가 뭐죵?

먼저 겉핥기 수준으로 알아보자.

Flutter 공식 문서를 통해 정의를 살펴보면

A handle to the location of a widget in the widget tree.
위젯 트리에서 위젯의 위치를 다루는 것.

라고 한다.
...
...
정리 끝.

이라 하면 열받는다.

이걸로는 쉽게 이해가 되지 않는다.

먼저 알아야 할 것은 Flutter 안에 모든 Widget은 내부에
build method를 가지고 있다는 것이다.
그리고 그 build method 의 타입은 Widget이고 인자 값으로 BuildContext를 가진다.

Widget build(BuildContext context){
  // example ...
  return Scaffold(...) <- widget
}

build 메소드를 통해서 위젯을 반환하고 그 안에 buildcontext를 집어넣는다.

그 다음 중요한 buildcontext의 두번째 개념이 등장한다.

Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function
모든 위젯은 자신만의 BuildContext를 가지고 있고, 그것은 StatelessWidget.build or State.build에 의해 반환되는 위젯의 부모가 된다.

이것이 의미하는것이 무엇인지 예제를 통해 보자.

class MainPage extends stateless{
  
  Widget build(BuildContext context){
    return Scaffold(
      appBar: ...(),
      body : Center(
      	child: RaisedButton(
          onPress : () {
          // 여기서 Snackbar 라던가 dialog를 다뤄야한다
          // 면 Scaffold의 context 가 필요하다. 그래서 일반
          // 적으로 생각하면 MainPage의 build 에서 넘어온 
          // context 를 접근하면 된다고 생각하기 쉽다.
          // 그러나 그렇게 하게 되면 
          // Scaffold.of() called with a context
          // that does not contain a scaffold. 와 같은 
          // 에러 메시지를 보게 될 것이다.
          
          },
          child: Text('Press'),
        )
      )
    )
  }

}

왜 위 예제와 같은 상황이 벌어지는 것일까?
그것은 buildcontext의 두번째 개념을 생각해보면 해결이 된다.
두번째 개념을 통해 보면 build 메소드의 인자값에 있는 context는 return 되는 scaffold 의 부모의 context이다.

부모의 context에는 부모 위젯까지의 정보 밖에 없다.
즉 build 메소드를 통해 return 되는 위젯의 정보는 없는 것.

그렇기 때문에 이 build 메소드의 context에서 scaffold의 대한 context 정보를 찾지 못하는 것이다.

그래서 예제의 에러가 발생하는 것. 이것을 해결하기 위해서는 (무조건 새로운 context를 만들어 사용하는) builder 위젯을 사용하거나 scaffold의 context 정보를 받기 위해 별개로 분리해서 자식 위젯을 만들어 보내는 방법이 있다.


일차적으로 정리하자면...

  • BuildContext는 위젯의 정보를 가지고 있는것이며,
  • build 메소드에 의해 전해지는 context는 부모 위젯까지의 정보만을 가지고 있다.

이번에는 간단하게 여기까지만 정리하고,
다음 포스팅에는 BuildContext가 뭔지 조금 더 자세히 살펴보겠다.
그와 더불어 widget tree, element tree, render tree 까지..!

profile
해달 귀엽다.

2개의 댓글

comment-user-thumbnail
2022년 9월 20일

설명 도움되었습니다.

답글 달기
comment-user-thumbnail
2023년 7월 10일

더 자세 살펴보신다면서요 ㅠㅠ 왜 다음글 없죠?ㅠㅠ

답글 달기