Docs > Development > UI > Introduction to Widgets
위젯은 가장 작은 단위의 ui이고 구성 및 상태를 가진다. 위젯의 상태가 변경되면 위젯은 다시 렌더링 된다. 가장 간단한 플러터 앱은 runApp() 함수를 사용해 호출할 수 있다.
runApp함수는 인자로 들어오는 위젯을 루트위젯으로 포함시키고 이 위젯이 렌더링 되도록 한다. 위의 코드에서는 Center위젯이 화면을 모두 차지하고 자신의 중간에 Text위젯을 위치 시켜 렌더링 한다.
앱 작성시 상태를 관리하지 않을 경우 StatelessWidget을 사용하고 상태를 관리할 경우 StatefulWidget을 사용한다.
기본 위젯
기본 위젯군을 알아보자.
Text
Text 위젯은 스타일을 가지는 텍스트를 만들수 있다.
Row, Column
가로 또는 세로로 레이아웃을 만들수 있다. 이러한 위젯의 디자인은 웹의 flexbox레이아웃 모델을 기반으로 한다.
Stack
Stack 위젯을 사용하면 위젯을 중첩하고 위치기반으로 배치가 가능하다. 위치 기반과 함께 Stack 의 상단, 우측, 좌측, 하단 등으로 배치하기도 한다.
Container
Container 위젯은 사각형의 요소를 만들 수 있다. BoxDecoration을 이용해 배경, 테두리 그림자 등의 효과를 줄수 있다. 또한 마진, 패딩, 제약조건을 가지게 할 수 있다.
Material Component 사용
Flutter 는 Material Design 을 따르는 앱을 작성할 수 있다. 이를 위해 MaterialApp 위젯으로 시작해야한다. 이 위젯은 앱루트에 Navigator(라우트)를 포함할 수 있으며 그외 여러 위젯을 제공한다.
제스쳐 처리
사용자와 상호 작용이 필요한 경우 입력 제스쳐를 감지하고 처리할 수 있다.
GestureDetector위젯은 onTap 콜백함수를 제공해 사용자 이벤트에 대한 처리를 위임할 수 있다.
사용자입력에 반응하는 위젯의 변경
지금까지는 상태를 저장하지 않는 위젯 만 사용했다. 보다 복잡한 구현을 위해 상태를 유지하는 위젯을 작성한다. 이를 위해 Flutter는 StatefulWidget을 사용한다.
위의 샘플코드에서 StatefulWidget과 State위젯이 분리되었는지 궁금할 것이다. Flutter에서 이 두 유형의 객체는 수명주기가 다르다. StatefulWidget은 현재 상태를 표시하는데 임시로 사용되는 객체이다. 반면 State는 지속적으로 build()되므로 상태정보를 기억할 수 있다.
아래 코드는 사용자 이벤트가 콜백을 통해 계층구조의 부모로 전달되고 프리젠테이션을 처리할 StatelessWidget (CounterDisplay)에게 다시 전달된다.
다음 코드는 쇼핑몰 상품을 보여주는 쇼핑카트이다. ShoppingListItem위젯은 무상태위젯이다. 생성자에서 받은 값을 final변수에 저장한 다음 build()함수를 통해 렌더링한다. 사용자가 목록을 누르면 위젯이 해당 inCart값을 직접 수정하지 않는다. 대신 위젯의 onCartChanged은 상위부모 위젯에서 정의된 함수를 호출한다. 이 패턴에 의해 위젯 계층구조에서 부모위젯이 상태를 저장하고 유지한다. 이런 상태값은 runApp()의 수명동안 지속된다.
부모위젯은 onCartChanged 콜백을 받고 내부 상태를 업데이트하고 ShoppingListItem에게 새로운 값을 전달하며 새 인스턴스를 생성하게 된다. ShoppingListItem위젯은 새로운 인스턴스로 생성되지만 프레임워크는 새로 생성된 위젯을 이전 위젯과 비교해서 차이만 적용하기 때문에 적은 비용으로 처리된다.
변경가능한 상태를 저장하는 부모위젯이 ShoppingList위젯이다. StetefulWidget을 확장했다. 이 위젯은 먼저 렌더링 트리에 삽입되고 이후 프레임워크는 createState()를 통해 새로운 인스턴스를 생성한다.
onCartChanged콜백함수를 처리할때 _ShoppingListState는 제품을 추가하거나 제거하여 내부상태를 변경한다. 이때 내부상태가 변경되었음을 프레임워크에게 알리기 setState() 함수를 실행한다. setState()함수가 호출되면 위젯이 더티로 표시되고 다음에 앱이 화면을 업데이트해야 할때 다시 작성되도록 예약된다.
