[Flutter] const, final의 차이점(feat. immutable, stateless vs stateful 차이점)

Immutable?

flutter를 배우기 시작하면서 가장 많이 듣는 단어 중 하나가 바로 immutable이라는 단어입니다. 사전적인 뜻은 '변하지 않는' 정도의 뜻을 가지고 있습니다. HTML도 아니고 상태가 계속 바뀌고 더군다나 상태 관리에 대한 솔루션도 여러 가지 존재하는 마당에 immutable이라는 것은 무슨 이야기일지 오늘 한번 알아보도록 하겠습니다.

flutter의 위젯이 immutable이라고 이야기하는 이유는 widget의 변경이 생기면 flutter는 아예 그 위젯을 재생성(re-build) 하기 때문입니다. 그렇기 때문에 immutable이라고 이야기할 수 있는 것이죠. 애니메이션 효과들도 어떻게 보면 widget의 재생성의 과정이 빠르게 반복되는 거라고 하네요.

flutter의 공식 문서에서는 어떻게 이야기하는지를 좀 더 알아보았습니다.

Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

일단 flutter UI의 가장 기본이 되는 것은 widget입니다. flutter는 모든 것이 widget이라고 해도 과언이 아닐 정도록 widget을 세분화해서 관리고 있습니다. 화면에 보이는 텍스트 한 줄 까지도 Text라는 widget으로 만들어 사용하고 있죠.

Widget을 생성할 때 widget의 상태를 정의할 수 있는 인자를 전달받게 되는데요. 상태가 변경되게 되면 flutter framework는 최소한의 widget을 재생성(re-build)하여 화면을 갱신하게 됩니다.

기본적으로 flutter는 React로부터 영감을 얻어 개발한 framework이기 때문에 React도 동일한 개념의 상태관리 개념을 가지고 있습니다.

Stateless vs Stateful

flutter를 이용해서 프로젝트를 만들다 보면 가장 먼저 만나게 되는 존재가 stateless widget과 stateful widget입니다. vosCode의 경우 이 두 상태를 자유자재로 바꿔가면서 프로그래밍할 수 있는 터라 그다지 크게 신경 쓰지 않고 코딩을 진행하는 경우가 많습니다. 먼저 stateless widget으로 개발을 시작하다가 뭔가 stateful widget이 필요한 경우에 바꿔주는 식으로 말이죠.

조금 더 깊이 알아보도록 하겠습니다.

Stateless widgets receive arguments from their parent widget, which they store in final member variables. When a widget is asked to build(), it uses these stored values to derive new arguments for the widgets it creates.

stateless widget에 대해서 먼저 알아보면 자신의 부모 위젯으로부터 인자를 받아서 이를 기반으로 생성되는 위젯이라고 할 수 있습니다. 예를 들어 appBar에 들어가는 제목(title)을 부모 위젯으로부터 받는다고 할 때, widget이 생성되는 시점에 부모 widget에서 자식 widget으로 제목을 함께 전달하면서 생성 요청을 하는 개념입니다.

const vs fianl

위 인용문 중간에 보시면 final member variable이라는 단어가 있습니다. 여기에서 const와 final의 차이점을 볼 수 있습니다. final이나 const 모두 한번 변수가 정의되면 다시 바꿀 수 없는 변수를 의미합니다. 다만 초기화시켜주는 시점이 컴파일 전인지 아니면 그 후인지 차이가 있는 것이죠. final은 컴파일 후에 결정되는 변수에서 사용하고 const는 컴파일 이전에 결정되는 변수에 사용됩니다. 그래서 final로 정의된 변수의 경우 초기화 시에 값을 할당하지 않아도 무방합니다.

stateless widget이 부모로부터 생성 시 인자를 받는다고 하였는데 이 인자는 컴파일 이후 런타임 상황에서 받는 경우가 많습니다. 그래서 const가 아닌 final로 설정해 줘야 하는 것입니다.

stateless widget은 이렇게 한번 생성이 되면 바뀔 일이 없습니다. 그래서 재생성되기 전까지는 그 상태를 그대로 기억한 채로 있는 것이죠.

이제 반대로 stateful widget을 알아보도록 하겠습니다.

StatefulWidgets are special widgets that know how to generate State objects, which are then used to hold state.

stateful widget은 상태 객체(state object)를 스스로 생성할 수 있고 이를 제어할 수 있는 기능을 가진 widget으로 설명할 수 있습니다.

stateful widget을 이용해서 프로그램을 해 보신 분이라면 왜 statefulWidget과 State가 분리되어 있는지 궁금하신 분이 계실 것입니다. 바로 두 widget이 서로 다른 수명주기(life-cycle)를 가지고 있어서 인데요.

Widget은 원래 수명주기가 짧은 객체로써 현재 상태를 반영하여 렌더링을 하는 것이 목적인데, State 같은 경우는 다음번 build 요청이 발생하기 전까지 계속적으로 살아 있어 상태를 기억하는 역할을 합니다. 따라서 버튼이 누르는 것과 같은 외부 이벤트가 발생할 때 상태변화를 감지하여 Widget을 re-build 하는 역할을 수행합니다.

final과 const의 차이점에 대해서 이야기를 해 보고자 한 것인데 이를 위해서 immutable의 개념과 stateless, stateful의 차이점에 대해서도 한번 다뤄보았습니다.

이를 모르다고 해서 프로그래밍을 하는데 전혀 지장은 없지만 알고 있다면 더욱 정확하게 시행착오를 줄이며 프로그래밍할 수 있습니다.

Reference

https://docs.flutter.dev/development/ui/widgets-intro