플러터의 위젯이란?

플러터의 동작 원리에 대해 말하려면 위젯의 대한 설명을 먼저 하고 넘어가야한다.

1. 플러터는 곧 위젯의 집합이다.

플러터 프로젝트를 생성해보면 웹이나 Rn 와 비슷하게 코드가 생겼는데  뷰 계층 을 이루고 있다.

플러터는 위젯이라는 개념이 존재하는데 이 위젯은 버튼, 이미지, 텍스트 등등 작은 컴포넌트를 의미한다.

이것들을 조합하고 계층을 만들어 프로젝트를 구성해간다. 심지어 스타일과 애니메이션 까지고 모두 위젯이다.

 

2. 위젯의 사용 예시

위젯은 앱 화면의 모든 정보를 정의하는데 쓰이고 있다.

예를들어 Row 라는 위젯은

 

Row(
 childern : [
   
 ]
)

 

이런식으로 적으면 childern 안에 들어있는 위젯들을 가로로 정렬한다는 의미가 된다.

그리고 또

 

Row(
 mainAxisAlignment : MainAxisAlignment.center
 childern : [
   
 ]
)

라고 적으면 Row 를 가운데 정렬로 쓰겠다는 말이된다.

이런 모든것들이 위젯으로 구성되어 있고 우리는 필요한 위젯들을 블럭처럼 조립해서 쓰면 된다.

 

3. 위젯의 특성

이렇게 쉽게 쓰기 편하지만 위젯에도 알아둬야하는 특성이 있다.

일단 플러터는 상속의 개념보다는 조합을 우선시 하고 있고 이를 이용해 고유한 위젯을 만들 수 있다.

대부분 위젯은 작은 위젯을 합쳐 만든다. 즉 플러터는 다른 위젯을 상속받아서 커스텀하는것이 아닌

위젯들을 조합해서 커스텀 위젯을 만든다.

그렇기 떄문에 작은 위젯들을 재사용하기 편하다.

 

4. 위젯의 형식

플러터에는 위젯을 변경하기 위해 상태(state) 라는 개념을 가지고 있는데 이를 기준으로

위젯은 크게 두가지로 나뉜다.

• StatefulWidget  - 상태가 있는 위젯
• StatelessWidgeht - 상태가 없는 위젯

StatelessWidgeht 

상태가 없는 위젯은 어떤 정보나 상태를 저장하고 있지 않기에 사라져도 프로그램에 영향을 주지 않고 파괴되어도 상관이 없다. 생명주기가 외부에 의해 결정된다.

 

좀  더 쉽게 풀어서 설명하자면 StatelessWidgeht 로 만들어진 위젯

아래에 Text(someText) 위젯을 만들어서 어떠한 버튼이 눌릴때마다 someText 의 값을 바꿔서 Text 의 내용을 변경하고 싶다고 해보자.

버튼을 누르고 로그를 찍어보면 someText 의 값은 실제로 바뀌고 있지만 Text 의 내용은 바뀌지 않는다.

someText 라는 상태 값을 StatelessWidgeht  에서는 가지지 않기 때문에 값은 바뀔지언정 화면에 새로 build 하여 그리진 않는다. StatelessWidgeht  위젯은 데이터의 변화에 따라 새로 화면을 그릴 필요가 없는 UI 구성에 적합하다고 할 수 있다.

 

StatefulWidget  

위 개념에 반대되는 개념이다.

항상 state 를 가지며 이 값의 변화가 위젯을 새로 그려서 보여줘야할때를 플러터에 알린다.

Widget build(BuildContext context){
  return Container( // build 메서드는 항상 위젯을 반환한다.
    child: Row(
      children: List<Widget> [
        IconButton(
          icon: Icons.subtract,
          onPressed: (){
            setState((){ // 사용자의 동작을 감지하는 버튼 위젯의 내장 프로퍼티
              this.quantity--; // 상태에 저장된 수량을 감소시킨다
            });
          }
        ),
        new Text("Qty:" ${this.quantity}), //상태 객체의 수량이 바뀌면 트리의 위젯을 다시 그린다.
        new IconButton(
          icon: Icons.add,
          onPressed: (){ // 이 콜백이 상태의 수량을 증가시키는 setState를 호출한다
            setState((){
              this.quantity++;
            });
          }
        ),
      ],
    )
  );
}

핵심의 setState 메서드인데 버튼을 누를때 위 위젯의 state 값인 quantity 를 변화시켜

그때마다 플러터가 다시 그릴 수 있게 해주는 메서드이다. 그렇게 되면 플러터가 quantity 의 값을 화면에 반영에서

누를떄마다 값이 변하는것처럼 보인다.

 

여기서 또 알고 넘어가야할건 StatefulWidget  의 생명주기다.

1. 위젯이 마운트가 되면 초기 상태인 initState가 호출된다.

2. 초기화가 되고나면 위젯 빌드가 되고 화면에 위젯을 그린다.

3. 다른 화면으로 넘어가면 dispose 가 되며 위젯이 폐기되고

4. 값의 변화가 있다면 didUpdateWidget 이 호출되며 위젯을 다시 그린다.

 

 

다음 플러터 포스팅에서는 자주 사용하는 주요 위젯들의 사용법에 대해서 하나씩 포스팅하겠다.