Flutter에서 RN으로 넘어오며 느낀 장단점들

장점

 

풍부한 자료

고수들의 자료가 많다. 역사가 오래되었다 보니 하이레벨 수준에서 구현 가능한건 RN이 압승이다.

하지만 로우레벨 수준의 난이도 ui는 flutter가 훨씬 우위이다.

 

 

최적화의 편안함

react compiler 등장으로 flutter 대비 최적화에 덜 신경 써도 된다. flutter는 최적화를 제대로 안해주면 성능이 정말 안좋다. 하지만 세밀한 부분에서의 최적화는 listenable의 유무로 인해 flutter가 훨씬 최적화를 하기가 쉽다.

 

 

다른 분야로 넘어가기 쉬움

아마 가장 큰 장점이 아닐까... 자바스크립트 생태계는 진짜 혼자 다 해먹으니까

 

 

 

코드의 재활용성

개인적으로 리엑트에서 권장하는 코드의 구조가 재사용성이 flutter보다 높은거 같다.

mvvm보단 flux 패턴이 훨씬 좋다고 생각된다. mvvm은 너무 사람마다 하는 소리도 다르고 만들다 보면 디자인패턴 다 뭉게지고 하는데 리액트는 확실히 그런게 덜하다.

 

 

 

 

단점

 

상태관리 trace 추적

나는 상태가 변했을 때 상태를 변화시키는 위치를 항상 로그로 출력한다. 그래야 디버깅이 쉬우니깐

flutter의 경우 아래와 같은 꼼수로 로그 출력이 가능하다. 파일 위치만 누르면 어디서 ui를 변화시켰는지 바로 점프가 가능하다.

 

sealed class CareEvent {
  String? trace;
}



  @override
void add(CareEvent event) {
  // TODO: implement add
  if (Config.SUPPORT_DEBUG) {
    final stack = StackTrace.current.toString().split('\n');
    if (stack.length > 1) {
      event.trace = stack[1].split(' ').last;
    }
  }
  super.add(event);
}

 

 

최상단 이벤트에 trace 변수를 담고 add를 할 때 이를 담아 보낸 뒤, transition 로그에서 상태변화와 함께 출력하면 상태변화와 어디서 발생했는지 위치를 바로 알 수 있다.

 

 

 

 

이를 RN에서도 구현하려 했는데 도저히 안된다... 일단 번들링이라는 것 때문에 dart에서 기대했던 trace 모양이 안나오고 이상하게 꼬인 경로가 나온다. 이는 디버그창에서 확인해서 점프 할 수 있는데 직관적이지 못해서 조금 불편하다.

 

 

 

 

자동완성 안됨

진짜 자동완성이 더럽게 안된다... 몹시 불편하다. 타입스크립트의 타입문법 수준은 상당히 디테일하고 어렵다. 이때문에 자동완성이 잘 안된다.

 

 

 

 

Canvas의 부재

RN 하면서 놀란건 캔버스가 없다... 복잡하고 수준높은 ui를 그리기가 어렵다는것.

이에 쇼피파이에서 react native skia를 만들어서 이제 canvas 수준의 ui 그리기도 가능하다.

 

그전에는 어떻게 앱 만든거지..?

 

 

 

리팩토링 툴이 약하다

플러터는 기본적으로 코드 리팩토링 기능이 강력하다. RN에서는 상당히 안좋다. 기본적으로 컴포넌트를 쪼개는 기능을 제공안해준다.

wix에서 이에대해 glean이라는 익스텐션을 만들었지만 역시나 타입 문제가 생긴다.

 

 

 

vim이랑 연동이 안좋다. 에디터 기능이 빈약하다

flutter를 괄호지옥이라고 표현하고 비판하는 사람들이 많은데 솔직히 스킬이슈다. expand selection기능을 이용하거나 vim을 이용하면 html tag보다 훨씬 편하고 레고조립하듯이 코드작성이 가능하다.

 

tag는 vim이랑 연동이 안좋다. 기본적으로 에디터에서 flutter만큼 수준높게 다루려면 emmet기능을 써야 하는데 vscode에서 기본적인 단축키도 설정 안되어있다..

 

 

 

 

애니메이션 작성이 까다롭다

flutter보다 매끄럽게 코드 작성이 안된다.. 키값 뿐만 아니라 컴포넌트가 메모리에 올라가있냐 마냐까지 고민해야한다.

 

 

 

shadow 주는게 이상함

컨테이너 부분에 그림자를 줘서 입체감을 가지도록 만들고 싶었는데 flutter만큼 이쁘게 안나오고 ios랑 안드로이드랑 설정이 또 다르다...

 

 

 

최적화를 세밀하게 할 수 없음

플러터처럼 빌더라는 개념이 없어서 컨텍스를 끊는것도 힘들고 지멋대로 리빌딩 되는 부분이 많음

 

 

 

 

레이아웃 빌더가 없다

현재 내 컴포넌트가 차지할 너비를 알 방법이 없다... 세상에