[flutter]widget vs Method (widget 분리시 class vs function)

flutter를 이용한 앱을 만들어보던 도중 너무 길어지는 코드로 인해 widget을 분리하고 싶다는 생각이 들었다.

flutter의 자동완성 도움을 받으려고 전구를 누르니 Extract Method과 Extract Widget 두 가지를 확인할 수 있었고, 두 가지의 차이가 궁금해졌다.

이해를 위해 많은 블로그를 찾아봤지만 method보다 class를 이용하는 것이 더 좋다는 이야기가 많았고 method와 차이가 뭔지에 대해서는 정확하게 이해가 되지 않았다.

(Extract widget= class 형태, Extract Method = function 형태)
-> method와 function이 같다고 볼 수는 없지만 비슷한 형태로서 이해하려고 했다
(동영상강의에서 method로 표현했기 때문에 아래부터는 method로 적으려고 한다)

하지만 실무에서는 코드 정리를 위해 method 형태도 꽤 쓴다는 말을 봤다. method 형태에 대해 더 자세히 알고 싶어 찾아보던 중 flutter 유튜브에서 해당 주제로 올려놓은 영상을 보았고, 조금 이해가 수월해져 기록해보려고 한다.

먼저 두가지 방법은 위젯을 분리한다는 점에서 공통점을 가지고 있다.
위젯을 분리하는 이유는 재사용성, 코드 정리가 있고 이를 통해 중복되는 코드를 줄이고 가독성 있는 로직을 작성할 수 있다.

---

method 형태 :

Text newMethod() {
    return const Text(
      "English study",
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
        color: Colors.white,
      ),
    );
  }
}

class 형태 :

class NewWidget extends StatelessWidget {
  const NewWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return const Text(
      "Quiz",
      style: TextStyle(
        fontSize: 36,
        fontWeight: FontWeight.w600,
        color: Colors.white,
      ),
    );
  }
}

비슷한 UI로 이루어져 있는 Text 위젯을 class와 method로 분리시켜봤다.

눈으로 봤을 때 차이점이라고 하면, class형태로 분리시켰을 때는 build 위젯이 들어가고 method는 단순히 코드를 불러오는 역할을 하는 것으로 보여진다.

두 형태의 장/단점은 아래와 같다.

method의 장점으로는 코드의 길이가 짧고 단순하게 느껴진다.
하지만 단점으로는 state가 변화할 때, 예를 들어 메서드 안의 아이콘이 새로 렌더링 된다면 전체 위젯이 다시 렌더링되기 때문에 불필요한 렌더링이 일어날 수 있다는 점이 있다.
 
사실 여러 블로그나 참고 레퍼런스에서도 코드의 길이 말고는 이점이 없으니 class형태를 사용하는 것이 좋다라고 적혀있는 곳들이 많았는데, 동영상을 듣고보니 그 점 자체만으로 큰 이점이 될 수 있다는 생각이 들었다.

코드의 목적에 맞게 렌더링의 이슈가 없는 코드들은  method로 작성하면 되지 않을까..?

class의 장점으로는 위젯을 '완전히 새로운 위젯'으로 분리 할 수 있다는 것이다.
method의 단점이였던 state가 변화할 때 전체 위젯이 다시 렌더링 되는 것이 아니라 변화가 있는 해당 build 부분만 다시 렌더링 될 수 있다는 것이다.

단점이라고 하면 렌더링을 하지 않아도 되는 "코드 정리"의 목적에서의 분리에서는 굳이 class 형태를 쓰는 것이 불필요해보인다.

 

처음에 봤을 땐 method가 안좋은거네 ! 라고만 단순히 생각 했지만 많이 찾아볼수록 class가 가지고 있는 장점이 하나 더 있는거지 그렇다고 method에 단점만 있는게 아니기 때문에 목적에 맞는 코드를 작성하는 것이 중요하다는 생각이 들었다

---

참고 

https://www.youtube.com/watch?v=IOyq-eTRhvo&t=326