React에서 React Native로 모바일 앱 만들기

 

1. React와 React Native의 개념 이해

React는 Facebook에서 개발한 JavaScript 기반의 라이브러리로, 주로 웹 애플리케이션의 UI를 구축하는 데 사용됩니다. 반면 React Native는 모바일 애플리케이션 개발을 위해 React를 확장한 프레임워크로, iOS와 Android용 네이티브 애플리케이션을 개발할 수 있습니다. 두 기술은 React의 핵심 개념인 컴포넌트 기반 아키텍처와 상태 관리를 공유하며, 개발자들이 웹과 모바일 환경 모두에서 일관된 개발 경험을 누릴 수 있도록 설계되었습니다.

React에서 React Native로 전환한다면 기존 React 경험을 활용해 비교적 수월하게 모바일 앱을 개발할 수 있습니다. 하지만 각 플랫폼의 차이점과 React Native의 고유 기능을 이해하는 것이 중요합니다.

---

2. React Native로 전환하기 위한 기본 준비

2.1 Node.js 및 npm/yarn 설치

React Native 프로젝트를 시작하려면 Node.js와 패키지 관리자인 npm 또는 yarn이 필요합니다.

설치 링크:

• Node.js: https://nodejs.org
• Yarn: https://classic.yarnpkg.com

# Node.js 설치 확인
node -v
npm -v

yarn -v # Yarn을 사용하는 경우

2.2 React Native CLI 설치

React Native 프로젝트를 생성하기 위해 React Native CLI를 설치합니다.

npm install -g react-native-cli

2.3 개발 환경 설정

React Native는 iOS와 Android 개발 환경 설정이 필요합니다.

• iOS: macOS에서 Xcode를 설치해야 합니다.
• Android: Android Studio와 Java Development Kit(JDK)를 설정해야 합니다.

React Native의 공식 문서를 참고해 개발 환경을 설정하세요: React Native 환경 설정

---

3. React 코드에서 React Native 코드로 전환하기

3.1 HTML과 CSS의 대체 요소 이해하기

React는 HTML과 CSS를 사용하지만, React Native는 네이티브 UI 컴포넌트를 사용합니다. 예를 들어, React의 <div>와 <span>은 React Native에서 <View>와 <Text>로 대체됩니다.

주요 태그 매핑

ReactReact Native

<div>	<View>
<span>	<Text>
<img>	<Image>
<button>	<TouchableOpacity> 또는 <Button>
<input>	<TextInput>

3.2 React Native의 스타일링

React의 CSS 파일과 달리 React Native는 JavaScript 객체를 사용해 스타일을 정의합니다.

React 스타일 예시:

const styles = {
  container: {
    backgroundColor: 'blue',
    padding: '10px'
  }
};

React Native 스타일 예시:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    padding: 10
  }
});

3.3 네비게이션과 라우팅

React에서 React Router를 사용하는 것처럼, React Native에서는 React Navigation 라이브러리를 사용해 화면 간 이동을 구현합니다.

React Router 예시:

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
  <Route path="/home" component={Home} />
</Router>

React Native 예시:

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

const Stack = createStackNavigator();

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
</NavigationContainer>

---

4. 프로젝트 예제: Todo List 애플리케이션 만들기

4.1 프로젝트 초기화

npx react-native init TodoApp
cd TodoApp

4.2 기본 컴포넌트 작성

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

const App = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    setTasks([...tasks, task]);
    setTask('');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Todo List</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter a task"
        value={task}
        onChangeText={setTask}
      />
      <Button title="Add Task" onPress={addTask} />
      {tasks.map((t, index) => (
        <Text key={index} style={styles.task}>{t}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 10
  },
  task: {
    fontSize: 18,
    marginTop: 10
  }
});

export default App;

4.3 실행하기

npx react-native run-android # Android
npx react-native run-ios     # iOS

---

5. React Native 개발 시 주의할 점

5.1 플랫폼별 차이

React Native는 크로스 플랫폼을 지원하지만, 플랫폼별로 UI와 기능 구현에 차이가 있을 수 있습니다. 예를 들어, Android는 Material Design, iOS는 Human Interface Guideline을 따릅니다.

5.2 성능 최적화

React Native는 JavaScript를 사용해 네이티브 브릿지를 통해 작동하기 때문에 성능 최적화가 중요합니다. 불필요한 렌더링을 방지하고 useMemo, useCallback과 같은 React Hook을 활용하세요.

---

React에서 React Native로의 전환은 초기 학습 곡선을 넘어서면 매우 강력한 생산성을 제공합니다. 기존 웹 개발 지식을 활용해 iOS와 Android 앱을 동시에 개발하며, 크로스 플랫폼의 장점을 극대화할 수 있습니다. 지금 바로 React Native를 시작해 보세요!