[flutter 상태관리] 2. stateless widget (스테이트리스 위젯)

플러터에서 상태 관리에 관한 포스팅을 하고 있습니다. 아직은 좀 더 작은 주제인 stateless widget과 stateful widget을 사용하는 로컬 상태 관리에 대해 알아보도록 하겠습니다. 이번 포스트는 상태를 관점으로 생각해보는 stateless widget이 메인 주제입니다.

 

다음 내용을 다루고 있습니다.

• Stateless widget의 분류
• 정적 위젯(static widget)
• 상태가 주입된 위젯(injected state widget)

---

Stateless widget의 분류

Stateless Widget를 상태 관점에서 분류를 해보면 두 가지 다른 종류가 있습니다.

첫 번째는 Static Widget(정적 위젯)입니다. 정적 위젯은 문자 그대로 항상 동일한 출력을 제공하는 위젯입니다. 위젯을 생성할 때 속성 입력이 필요하지 않고 항상 같은 방식으로 렌더링 됩니다.

둘째로 일반적으로 사용되는 Stateless Widget은 상태가 주입된 모델입니다. 상태가 주입되었으니 위젯은 상태에 의존하게 됩니다. 상태 자체를 관리하지는 않지만 위젯을 구성할 때 해당 상태를 수신하게 됩니다.

 

정적 위젯(static widget)

아래에 StatelessWidget을 extends 하는 Hello라는 클래스가 있습니다.

1. 생성자에서는 프로퍼티를 허용하고 있지 않습니다. 입력받는 프로퍼티가 없기 때문에 이 클래스는 화면에 무엇을 표현할지 변경할 수 없습니다.

2. statelesswidget을 상속할 때는 build 메소드를 재정의 해야 합니다. build 메소드에서 리턴해야 하는 것은 아시다시피 위젯입니다.  예제의 경우 정적 위젯으로 동일한 사용자 인터페이스인 Hello,world라는 텍스트가 포함된 텍스트 요소를 반환하고 있습니다.

정적 위젯을 클래스로 만드는 경우는 많지 않을 수 있지만 버튼을 생각해 보면 버튼의 레이블은 위젯이 될 것이며 일반적으로 정적 위젯을 사용하게 될 것입니다. 따라서 자체 클래스를 만들지 않을 수도 있지만 플러터에서는 항상 정적 위젯을 사용하게 됩니다.

 

상태가 주입된 위젯(injected state widget)

상태가 주입된 위젯의 예가 아래에 있습니다.

상자 생성자가 있고 생성자의 프로퍼티로 색상을 전달해서 파란색 사각형을 렌더링 하게 됩니다. 오렌지 상자를 렌더링 하려면 다른 속성을 전달해야 합니다.

박스 클래스는 항상 현재 색상이 해당 생성자를 통해 들어올 것으로 예상합니다. 렌더링 주기 사이에 렌더링 되는 색상을 저장할 필요가 없습니다. 이러한 것을 위젯에 상태를 주입한다라고 합니다.

실제로 코드에서는 어떠한 모습인지 살펴보겠습니다.

이제 생성자에 this.name이라는 프로퍼티가 있는 걸 주목해 주세요. 기본값이 설정되어 있지만 생성자를 통해 name 프로퍼티를 전달할 수 있습니다. 그런 다음 build 메소드에서 name 프로퍼티를 사용하여 렌더링 대상을 정적 텍스트인 Hello, world 대신에 name을 설정해 주고 있습니다. 만약 name 프로퍼티가 제공되지 않는다면 world가 기본 설정이 될 것입니다. stateless widget이라고 하면 흔히 상태가 없는 위젯이라고 생각하게 되는데 엄밀히 따지고 보면 stateless 위젯에도 이런 관점의 상태는 존재하다는 게 생각해볼 점입니다.

---

수고하셨습니다. 여기까지가 상태를 관점으로 하는 stateless 위젯에 대한 개요였습니다. 다음 포스트에서 실제 stateless widget의 데모 코드를 만들어 보도록 하겠습니다.