[Flutter] Extends, Override, build, BuildContext에 대해 알아보기

VS Code에서 stateless widget을 생성하고, 클래스 이름을 App1이라고 지으면 아래와 같은 모습이 된다.

 

지금까지는 생각 없이 생성해 왔지만 이것을 이해해 보자. 

class App1 extends StatelessWidget {
  const App1({ Key? key }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

1. Line1의 extends

class App1 extends StatelessWidget {

extends 키워드는 부모 클래스로부터 상속을 받을 때 사용한다. 플러터 내의 모든 위젯은 Stateless Widget과 Stateful Widget을 상속받게 되는데, App1이라는 클래스는 플러터 내의 StatelessWidget이라는 클래스로부터 상속을 받는다는 것을 뜻한다.

 

2. Line2의 Key

  const App1({ Key? key }) : super(key: key);

Key는 위젯의 State(UI가 변경되도록 영향을 미치는 데이터)를 보존하고, 위젯이나 요소들을 유니크하게 식별할 수 있게 해 준다. 위젯들의 순서가 바뀌어도 이를 추적해서 고유한 개체로 플러터가 인식할 수 있도록 함. key는 다섯 가지 종류가 있음

1. Global key

2. Value key

3. Unique key

4. Object key

5. Page storage key

 

사용 빈도가 높은 것은 Global key와 Vlaue key임

 

3. Line3의 @Override, 

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

자식 클래스에서 부모 클래스의 함수를 재정의하는 것을 의미함. App1이라는 클래스의 부모 클래스에 build라는 함수가 정의되어 있는 것이고, App1클래스에서 build함수를 새로 정의할 필요 없이 부모 클래스의 것을 상속받아 사용하는 것이다. 

 

4. Line4의 build 함수

플러터 안에 모든 Widget은 내부에 build 메서드를 가지고 있다. build 메서드의 타입은 Widget이고, 인자 값으로 BuildContext를 가진다. BuildContext는 이 위젯이 위젯트리 내에서 어디에 위치하는지에 대한 정보를 담고 있다

 

풀어서 설명하면, Widget타입의 메서드인 build는 BuildContext인자 값을 가지고, 위에서는 context가 대입되어 있다. 그 아래에서 리턴된 Container위젯은 build메서드의 context를 그대로 물려받게 된다.

 

모든 위젯은 자신만의 BuildContext를 가지고 있고, 그것은 StatelessWidget.build 또는.State.build에 의해 반환되는 위젯의 부모가 된다.