[React Native] React Native 란?

React Native란?

React Native는 Facebook에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크다.

 

• 기존 android studio와 다르게 JavaScript와 React를 이용하여 ios와 Android 플랫폼에 모바일 앱을 만들 수 있도록 도와준다.
• 실제 네이티브 UI컴포넌트(네이티브 코드를 사용한 UI)를 사용하여 앱을 개발하기 때문에 성능과 UX를 향상시킬 수 있다.
• 앱의 코드를 공통으로 사용하여 ios와 Android 모두에서 동작할 수 있도록 한다. 이로 인해 동일한 코드베이스를 유지하면서 여러 플랫폼에 앱을 배포할 수 있다는 장점이 있다. 

 

장점

• 네이티브 컴포넌트를 사용하기 때문에 성능이 좋다.
• React 컴포넌트를 기반으로 개발하기 때문에 재사용성이 높다.
• 앱을 빌드하지 않고 런타임 환경에서 변경사항을 즉시 확인할 수 있는 Hot Reloading을 사용하기 때문에 편리하다.
• 기존 JS와 React를 알고있는 웹 개발자들은 상댖거으로 쉽게 React native를 배우고 앱을 개발할 수 있다.

장점만 본다면 기존 Android Studio를 사용할 필요가 없다고 느껴진다. 그렇다면 단점은 무엇이 있는지 알아보기로 했다

 

단점

• React Native는 기존 네이티브앱과 비교했을 때에는 성능에 차이가 있을 수 있다. 특히 그래픽이 많이 사용되는 앱의 경우 더 성능차이가 심하게 느껴질 수 있다.
• 대부분 JS로 개발되지만, 특정 기능이나 하드웨어와 관련된 기능을 구현하기 위해서는 네이티브 코드로 작성해야 하는 경우가 생길 수 있다. 그렇게 되면 사용하는 플랫폼에 대한 지식과 경험을 필요로 하기 때문에 사용에 어려움이 생길 수 있다.
• 네이티브 앱보다 파일크기가 크다. React Native 자체의 엔진과 라이브러리의 추가 파일을 포함시켜야 하기 때문이다. 때문에 사용자가 앱을 사용하기 위해 사용되는 시간과 데이터의 양이 많아질 수 있다.
• 개발자 커뮤니티의 규모가 네이티브 개발 커뮤니티보다 상대적으로 작다. 일부 네이티브 기능이나 버그에 대해서는 해결이 늦어질 수 있으며, 이로 인해 개발자들이 직면하는 문제를 해결하는 데 어려움을 겪을 수 있다,

아직은 계속 개발중인 프레임워크라고 생각되기 때문에 어느정도의 성능의 차이는 있을것이라고 생각했기 때문에 큰 단점처럼 느껴지지는 않았다. 

 

 

장점에서 말했듯, 어떤 방식으로 작성되기 때문에 기존 React와 JS유저에게 러닝커브가 낮다고 말하게 되는걸까? 

기본적인 React Native 컴포넌트와 태그의 구성에 대해 조사해보기로 했다.

 

React Native 태그

• View 
  • 가장 기본적인 구성요소를 담당하는 태그이다. html태그로 비유하자면 div와 똑같은 역할을 수행한다고 생각하면 된다.
  • 다른 View내부에 중첩될 수 있도록 설계되었다.

<View>
	<View>
	</View>
</View>

• Text
  • 텍스트를 표시하기 위한 컴포넌트
  • 텍스트를 입력할 때 Text태그를 사용하지 않으면 오류가 발생한다.

<View>
	<Text>hi hello</Text>
</View>

• Image
  • 다양한 이미지를 삽입하기 위해 사용하는 태그
  • 로컬저장소 뿐만 아니라 uri에서 제공되는 이미지도 가져올 수 있다.
  • <Image source={require('이미지 주소')} /> 와 같은 방식으로 이미지를 가져온다.

<Image
  style={styles.topBackground}
  //그림을 뿌옇게 보이게하는 효과를 주는 속성
  blurRadius={1}
  source={require('assets/image/top-background.png')}
/>

• TextInput
  • 키보드를 통해 텍스트를 입력하기 위한 태그, input과 같은 역할이라고 보면 된다.
  • onChangeText속성을 이용해 변경사항을 체크할 수 있다.
  • multiline={true/false} 속성을 이용해 여러줄 입력을 사용할 수 있다.

<TextInput
  style={{ borderWidth: 1, width: 200, height: 200 }}
  multiline
/>

• ScrollView
  • 스크롤을 할 수 있기 위해 사용되는 태그
  • 데이터의 양이 많아 화면을 넘어가게 되면 스크롤이 생기게 해주는 역할을 한다.
  • 렌더를 한번에 다 처리하기 때문에 데이터의 양이 적을 때에만 사용해야한다.

<View style={{ flex: 1 }}>
	<ScrollView style={{ flex: 1 }}>
	<Text>hi hello</Text>
	<TextInput
	style={{ borderWidth: 1, width: 200, height: 200 }}
	multiline
	/>
	<Text>hi hello</Text>
	<TextInput
	style={{ borderWidth: 1, width: 200, height: 200 }}
	multiline
	/>
	<Text>hi hello</Text>
	<TextInput
	style={{ borderWidth: 1, width: 200, height: 200 }}
	    multiline
	/>
	</ScrollView>
</View>

• FlatList
  • ScrollView와 마찬가지로 화면을 넘는 데이터에 대한 스크롤생성 역할을 수행한다. 
  • 모든 데이터를 한번에 렌더링하지 않고 화면에 보여지는 부분이나 설정한 갯수만큼 보여준다.
  • 가변성 데이터일 경우에 사용하기 좋다. 
  • data에 출력할 내용을 넣고 renderItem에 내용에 대한 컴포넌트를 넣어 보여준다.

const Item = ({title}: ItemProps) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};