[Flutter basic] stateless widget 과 stateful 위젯 사용법

지금 까지 Flutter 를 코드를 짤때 MyHomePage라는 class 안에서 코드를 작성 했었다. 

 

 

그러나 실제로 사용할 앱을 만들때는 이것보다는 훨씬더 복잡하고 많은 코드가 필요할 것이다.

그러면 코드의 길이가 무수히 길어질 것이기 때문에

class를 분리한 후에 child:  에 넣어준다.

 

예를들어 page 별로 class 를 분리할수도 있고

한 page의 특정 부분을 따로 class를 분리 할수도 있다.

 

나의 경우 이런경우 class를 분리하여 구현한다.

1. 페이지 넘어가는 경우

2. 특정 UI를 재 사용 할 경우

3. 복잡한 기능이 들어간 경우

4. 기타 등등...

여기서는 얼마나 많은 class를 분리해야 할까 

위의 유튜브 UI 를 보면 영상 / 타이틀&설명 / 다른영상 리스트 / 댓글리스트

이렇게 나뉠수 있을것이고 

댓글리스트 에서도 댓글과 댓글쓰기 class를 분리하는등 으로 구현 될것이다.

 

class 를 분리 할때 Flutter 에서는 두가지 옵션이 있다.

바로 Stateless와 Stateful 이다.

Stateless는 상태가 없는 클래스이다.

상태에 따라 동적으로 UI가 변하지 않는경우 Stateless를 사용한다.

반대로 상태를  관리하고 상태에 따라 동적으로 UI가 변한다면 Stateful로 구현해야한다.

 

위와같이 마우스가(모바일의 경우 손가락이) UI 위로 올라 가면 UI가 살짝 바뀌는경우

마우스의 상태에 따라 UI가 변경 되었으므로 Stateful로 구현 되어야한다.

이외에도 구독 , 좋아요 버튼을 누르면 색깔이변하는 것도 Stateful 이다.

 

반대로 이렇게 동적이지 않는 경우 Stateless로 간단히 구현하면 되는데

생각보다 상태관리가 필요없는 UI는 많지 않다.

대부분 상태에따라 동적으로 구현해야 하는 UI가 많을것이다.

그럼에도 Stateless가 많이 쓰일수 있는 이유는 부모와 자식 관계에 있다.

 

위와 같이 부모에서 상태를 관리하면 자식들은 상태를 관리할 필요없다.

그 이유는 부모의 상태가 바뀌면 자식을 다시 그리기 때문이다.

즉 정리하여 위와같은(좋아요 버튼) UI를 구현할떄

좋아요Class는 Stateful로 구현될수도 있고

부모상태에 따라 관리되는 Stateless로 구현 될수도 있다.

 

그러면 왜 굳이 부모에서 상태 관리를 할까?

자식에서 직접 상태관리를 하면 더 구현하기 편할텐데

굳이 부모에서 관리하고 자식에게 전달해 줘야하는 수고를 하는 이유는

상태가 다른곳에서도 이용될때 가장 상단의 부모 에서 상태를 관리하는게 비교적

편하기 때문이다. 이는 복잡한 UI를 구현하게 될때 유용하다.

 

클래스를 구현해보자.

Stateless는 위와같이 구현할수 있다. 

StatelessWidget을 extends(상속) 받으면 된다.



그러면 필수로 build()함수를 구현해야하는데

어떤 UI를 그릴거냐는 것이다. 

이 안에다 원하는 UI를 return 해주면 된다.

그리고 해당 class를 부모에서 넣어주면 stateless위젯이 앱에 구현된다.

 

Stateless는 이게 끝이다. 단순히 그려주면 된다.

이번에는 Stateful을 구현해보자

 

 

다소 복잡해 보인다.

우선 클래스가 두개로 나뉘어있다. 

부모로부터 변수를 받아올 상황에는 LikeWidget클래스 에서 받아오고

사용을 _LikeWidgetState에서 구현해주면 된다.

 

Stateful을 사용하는 이유는 상태를 관리하여 동적인 UI를 그리기 위함이라했다.

그러면 좋아요 상태를 이용해 "Like" 의 색깔을 변경해보자.

 

0. 좋아요 상태를 만들어준다. 좋아요는 Boolean 타입이며 초기값은 false를 넣어준다.

1. 좋아요 상태를 바꾸기 위해 Text에 TapGesture를 넣어준다.

2. TapGesture에서 좋아요 상태를 바꿔준다.

3. 상태에 따라 색깔을 바꾸기 위해 Text에 조건문을 넣어준다.

 

 

class LikeWidget extends StatefulWidget {
  @override
  _LikeWidgetState createState() => _LikeWidgetState();
}

class _LikeWidgetState extends State<LikeWidget> {
  bool isLike = false; //0
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
          onTap: () {
            //1
            setState(() {
              //2
              isLike = !isLike;
            });
          },
          child: Text(
            "Like",
            style: TextStyle(color: isLike ? Colors.red : Colors.black), //3
          )),
    );
  }
}

0 우선 isLike라는 상태를 만들었다. 단순히 변수를 만들어주면 된다.

1 GestureDetector를 사용해서 tap gesture를 넣어줬다. 그리고 Text를 감싸줬으므로 Text를 클릭하면 "onTap()" 함수가 작동된다.

2 setState() 함수를 작동시켰다.  setState 는 Statefult 클래스 에서 사용가능한 함수이다.

setState를 사용하면 그안에 함수를 작동시키며 build() 함수를 다시 한번 실행시킨다.

즉 isLike = false 에서 setState를 통해 isLike = true 로 바뀌고 build()를 다시 실행시켜

isLike = true인 상태에서 UI를 다시 그리는 것이다.

 

3. 상항 연산자를 활용해 isLike가 true이면 빨간색 false 이면 검은색으로 그렸다.