RN - 프론트엔드 개발자를 위한 모바일 앱 개발 가이드 🚀

1. React Native란?

React Native(RN)는 React 기반의 크로스플랫폼 모바일 앱 개발 프레임워크이다. JavaScript 및 TypeScript를 사용하여 iOS와 Android 앱을 동시에 개발할 수 있도록 해준다.

주요 특징

• 크로스플랫폼 개발: 하나의 코드베이스로 iOS, Android 동시 개발 가능
• 네이티브 성능: React와 네이티브 코드를 결합하여 최적화된 성능 제공
• 핫 리로드(Hot Reload): 코드 변경 시 앱을 새로 실행하지 않고 바로 반영
• 풍부한 라이브러리 지원: Expo, React Navigation, Redux 등과 호환
• 광범위한 커뮤니티: Meta 및 오픈소스 커뮤니티에서 활발히 유지보수됨

 

2. React Native의 기본 구조

 

React Native 앱의 주요 구조는 다음과 같다:

📦 MyReactNativeApp
 ┣ android  // 안드로이드 네이티브 코드
 ┣ ios       // iOS 네이티브 코드
 ┣ src       // 앱의 주요 React Native 코드
 ┣ assets    // 이미지, 폰트 등의 정적 파일
 ┣ components // 재사용 가능한 UI 컴포넌트
 ┣ screens   // 각 페이지별 화면 구성
 ┣ navigation // 앱 내비게이션 설정
 ┣ App.js    // 앱의 진입점
 ┗ package.json  // 프로젝트 설정 파일

 

3. React Native 설치 및 환경 설정

React Native는 Expo와 React Native CLI 두 가지 방식으로 설치할 수 있다.

3.1 Expo를 사용한 설치 (쉬운 방법)

Expo는 빠르게 React Native 프로젝트를 시작할 수 있는 도구로, 네이티브 빌드를 직접 하지 않아도 된다.

npx create-expo-app MyApp
cd MyApp
npm start

 

3.2 React Native CLI를 사용한 설치 (커스텀 가능)

네이티브 코드를 직접 다룰 필요가 있다면 React Native CLI를 사용한다.

npx react-native init MyApp
cd MyApp
npx react-native run-android # 안드로이드 실행
npx react-native run-ios # iOS 실행

 

 

4. React Native의 주요 개념

4.1 JSX 및 컴포넌트 기반 개발

React Native는 JSX 문법을 사용하며, 컴포넌트 기반 개발을 한다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native! 🚀</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' },
  text: { fontSize: 20, color: '#333' }
});

export default App;

 

4.2 React Navigation (내비게이션)

React Native에서 화면 이동을 관리하려면 react-navigation을 사용한다.

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

const Stack = createStackNavigator();

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