본문 바로가기

Mobile/React Native

React와 Flutter의 비교

둘 다 기본 구성은 같으나, flutter가 호환성이 더 좋다

웹 프론트엔드와 모바일 앱 개발을 구분해서 생각하지만, 내가 느끼기에는 두 분야는 상당히 유사하다. UI 상에서 어떠한 변화가 일어나면, 이를 변수처럼 생각하고, 이러한 변수들을 컨트롤하는 것이 기본개념이다. 그리고 UI 상의 변화들은 한 두가지가 아니기 때문에 이를 관리하는 라이브러리로 redux, provider가 존재한다. 동시에 UI 상의 화면은 여러 개의 화면이 대다수이기 때문에 이를 routing하기 위한 라이브러리로 router-dom, flutter navigator가 사용된다.

 

물론 react는 component를 기본단위로 프로그래밍을 진행하고, flutter는 widget을 중심으로 프로그래밍을 한다고 하나, 이름만 다를 뿐, 원리는 같다고 생각된다. ui 상에 있어서도 react는 hook 이라는 이름으로 ui의 상의 변화를 변수처럼 다룬다. 마찬가지로 flutter는 stateful widget이 그 역할을 대신한다. ui 상의 변화를 다른 곳에 전달할 때도 react는 props, flutter는 final을 활용한다.

 

차이가 나는 부분은, react의 경우 직접적인 화면 구성을 위해서 jsx를 활용하여 화면을 그린다. 이 때 bootstrap과 css가 활용된다. 반면에 flutter의 경우, build function이 화면 구성의 역할을 하는데, 소괄호, 중괄호, 대괄호를 활용하여 보다 직관적으로 화면 구성을 하게 만든다. 

 

ui 상의 변화가 한 두 가지가 아니기 때문에 react에서는 redux가 사용되는데, flutter의 경우에는 그러한 것이 없다가 provider라는 것이 등장하여 redux와 유사한 역할을 하고 있다.

 

그렇다면 react를 사용하면 되는데, 왜 flutter를 사용하는가에 대한 의문이 있을 수 있는데, 문제는 호환성이다. react native는 라이브러리간 호환성이 너무 떨어진다. 그래서 여러 부품들을 조립할 때 에러가 많이 난다. Flutter의 경우에는 Dart로 직접적인 개발을 진행할 수 있기 때문에 불필요한 오류를 줄이기 위해 Flutter를 선호한다.