[Flutter] state/setState

flutter에서 사용자와 interactive 요소를 구현하기 위해서는 React에서와 같이 state를 사용해야 한다.

 

state를 사용하기 위해선 우선 StatefulWidget을 만들어야하고, UI 관련 코드를 State class에 넣어줘야하는데, 이 때 StatefulWidget의 State(class)는 위젯의 데이터와 UI를 저장하고, 데이터가 변경되면 위젯의 UI를 변경시키는 역할을 한다.

class App extends StatefulWidget {
	@override
	State<App> createState() => _AppState();
}

class _AppState extends State<App> {
	....
}

React에서와 마찬가지로 state를 변경할 때에는 setState로 변경시켜야 한다.

(setState로 state를 변경하지 않으면, State class는 build method를 실행시키지 않아서 UI를 새로고침/렌더링하지 않는다.) setState는 State class에 데이터가 변경되었음을 알려주는 함수다. 그래서 만약 호출될 때마다 counter에 할당된 수를 1씩 증가시켜주는 함수는 아래와 같이 구현되어야 한다.

int counter = 1;

//올바른 예
void onClicked (){
// counter = counter + 1;
// setState((){}) 이와 같이 counter = counter + 1를 
// 굳이 setState안에 넣지 않아도, 데이터 변화를 UI에 보여줄 수 있다. 
	setState((){
		counter = counter + 1;
	})
}

//잘못된 예
void onClicked (){
	counter = counter + 1;
}

그렇다면 여기서 의문점을 하나 떠올릴 수 있는데, setState를 호출하지 않으면 상태는 변화하지 않는가? 그렇지 않다. 실제로 데이터가 변경되고 있지만, 이것이 UI에 렌더링되지 않을 뿐이다.