React Native로 모바일 앱 개발하기, 웹과의 차이점

React Native는 모바일 앱 개발을 위한 가장 보편적인 라이브러리로써, 웹 개발자들이 JavaScript와 React 기술을 활용하여 iOS와 Android 앱을 개발할 수 있게 해줍니다. 이번 글에서는 React Native로 모바일 앱을 개발하는 방법과 웹 개발과의 주요 차이점에 대해 알아보겠습니다.

 

네이티브 UI

React Native는 각 플랫폼의 네이티브 컴포넌트를 사용하여 UI를 구성합니다. 이는 앱이 웹뷰를 통해 동작하는 하이브리드 앱과의 차이점입니다. 예를 들어, React Native에서는 , , 등의 네이티브 컴포넌트를 사용하여 UI를 구성합니다.

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

const App = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
      <Image source={require('./image.png')} />
    </View>
  );
};

export default App;

 

개발 환경

React Native 개발을 위해서는 Node.js와 React Native CLI, Android Studio 또는 Xcode 등의 개발 도구가 필요합니다. 웹 개발에서의 브라우저와 개발자 도구와는 다른 환경에서 작업해야 한다는 점을 주의해야 합니다. 또한, iOS와 Android 각 플랫폼별로 빌드와 배포 과정이 필요하다는 차이점도 있습니다.

 

레이아웃

React Native에서는 Flexbox를 사용하여 레이아웃을 구성합니다. Flexbox는 CSS에서 사용되는 레이아웃 시스템으로, 웹 개발자들이 이미 알고 있는 개념입니다. 하지만, React Native에서의 Flexbox는 몇 가지 차이가 있을 수 있으므로 문서를 참고하여야 합니다.

import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} />
    </View>
  );
};

export default App;

 

스타일링

React Native에서는 CSS를 사용하여 컴포넌트를 스타일링합니다. 하지만 웹에서 사용되는 모든 CSS 속성이 React Native에서 지원되지는 않습니다. React Native에서는 특정한 스타일 속성과 단위를 사용해야 합니다.

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

const App = () => {
  return (
    <View style={{ backgroundColor: 'lightblue', padding: 20 }}>
      <Text style={{ fontSize: 18, color: 'white' }}>Hello, React Native!</Text>
    </View>
  );
};

export default App;

 

네비게이션

React Native에서 네비게이션은 React Navigation 라이브러리를 사용하여 구현합니다. 이 라이브러리는 웹의 라우팅과는 다른 방식으로 화면 간 전환을 처리합니다. 스택(Stack), 탭(Tab), 드로어(Drawer) 등 다양한 네비게이션 유형을 구현할 수 있습니다. 아래는 스택(Stack) 네비게이션을 구현하는 예시 코드입니다.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

디바이스 기능

React Native는 네이티브 모듈을 사용하여 디바이스 기능에 접근할 수 있습니다. 예를 들어, 카메라, 위치, 푸시 알림 등의 기능을 활용할 수 있습니다. 이는 웹에서는 불가능한 기능들로, 앱의 풍부한 기능과 사용자 경험을 제공하는 데 큰 장점을 가지고 있습니다. 다음은 카메라 기능을 활용해보는 예시 코드입니다.

import React, { useEffect, useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import { launchCamera } from 'react-native-image-picker';

const App = () => {
  const [image, setImage] = useState(null);

  useEffect(() => {
    // 카메라 권한 요청 등의 초기화 작업 수행
  }, []);

  const openCamera = () => {
    launchCamera({ mediaType: 'photo' }, (response) => {
      if (!response.didCancel && !response.errorCode) {
        setImage(response.uri);
      }
    });
  };

  return (
    <View style={styles.container}>
      {image && <Image source={{ uri: image }} style={styles.image} />}
      <Button title="Open Camera" onPress={openCamera} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 20,
  },
});

export default App;

 

성능

React Native는 네이티브 컴포넌트를 사용하고 JavaScript 코드를 네이티브 스레드에서 실행함으로써 웹뷰 기반의 하이브리드 앱과 비교했을 때 성능이 향상됩니다. 그러나 웹 개발에서와 마찬가지로 성능 최적화를 위해 주의가 필요합니다.

 

React Native는 웹 개발자들이 JavaScript와 React 지식을 활용하여 모바일 앱을 빠르게 개발할 수 있는 강력한 도구입니다. 그러나 웹과는 다른 개발 환경과 특징을 가지고 있으므로, 새로운 개념과 기술을 익히고 이해하는 데 시간이 필요할 수 있습니다. React Native를 사용하여 모바일 앱을 개발해보면, 플랫폼 간 코드 재사용과 네이티브 앱과 유사한 성능을 경험할 수 있습니다.