[Flutter] Class와 Widget의 연관성

*유튜브 '코딩셰프'님의 강의를 들으면서 정리했습니다.

스마트폰으로 예를 들어보겠다. 스마트폰의 경우 똑같은 설계도와 부품에 근거해서 만들어진 수천만대의 각각의 스마트폰을 생산하지만 각각의 시리얼 넘버를 가지고 있을 것이다. 결국 하나의 같은 틀에서 찍어낸 스마트폰이지만 각각의 구별이 가능한 하나의 스마트폰으로 존재한다는 의미다. 이와 같이 부품과 기능을 정의해놓은 설계도면 같은 역할을 Dart에서는 'Class'가 한다.

Class는 어떤 객체에 대한 속성과 기능에 대한 정의가 들어가있어야한다. 또한 Class에 정의된 속성과 기능대로 만들어진 사물을 '인스턴스'라고 한다. 즉, 스마트폰 설계도면이 Class, 설계도대로 만들어진 스마트폰을 인스턴스라고 한다.

❗객체와 인스턴스는 다른 개념이다
객체: 클래스가 정의된 후 메모리상에 할당되었을 때 이를 객체라고 함
인스턴스: 클래스를 기반으로 생성되고, 클래스의 속성과 기능을 똑같이 가지고 있고 프로그래밍 상에서 사용되는 대상이다.

Dart언어를 연습하고 싶다면 https://dartpad.dev/ 해당 페이지를 통해 코드 작성이 가능하다.

참고로, class의 경우 객체의 속성과 기능의 정의를 담고 있지만 반드시 속성과 기능을 정의할 필요는 없다. 이제 Dart로 기본적인 class를 정의해보겠다.

class Person{
  String name = 'John';
  int age;
  String sex;
  //클래스에서 정의한 변수를 '멤버변수'라고 한다
}

void main(){
  Person p1 = new Person();
    //Person 클래스로 p1이라고 부르는 새로운 인스턴스를 생성함
    //p1은 Person 클래스가 모든 속성을 그대로 가지게 됨
    //클래스를 통해서 인스턴스를 무한정 생성할 수 있다.
  p1.age=30;
    //age라는 변수값으로 30이라는 숫자를 얻게됨
    //Person 클래스의 변수에 접근하려면 인스턴스 뒤에 '.'을 사용한다.
  print(p1.age); //30이 출력됨
}

클래스 내의 생성자 만들기

class Person{ 
  String name = 'John';
  int age;
  String sex;
}
addNumber(int num1, int num2){ //2개의 숫자를 입력 받아서
  return num1 + num2; //덧셈 연산으로 값을 반환함
}

void main(){
  Person p1 = new Person();
  p1.age=30;
  print(p1.age);
  
  addNumber(3,4);
  print(addNumber(3,4)); //7이 출력됨
}

dart는 타입 추론이 가능한데, 타입을 지정해주는게 좋다. 발생할 수 있는 오류를 방지하기위해서이다.

class Person{ 
  String name = 'John';
  int age;
  String sex;
}

Person(String name,int age,String sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
  //this.변수가 멤버변수라고 dart에게 알려줌
  
}

void main(){
  Person p1 = new Person('Tom',30,'male');
  Person p2 = new Person('Jane',27,'female');
  //같은 클래스를 통해서 생성된 두 개의 인스턴스지만 
  //p1과 p2는 생성자의 입력값에 따라서 다른 존재가 되었음

  print(p1.age); //30
  print(p2.age); //27
}

만약에 생성자의 argument가 10개,100개,,etc로 많다면?

class Person {
  String name;
  int age;
  String sex;

  // named argument
  // 생성자가 가지고 있는 arguments를 {}로 묶는다
  // argument는 이제 optional로 바껴서, 빈 값으로 만들어도 되고,
  // 순서도 전혀 상관이 없다
  Person({String name, int age, String sex}) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
}

void main() {
  // argument에 직접 값을 입력해줄 수 있다.
  Person p1 = new Person(age: 30);
  Person p2 = new Person(sex: 'male');

  print(p1.age); // 30
  print(p2.sex); // male
}

클래스와 위젯의 관계

MaterialApp, Scaffold, Appbar 위젯들이 많은 arguments를 가지고 있고, named argument 형태로 사용했다. 원래 home: new MyHomePage() 이런식으로 new 키워드를 사용해야하지만 Dart 2.0 이후에는 생략이 가능해졌다.

모든 위젯은 결국 클래스를 통해 생성된 인스턴스인 것이다.