React Native에서 Flutter로 갈아타기 #3 - Layout

React native와 flutter를 layout 측면에서만 살펴볼거야. 문법(?)적인 차이는 표준 문서를 보도록 하고 이 글에서는 React native에서 주로 사용하는 컴포넌트에 대응하는 Flutter 위젯이나 구현 방식 등에 대해서만 이야기하도록 할게.

먼저 React native는 html처럼 <> 태그로 컴포넌트들을 감싸서 layout을 만드는데 비해 flutter는 함수를 호출하는 것처럼 보여.👇

// React Native
...
    return (
      <View>
        <Text> Hello world </Text>
      </View>
    );
...

// Flutter
...
    return Container(
        child: Text("Hello world"),
    )
...

그래서 React는 <>(태그가) 중첩되면서 복잡해지고 ㅋㅋㅋ Flutter는 (),{} 가 중첩되면서 엄청 거슬려지지. 그래서 React는 컴포넌트로, Flutter는 위젯으로 잘 쪼개서 layout을 해야하지. 대강 막하면 나중에 개고생 ㅋㅋ

어쨌든 컴포넌트나 위젯을 조합해서 layout을 만드는 건 동일해. 그래서 문법(?)만 약간(?) 틀릴 뿐, 요소 들은 거의 비슷한데, 예를 들어 React native의 <View>는 Flutter에서는 Container 랑 대응되지. React의 Button 컴포넌트는 Flutter에서도 Button 위젯이지. 다만 약간씩 틀린 부분이 있는데, 그런 차이들만 알아두고 Flutter를 공부하면 어렵지 않게 React native에서 Flutter로 넘어갈 수 있을 거라고 봐.

이것도 예를 조금 들어볼게. 먼저 React에서는 <View>에 온갖 속성을 조작해서 layout을 하지. flex시스템은 기본이고 flexDirection으로 row, column도 표현하고 position='absolute' 같은 속성으로 <View> 컴포넌트가 중첩되도록 할 수도 있지.

// RN
<View style={[styles.container, {
      flexDirection: "column"
    }]}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
      <View style={{ flex: 2, backgroundColor: "darkorange" }} />
      <View style={{ flex: 3, backgroundColor: "green" }} />
</View>

 

그에 비해 Flutter는 조금 더 세분화되어 있어. 기본적인 Container 위젯을 비롯해서, Column, Row, Center, SizedBox 등의 위젯들이 있어. 위에 있는 flex 시스템을 사용하기 위한 Expanded라는 위젯도 별도로 존재하지. 그래서 위의 RN 코드를 Flutter로 변경하면 아래 코드 정도가 되겠지. 👇👇

// Flutter
Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
    Expanded(
      flex: 3,
      child: Container(color: Colors.green),
    )
  ]
)

flex 시험 삼아서 해봄.

 

또 무한 스크롤할 때 쓰이는 Flatlist 같은 Component들도 존재해. Flutter에서는 ListView라는 이름으로 사용되는데 Flutter에서 제공하는 첫번째 예제가 바로 ListView로 무한 스크롤을 구현하는 예제인거 보면 그만큼 활용도가 높은 위젯이라는 소리겠지? 👇👇 아래 예제를 따라해보자.

https://flutter-ko.dev/docs/get-started/codelab

첫 Flutter 앱 작성하기 - 1부

그러면 아래와 같은 앱을 만들어 볼 수 있어.

ListView 로 구현한 무한 스크롤 예제

한 가지만 더 소개하자면 RN에서는 컴포넌트 layer를 표현할 때 position='absolute'라는 속성을 통해서 구현했잖아? 그 다음에 원하는 위치에 배치하는 식으로 컴포넌트들을 겹치게 생성했고 z-index라는 속성을 사용해서 컴포넌트가 놓여지는 순서도 조절할 수 있었지. Flutter에서는 Stack이라는 위젯을 사용해. Stack위젯 안에 자식들을 여러개 넣으면 겹쳐지게 되는거지. 각 위젯들의 위치는 Positioned라는 위젯으로 조절해. 그러니까 Stack과 Positioned 위젯을 둘다 써야 한다는 말임.👇👇

Stack(
  children: [
    Positioned(
      top: 0,
      child: Container(
        width: 450,
        height: 150,
        color: Colors.redAccent,
      ),
    ),
    Positioned(
      top: 100,
      child: Container(
        width: 350,
        height: 125,
        color: Colors.blueAccent,
      ),
    ),
 ...
 ...

React native의 z-index 처럼 겹치는 순서 변경을 위한 속성은 flutter에는 없고 stack의 단순하게 children 배열 순서를 변경해서 겹치는 속성을 변경해. 가장 첫번째 배열이 가장 처음에 그려짐.

 

이렇게 RN 컴포넌트에 대응하는 Flutter 위젯들이 있는데 아래 링크에서 확인할 수 있어. 뭔가 시작하기 전에 훑어보기만 해도 시간이 꽤 단축되니까 한번 방문해바바 👇👇

https://docs.flutter.dev/get-started/flutter-for/react-native-devs#react-native-and-flutter-widget-equivalent-components

Flutter for React Native developers

 

Layout 측면에서 비슷한 컴포넌트 말고도 stylesheet, safearea, theme, navigation system, animation 등등도 많은 차이가 있지만 사실 그건 이해하고 깨닫는 수준이 아니라 외우고 익숙해지는 정도의 차이야. ㅋㅋㅋㅋ 외울게 많다는 소리지 ㅋㅋ 이런 것들은 실제로 앱을 만들어가면서 따로 글을 쓰도록 할게.

// React Native
<View
  style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  }}
>

// Flutter
@override
Widget build(BuildContext context) {
  return Center(		//중앙 정렬 위젯
    child: Column(		//세로 정렬 위젯
      children: <Widget>[
        Container(
          color: Colors.red,//속성
          width: 100.0,		//속성
          height: 100.0,	//속성
        ),
      ],
    ),
  );

<RN과 달리 위젯이 세분화되어 있어서 그런지 적용할 수 있는 style 속성이 따로 있다.>