Context 정리 중 (Navigator를 곁들여)

코드팩토리
[2024 최신][코드팩토리] [초급]
Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! 101강 중
context 강의 정리

1. StatelessWidget에서의 context

StatelessWidget은 상태를 갖지 않는 위젯입니다. 이 위젯에서는 context를 전역적으로(클래스의 어디서나) 접근할 수 없습니다.

예를 들어, build 함수 내에서는 context를 쓸 수 있지만, 클래스의 다른 함수에서는 context를 직접 사용할 수 없습니다. 그래서 만약 다른 함수에서 context가 필요하다면, 그 함수에 context를 매개변수로 전달해줘야 합니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 여기서 context 사용 가능
        _navigateToNextScreen(context); 
      },
      child: Text("Go to Next Screen"),
    );
  }

  void _navigateToNextScreen(BuildContext context) {
    // 이 함수에서는 context를 직접 쓸 수 없으므로,
    // build 함수에서 context를 넘겨줘야 한다.
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => NextScreen()),
    );
  }
}

• 여기서 _navigateToNextScreen 함수는 클래스 내부의 다른 함수이기 때문에,
  context를 직접 접근할 수 없고, build 함수에서 context를 넘겨줘야 합니다.

• 만약 context를 넘겨주지 않으면,
  Navigator는 현재 위젯이 어느 트리에 속해 있는지 모르기 때문에, 어느 위치에서 화면을 전환해야 하는지 파악할 수 없습니다.
  (Navigator는 새로운 화면을 여는 작업을 할 때, 현재 위젯이 어디에 위치하는지 알아야 합니다. 그래서 Navigator는 context를 통해 위젯 트리의 위치 정보를 얻고, 화면 전환을 할 수 있습니다.)

2. StatefulWidget에서의 context

StatefulWidget은 상태를 가지고 있으며,
이 경우 클래스 내부에서 전역적으로 context를 바로 사용할 수 있습니다.

StatefulWidget에서는 context가 이미 클래스 내부에서 접근 가능하기 때문에, 함수에 따로 context를 전달할 필요가 없습니다. Navigator.of(context)처럼 그냥 직접 사용하면 됩니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 이 함수에서는 context를 직접 쓸 수 있다.
        _navigateToNextScreen(); // context를 넘길 필요 없음
      },
      child: Text("Go to Next Screen"),
    );
  }

  void _navigateToNextScreen() {
    // StatefulWidget에서는 context를 전역적으로 사용할 수 있음
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => NextScreen()),
    );
  }
}

여기서는 context를 따로 넘겨주지 않고, 클래스 내에서 직접 Navigator.of(context)처럼 context를 사용할 수 있습니다.

BuildContext 와 context 이해

• BuildContext:
  BuildContext는 클래스입니다. 정확히 말하면, Flutter에서 정의된 객체 타입입니다. "객체"나 "클래스"라고 부를 수 있습니다.

• context:
  context는 변수입니다. BuildContext 타입의 변수로, 위젯 트리의 위치 정보를 가지고 있습니다. "변수" 또는 "매개변수"라고 부를 수 있습니다.

• 정리
  BuildContext는 Flutter에서 미리 정의된 클래스이고, 위젯 트리에서 현재 위젯의 위치를 설명하는 객체입니다. 이 객체는 위젯 트리 구조에서 부모, 자식 위젯과의 관계나 위치 정보를 포함합니다.
  context는 BuildContext 타입의 변수로, Flutter는 위젯을 그릴 때 각 위젯의 BuildContext 객체를 context라는 변수에 담아 전달합니다. 이를 통해 현재 위젯이 위젯 트리에서 어디에 위치해 있는지 정보를 사용할 수 있습니다.