Android, ReactNative, Flutter 에서 사용되는 기본 개념이 매우 비슷하다고 느꼈다.
그 중에서도 ReactNative와 Flutter가 서로 매우 비슷한데,
아마 선언형 UI를 사용하고, cross platform을 지원하기 때문이 아닐까 싶다.
오늘은 ReactNative와 플러터에서 사용되는 개념에 대해 상호 비교하고자 한다.
(나중에 android native와도 비교할 예정이다.)
일종의 개발 CheatSheet 이다.
ReactNative -> Flutter 순서로 적혀있다.
접근 지점
index.js (index.ts)
ReactNative는 프로젝트 root에 있는 index.js (typescript를 사용한다면 index.ts) 에서 앱 구동이 시작된다.
lib/main.dart
Flutter는 lib 폴더 안에 있는 main.dart 파일에서 main() 함수 부터 구동이 시작된다.
UI
UI 구성 요소
Component
ReactNative는 기본 UI 요소로 Component를 사용한다.
const Component: React.FC<Props> = ({...}) => {
return(
<Component/> ...
)
}Widget
Flutter는 기본 구성 요소로 Widget을 사용한다.
class Widget extends StatelessWidget {
const Widget({super.key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ...
);
}
}기본 UI
View
RN는 가장 기본적인 UI Component로 View를 사용한다.
다른 View를 포함해서 스타일링하거나, 정렬하는 곳에서도 사용되고
간단한 UI구현에도 사용된다.
<View style={{...}}>
<OtherComponent/>...
</View>
<View style={{width:10, height:10, backgroundColor:"#123456", borderRadius:3, borderWidth:1, ...}}/>SizedBox, Container, Center, Row, Column
Flutter는 View가 하는 일은 세분화해서 사용한다.
공간활용 및 크기 설정은 SizedBox와 Container,
정렬은 Center, Row, Column등을 활용한다.
SizedBox(
height: 230.0,
child: Image(
image:AssetImage('packages/flutter_gallery_assets/places/india_chettinad_silk_maker.png')
)
) ...텍스트
Text
RN는 Text Component가 있다.
<Text>Text Comes Here</Text>Text()
Flutter는 Text Widget이 있다.
Text(
'Text Comes Here',
style:TextStyle(
color: Colors.blue,
...
),
...
)텍스트 입력
TextInput
RN는 TextInput로 텍스트 입력을 받는다.
<TextInput
style={styles.textInput}
maxLength={254}
onChangeText={(text) => {...}}
placeholder={"placeholder"}
...
/>TextField
Flutter는 TextField로 텍스트 입력을 받는다.
final myController = TextEditingController();
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),...
)이미지
Image
RN는 Image Component를 사용하고,
source로는 이미지타입이나, url등을 모두 사용할 수 있다.
<Image
style={styles.imageStyle}
source={require("./image.png")}
/>Image()
Flutter는 Image Widget을 사용한다.
저장된 이미지를 가져와서 쓰려면, 먼저 pubspec.yaml에 추가해줘야 한다.
Image(
image:AssetImage('assets/someImage.png')
)클릭 동작
TouchableOpacity
RN는 TouchableOpacity를 활용해서 클릭 동작을 잡아낸다.
<TouchableOpacity
style={{...}}
onPress={() => {
...
}}
...
>GestureDetector
Flutter는 GestureDetector를 통해 클릭을 받는다.
GestureDetector(
onTap: (){
...
},
behavior: HitTestBehavior.translucent,
child: ...
)리스트
FlatList
RN는 FlatList를 통해 리스트를 표현한다.
ScrollView나 Map으로도 표현할 수 있지만, 큰 리스트는 퍼포먼스를 저하시킬 수 있다.
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => String(item.id)}
...
/>ListView
Flutter는 ListView를 통해 리스트 아이템들을 표시한다.
ListView.builder(
controller: scrollController,
itemBuilder: (BuildContext context, int index) {
return ...;
},
);스크롤
ScrollView
RN는 ScrollView를 통해서 스크롤 가능한 화면을 구현한다.
<ScrollView>
<OtherComponents/>
</ScrollView>SingleChildScrollView, ListView
Flutter는 SingleChildScrollView나 ListView 통해서 스크롤 가능한 화면을 구현한다.
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ...
)팝업
Modal
RN는 Visible State를 갖는 모달을 화면 내부에 위치시켜서 팝업을 만든다.
ShowDialog, AlertDialog or ModalRoute
Flutter는 ShowDialog와 AlertDialog를 변형해서 구현하거나,
ModalRoute를 활용해서 팝업을 구현한다.
UI Styling
css styling
RN는 css를 활용해서 Component를 꾸밀 수 있다.
각각의 Component의 스타일을 정할 수 있고,
입력하지 않으면 기본값을 사용한다.
component내의 property 사용
Flutter는 component 안에 정의되어 있는 property를 활용한다.
추가적으로 부모와의 관계와 Constraints를 활용해서 위치를 설정한다.
정렬은 Column, Rows, Center 와 같은 위젯을 사용한다.
겹치는 UI
position:"absolute" or z-index
RN는 position:"absolute"나 z-index를 활용해서 두 가지 이상의 component를 서로 겹치게 표시할 수 있다.
absolute positioning을 사용할 때는 코드상 더 아래 위치한 컴포넌트가 더 상위로 간다.
stack
Flutter는 stack 활용해서 Widget을 겹쳐서 표시할 수 있다.
이때도 더 아래에 있는 내용이 더 우선순위를 가지고 앞쪽에 표시된다.
데이터 전달
props
RN props를 통해 Component에 정보를 전달 할 수 있다.
props type을 optional 하게도 설정할 수 있다.
interface ComponentProps {
name:string;
age:number;
middleName?:string; //->해당 내용은 optional이다.
}
const Component: React.FC<ComponentProps> = (props:ComponentProps) => {
...
}constructor & final => @required or x
Flutter는
class FeedComments extends StatefulWidget {
const FeedComments({super.key, required this.name, this.middlename});
final String name;
final String middlename;
...
}os타입 확인
Platform.OS
RN는 Platform.OS를 활용해서 현재 기기의 os 타입을 알수 있다.
if(Platform.OS === 'android'){
...
}Theme.of().platform
Flutter는 Theme.of(context).platform을 활용해서 현재 기기의 os 타입을 알수 있다.
Theme.of(context).platform == TargetPlatform.android개발자 메뉴
개발자 메뉴는 디버그 모드 중 런타임에서 앱의 상태를 분석&컨트롤 할 수 있도록 도와주는 도구이다.
기기 흔들기
RN는 기기 흔들어서 나오는 개발자 메뉴 팝업을 사용할 수 있다.
디버그 bundle location을 변경해서 hot reload를 다시 attach할 때 많이 사용한다.
UI 분석을 위해서도 많이 사용한다.
terminal h
Flutter는 termial에서 h를 눌러서 개발자 도구를 사용할 수 있다.
그 외에도 s를 눌러서 스크린샷, q를 눌러서 종료, i를 눌러서 inspect 할 수 있다.
참고 내용
https://docs.flutter.dev/get-started/flutter-for/react-native-devs
