위젯이란 무엇인가?

Flitter에서 위젯은 애플리케이션의 사용자 인터페이스를 구성하는 기본 요소입니다. Flutter에서 영감을 받아, Flitter 앱에서 화면에 보이는 모든 것이 위젯입니다. Flitter를 사용하여 데이터 시각화와 상호작용하는 인터페이스를 효과적으로 만들기 위해서는 위젯을 이해하는 것이 매우 중요합니다.

위젯의 정의

Flitter의 위젯은 사용자 인터페이스의 일부를 설명하는 불변의 객체입니다. 위젯은 다음과 같은 것들을 설명할 수 있습니다:

구조적 요소 (컨테이너나 행과 같은)
스타일 요소 (색상이나 폰트와 같은)
레이아웃 요소 (패딩이나 정렬과 같은)
그리고 더 복잡한 기능들 (제스처나 애니메이션과 같은)

위젯의 종류

Flitter는 다음과 같은 여러 종류의 위젯을 제공합니다:

기본 위젯: Container, Text, Image와 같은 위젯
레이아웃 위젯: Row, Column, Stack과 같은 위젯
상호작용 위젯: GestureDetector, Tooltip을 포함
그리기와 효과 위젯: 예를 들어 Transform과 Opacity
상태 있는 위젯: 사용자 상호작용이나 다른 요인에 따라 시간이 지나면서 변할 수 있는 위젯

위젯 사용하기

다음은 Flitter에서 위젯을 사용하는 간단한 예시입니다:

import {
  Container,
  Text,
  Center,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";

const MyWidget = Container({
  width: 200,
  height: 100,
  color: Colors.blue[500],
  child: Center({
    child: Text("안녕하세요, Flitter!", {
      style: new TextStyle({ color: Colors.white, fontSize: 20 }),
    }),
  }),
});

위젯 트리

Flitter의 위젯들은 트리 구조로 배치됩니다. 이 트리는 사용자 인터페이스의 계층 구조를 나타냅니다. 예를 들면:

       App
        │
    Container
        │
      Center
        │
       Text

트리의 각 위젯은 자식 위젯을 가질 수 있어, 전체 UI를 정의하는 중첩된 구조를 만듭니다.

구성 vs 상속

Flitter는 커스텀 위젯을 만들 때 상속보다 구성을 선호합니다. 이는 기존 위젯을 상속받는 대신, 일반적으로 기존 위젯들을 조합하여 새로운 위젯을 만든다는 의미입니다.

상태 없는 위젯 vs 상태 있는 위젯

Flitter에는 두 가지 주요 위젯 유형이 있습니다:

상태 없는 위젯: 이들은 불변입니다. 한 번 만들어지면 그들의 속성은 변경될 수 없습니다.
상태 있는 위젯: 이들은 내부 상태가 변경될 때 자신을 다시 빌드할 수 있습니다.

두 가지 예시를 살펴보겠습니다:

상태 없는 위젯 예시

import {
  StatelessWidget,
  Container,
  Text,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";

class Greeting extends StatelessWidget {
  private name: string;

  constructor(name: string) {
    super();
    this.name = name;
  }

  build() {
    return Container({
      padding: EdgeInsets.all(16),
      color: Colors.blue[100],
      child: Text(`안녕하세요, ${this.name}님!`, {
        style: new TextStyle({ color: Colors.black, fontSize: 24 }),
      }),
    });
  }
}

// 사용법
const myGreeting = new Greeting("Alice");

상태 있는 위젯 예시

import {
  StatefulWidget,
  State,
  Container,
  Text,
  TextStyle,
  Colors,
  GestureDetector,
} from "@meursyphus/flitter";

class Counter extends StatefulWidget {
  createState() {
    return new CounterState();
  }
}

class CounterState extends State<Counter> {
  private count: number = 0;

  incrementCounter() {
    this.setState(() => {
      this.count++;
    });
  }

  build() {
    return Container({
      padding: EdgeInsets.all(16),
      color: Colors.blue[100],
      child: GestureDetector({
        onTap: () => this.incrementCounter(),
        child: Text(`카운트: ${this.count}`, {
          style: new TextStyle({ color: Colors.black, fontSize: 24 }),
        }),
      }),
    });
  }
}

// 사용법
const myCounter = new Counter();

결론

상태 없는 위젯과 상태 있는 위젯의 차이를 이해하는 것은 효율적인 Flitter 개발에 매우 중요합니다. 구성 정보와 현재 테마에만 의존하는 UI 부분에는 상태 없는 위젯을 사용하고, 사용자 상호작용이나 다른 요인에 기반하여 동적으로 변경되어야 하는 UI 부분에는 상태 있는 위젯이 적합합니다.

다음 섹션에서는 특정 유형의 위젯들과 그들의 상태를 더 효과적으로 관리하는 방법에 대해 더 자세히 알아보겠습니다.