[React Native] #5 React Native 개발이 처음인 React 개발자들을 위해

React Native는 모바일 애플리케이션 개발을 위한 자바스크립트 라이브러리로서, 웹에서 사용하는 React와 유사한 개발 방식을 취하고 있습니다. 하지만, 웹과는 달리 네이티브 환경에서 실행되기 때문에 일부 주요 차이점이 있습니다. 따라서 React에 익숙한 개발자가 React Native로 개발할 때에는 다음과 같은 점에 유의해야 합니다.

1. View를 사용하고 div를 사용하지 않는다

   React Native에서는 웹에서 사용되는 div 대신 View를 사용해야 합니다. 이를 위해

   import { View } from 'react-native'

   을 추가해줍니다.

2. Text component를 사용한다

   React Native에서는 모든 text가 Text component에 들어가야 합니다. span, p 등의 HTML 태그 대신 Text를 사용해야 합니다.

3. React에서 사용하던 일부 style을 사용할 수 없다

   React Native에서는 일부 웹에서 사용하던 style을 사용할 수 없습니다. 예를 들어, border 등의 스타일은 사용할 수 없습니다.

4. StyleSheet.create을 사용한다

   StyleSheet.create 함수는 인자로 전달된 객체를 받아서, 해당 객체 내부의 스타일 정보를 담은 새로운 객체를 반환합니다.

   StyleSheet.create를 사용하면 컴포넌트의 스타일 정보를 한 곳에서 모아서 관리할 수 있습니다. 또한, StyleSheet.create가 반환하는 객체는 변경되지 않으므로 컴포넌트가 렌더링될 때마다 스타일 객체를 새로 생성하지 않아도 되어 성능상 이점이 있습니다.

5. Flexbox를 사용한다

   React Native에서는 Flexbox를 사용해야 합니다. display: block, display: inline-block, display: grid 등의 속성은 사용할 수 없으며, Flex Direction 기본값은 Column입니다.

6. Flex Direction 기본값은 column

   React의 Flex Direction 기본값은 row이지만, React Native의 Flex Direction 기본값은 column입니다.

7. View에 Flex Container가 되라고 말할 필요가 없다

   React Native에서는 모든 View가 기본적으로 Flex Container이므로 display: flex를 추가할 필요가 없습니다.

8. Overflow가 있다고 해서 스크롤할 수 있는 것은 아니다

   React Native는 브라우저가 아니므로, overflow가 있다고 해서 스크롤할 수 있는 것은 아닙니다.

9. width와 height 사용을 지양한다

   React Native에서 너비와 높이에 기반해서 레이아웃을 만드는 것은 좋지 않습니다. 대신 Flex Size를 사용해야 하며, Flex 부모를 만들고 자식을 원하는 비율로 조정할 수 있습니다. 부모의 Flex Size가 있어야 디자인이 적용됩니다.

다음은 위의 유의사항들을 적용한 React Native 코드 예시입니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>Box 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  },
  box1: {
    flex: 1,
    backgroundColor: 'red'
  },
  box2: {
    flex: 2,
    backgroundColor: 'green'
  },
  box3: {
    flex: 1,
    backgroundColor: 'blue'
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff'
  }
});

위의 코드에서는 container View가 Flex 부모이고, box1, box2, box3는 Flex 자식입니다. container View의 flexDirection 속성을 row로 지정해주어서, box1과 box3가 container View의 너비의 1/4만큼, box2가 1/2만큼 차지하도록 하였습니다. 이렇게 Flex 부모와 자식을 이용해 레이아웃 비율을 조정할 수 있습니다.