Flutter - Build Context란?

flutter 를 이용해 개발하면서 특이했던 Context에 대해 알아보고자 합니다.

 

class Exmple extends StatelessWidget {
const Exmple({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Container();
  }
}

 

처음 위젯을 만들면 이렇게 Widget Build에 context가 매개변수가 들어가게 됩니다. 

 

이 context는 위젯 트리에서 위젯의 위치에 대한 정보를 갖고 있습니다.

위젯이 트리 구조로 이루어져 있기 때문에, 자식 위젯에서 부모 위젯까지 찾아오기 쉽습니다.

 

그리고 주의할 점은 BuildContext 인스턴스를 저장하면 안됩니다.

위젯이 트리에서 언 마운트되면 무효화가 된다고 합니다.

 

BuildContext가 비동기 작업을 진행하게 되면 Context와 상호작용하기 전에 Mounted를 확인해서 여전히 유효한지 확인하는게 좋다고 하네요.

 

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () async {
        await Future<void>.delayed(const Duration(seconds: 1));
        if (context.mounted) {
          Navigator.of(context).pop();
        }
      },
      child: const Text('Delayed pop'),
    );
  }

 

이렇게 말이죠.

 

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

BuildContext class - widgets library - Dart API

 

여기에 있는 내용을 알려드린건데, 이 사이트에서

"BuildContext objects are actually Element objects." 라고 합니다.

 

Element에 대해 궁금해 다시 한번 찾아보았습니다.

 

Element 클래스는 Flutter의 위젯 트리에서 각 위젯의 실제 인스턴스를 나타내는 클래스라고 합니다.

이를 통해 Flutter는 위젯 트리를 관리하고, 업데이트하며, 렌더링을 최적화할 수 있다고 해요.

 

각 Element는 부모와 자식의 관계를 가져서

Flutter는 재귀적으로 Element를 탐색하여 트리를 업데이트하고 다시 그려야 할 부분만 효율적으로 렌더링한다고 합니다.

 

이렇게 찾아보니 선언형 프로그래밍은 주로 트리 구조와 비슷한 느낌으로 사용하는 것 같네요.

부모와 자식, 그 자식의 자식.... 자식의 자식... 

 

다음에는 Flutter의 상태관리에 대해 알아보도록 하겠습니다 :)