리액트와 Flutter 위젯의 생명주기 비교하기

 글을 작성하기에 앞서 리액트 컴포넌트 라이프사이클을 공부하던때가 문득 생각이 난다.
 클래스 컴포넌트와 함수형 컴포넌트의 라이프 사이클을 비교하면서 공부했던 그때와 불과 1년 8개월이 지났는데, 자신있게 리액트와 next.js의 렌더링에 대해서는 자신있는 수준이 되었고, 정말 깊게 공부하고 코딩했던 시간들이 무의미하지 않아서 너무 기분이 좋다. 그럼에도 배울 것이 또 산더미라는 것이 프론트엔드의 묘미이자 단점? 이지 않을까...ㅋㅋ
 리액트 네이티브로 UI작업을 한지 얼마지 않아 Flutter로 사내 프로젝트를 진행하게 되면서 가장 기본이 되는 Dart라는 언어부터.. 다시 Flutter의 Widget의 생명주기, 그리고 상태관리에 대해서 딮러닝하는 시간이 주어진 것에 감사하다.

 

웹과 모바일 앱 개발에서 UI 구성 요소의 생명주기를 관리하는 것은 매우 중요합니다. 이 글에서는 리액트(React)와 Flutter에서 각각의 구성 요소인 컴포넌트와 위젯의 생명주기를 비교하여 설명합니다.

 

Flutter는 StatelessWidget과 StatefulWidget을 나누어서 설명을 해야하는데, 사실 상태가 없는 StatelessWidget의 경우에는 생명주기랄 것이 없습니다. build에서 render가 동작하는 것.
StatefullWidget의 경우 아래 예시코드와 함께 설명하겠습니다.

StatelessWidget의 생명주기

StatelessWidget은 상태를 가지지 않으므로, 그 생명주기는 매우 간단합니다.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 위젯이 화면에 그려질 때 호출됩니다.
    return Text('Hello, World!');
  }
}

위의 예에서 MyStatelessWidget은 build 메서드만을 가지고 있으며, 이 메서드는 위젯이 화면에 그려질 때 호출됩니다.

StatefulWidget의 생명주기

StatefulWidget은 보다 복잡한 생명주기를 가지고 있습니다.

• initState(): 위젯이 생성될 때 호출됩니다.
• didChangeDependencies(): 위젯이 의존하는 객체가 변했을 때 호출됩니다.
• build(): 위젯을 다시 그리기 위해 호출됩니다.
• didUpdateWidget(): 위젯의 설정이 변경되었을 때 호출됩니다.
• dispose(): 위젯이 영구적으로 제거될 때 호출됩니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  void initState() {
    super.initState();
    // 위젯이 생성될 때 한 번만 호출됩니다. 초기 상태 설정을 여기서 합니다.
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 위젯이 의존하는 객체가 변했을 때 호출됩니다.
  }

  @override
  Widget build(BuildContext context) {
    // 위젯이 화면에 그려질 때마다 호출됩니다.
    return Text('Hello, Flutter!');
  }

  @override
  void didUpdateWidget(MyStatefulWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 위젯의 구성이 변경될 때 호출됩니다.
  }

  @override
  void dispose() {
    // 위젯의 생명주기가 끝날 때 호출됩니다.
    super.dispose();
  }
}

 위의 예에서 _MyStatefulWidgetState 클래스는 State<MyStatefulWidget> 클래스를 상속받아 여러 생명주기 메서드를 구현합니다. initState는 위젯이 생성될 때 호출되며, build 메서드는 위젯이 화면에 그려질 때마다 호출됩니다. didUpdateWidget은 위젯의 설정이 변경되었을 때, 그리고 dispose 메서드는 위젯이 영구적으로 제거될 때 호출됩니다.

 이러한 메서드들을 적절하게 오버라이드하여 사용함으로써, 위젯의 생명주기 동안 필요한 작업을 수행할 수 있습니다. 예를 들어, 리소스를 해제하거나, 타이머를 취소하는 등의 정리 작업을 dispose 메서드에서 할 수 있습니다.

 이해를 돕기 위한 간단한 예제와 함께 위젯의 생명주기를 설명하는 것은 Flutter 개발자들에게 매우 유용합니다. 위와 같은 방법으로 위젯의 생명주기를 효과적으로 관리하면, 앱의 성능을 최적화하고 메모리 누수를 방지하는 데 큰 도움이 됩니다.

그럼 이제 리액트와 비교해서 간단하게 설명하겠습니다.

 리액트와 Flutter 둘 다 컴포넌트/위젯의 생명주기를 통해 UI의 동적인 부분을 관리합니다. 리액트는 자바스크립트에 기반한 웹 개발에 초점을 맞추고, Flutter는 다트(Dart) 언어를 사용해 크로스 플랫폼 모바일 앱 개발에 적합합니다.

 두 프레임워크 모두 초기화, 렌더링, 업데이트, 소멸이라는 생명주기 단계를 가지고 있으며, 각 단계에서 수행해야 할 중요한 작업을 메서드를 통해 제공합니다. 이를 통해 개발자는 애플리케이션의 성능을 최적화하고 자원을 효율적으로 관리할 수 있습니다.

 두 프레임워크 사이의 가장 큰 차이점은 생명주기 메서드의 구체적인 명칭과 구현에 있습니다.

 예를 들어, 리액트의 componentDidMount는 Flutter의 initState에 대응되며, 리액트의 componentWillUnmount는 Flutter의 dispose에 해당합니다. 또한, 리액트의 함수형 컴포넌트에서는 useEffect Hook을 사용해 생명주기를 관리할 수 있지만, Flutter는 이러한 Hook 메커니즘을 사용하지 않습니다.

 함수형 컴포넌트가 활성화되기 이전에 리액트를 접한 사람이라면 이 사이클이 클래스형 컴포넌트의 9단계 라이프사이클의 구조와 비슷한 것을 알 수 있을 것이고 이해하는데 수월하리라 생각합니다. 함수형 컴포넌트에서는 리액트 훅을 토대로 상태를 간단하게 useState로 생성하지만 클래스형 컴포넌트에서는 아래 예시와 같이 constructor를 통해서 만들었기 때문에 Flutter의 statefulWidget의 구조가 어렵지 않게 이해되리라 생각한다.

  constructor(props) {
    super(props);
 
    this.state = {
      count: 0, 
      isToggleOn: true 
    };
  }

 

 이 포스팅을 통해 두 프레임워크의 생명주기를 비교하고 이해함으로써, 개발자들은 자신의 프로젝트에 적합한 툴과 접근 방식을 선택할 수 있게 됩니다. 효과적인 생명주기 관리는 앱의 반응성, 안정성 및 사용자 경험을 향상시키는 데 기여합니다.