Zyggie's repository Zyggie's repository

엘리먼트 트리의 상태 변화 관리 플러터는 위젯 트리를 만들고, 모든 위젯에 대해 엘리먼트 오브젝트를 만든다. 이 때 이 엘리먼트는 StatefulElement이며, 아래 그림처럼 state object를 관리한다. AuthorCard라는 stateful widget이 있고, Icon이라는 자식 위젯을 갖고 있다. 사용자가 Icon(하트 버튼)을 탭하면, setState가 실행되고 _isFavorited를 true로 토글한다. 내부적으로 state object는 이 엘리먼트를 dirty로 마크한다. 이는 build가 호출되게 한다. element object는 old widget을 제거하고 heart icon의 색이 채워진 새로운 아이콘으로 대체한다. 전체 트리를 재건축하기보다는, 플러터는 바뀌어야하는 위..

Stateless Widget과 Stateful Widget Stateless Widget은 불변 객체이다. 위젯이 한번 만들어지면 state나 프로퍼티를 바꿀 수 없다. 프로퍼티가 바뀔 필요 없을 때, stateless widget으로 만드는 것이 좋다. stateless widget의 lifecycle은 프로퍼티를 넘길 수 있는 constructor와, override하는 build 메소드로 시작한다. 위젯의 시각적 묘사는 build 메소드가 결정한다. 다음 이벤트는 stateless widget의 update를 일으킨다. - 위젯이 위젯트리에 삽입된다. - 의존성의 상태나 상속 받은 위젯(조상 노드)가 변한다. Stateful Widget은 상태를 보존한다. UI의 일부가 동적으로 변해야 할 때 유..

플러터 데브툴즈(Flutter DevTools) 다음처럼 파란 다트 아이콘을 누르면 데브툴즈를 열 수 있다. 데브툴즈는 플러터 앱을 디버깅할 때 유용한 툴들을 제공한다. Flutter Inspector : 위젯 트리를 탐색하고 디버깅한다. Timeline : 앱의 프레임 레이트와 CPU 성능을 보여준다. Memory : 다트의 객체들의 메모리 할당 상태를 보여주고, 메모리 누수를 찾는 것을 돕는다. Performance : 플러터 앱 세션을 기록하고 보여준다. Debugger : 콜 스택에서 브레이크포인트와 변수 검사를 지원한다. Network : 플러터 앱 내부의 HTTP, HTTPS, 웹 소켓 트래픽 등을 검사한다. Logging : 다트 런타임에서 발생한 이벤트와 앱 레벨 로그 이벤트를 보여준다. ..

플러터(Flutter) - 위젯(Widget) 위젯(Widget)이란? 유저 인터페이스를 구성하는 단위이다. 레고를 조합하는 것처럼 무언가를 만들어내기 위해 위젯을 섞고 맞춘다. 플러터의 선언성(declarative nature)은 UI를 만들기 쉽게 한다. 위젯은 앱의 상태(state)를 보여주는 청사진이다. 위젯은 UI를 만드는 함수와 같다. state를 입력 받은 위젯의 build 메소드는 위젯의 UI를 만들어낸다. 위와 같은 UI를 보자. 이 Card 위젯은 다음과 같은 위젯들로 구성되어 있다. 컨테이너(Container) 위젯 : 위젯의 스타일과 꾸미기, 포지션 등을 담당한다. 칼럼(Column) 위젯 : 다른 위젯들을 세로로 보여준다. AuthorCard 커스텀 위젯 : AuthorCard라는..